Export all the components?

[corysimmons]

Why not export everything so users can just yarn add shadui then import { AlertDialog, AlertDialogAction } from 'shadui'?

[banuragaxioned]

I was thinking the same. Definitely sounds cool.

Though I read/see the rationale behind it now https://ui.shadcn.com/docs#is-it-available-as-an-npm-package

[corysimmons]

I can't entirely agree with the rationale.

Just add {...rest} to every element of these compound components, then let users override them with whatever they'd like.

E.g.

// I can use the default stuff to tinker around with and make an MVP
import { Accordion } from 'shadui`

export default () {
  return <Accordion>...</Accordion>
}

// Or if I want to customize them
// MyCustomizedAccordion.tsx
import { Accordion } from 'shadui`

export default () {
  return <Accordion classNames="bg-red-500 ..." style={{ marginTop: '5px' }}>...</Accordion>
}

[its-monotype]

@corysimmons Is your example related to the text that you wrote? Because I don't see any connection between the comment and the example

[corysimmons]

His rationale is something like

Just copy/paste then you can extend the component to handle things like onClick yourself

My point was he can already enable that just by spreading props onto the element.

[shadcn]

@corysimmons Just a quick update here. I am considering this.

https://twitter.com/shadcn/status/1620721685547847680?s=46&t=8-pyuY_WUGx6q9Q5FpMyGw

@corysimmons Let’s keep the discussion open.

[corysimmons]

I think everyone on Twitter is misreading as:

1. Do you want to just have the option to import pre-built stuff?
2. Do you want to be able to ✨ customize ✨?

I'm suggesting the best of both worlds (and how most huge UI kits like AntD, etc. handle it).

import { SomeComponentFromALib } from 'some-lib'

<SomeComponentFromALib
  className="w-20 text-sm" // these will override the defaults if they clash
  onClick={async ({ defaultFn }) => {
    await doSomethingCustomOnAServer()
    defaultFn() // trigger the lib's code
  }}
/>

I think the implementation is something-something {...rest} spreading, or maybe something to do with React Forward APIs.

I'm going to unsubscribe but good luck on your lib! It looks really cool. (ping me if you decide to run with this and have questions on the implementation—happy to look at it with you)

---

Wait you're already doing it. lol just publish to npm and offer the Primitive approach (I'm not familiar with that, but maybe it's a new thing people like) in docs like you're doing? What's the downside to also publishing to npm? 🙃

[rollingmoai]

Closed as completed?

[corysimmons]

@rollingmoai He added a way to add components via a shadcn-ui specific CLI.

That is, look at the Button component docs: https://ui.shadcn.com/docs/components/button

You can still copy/paste if you'd like, or you can use https://npm.im/shadcn-ui to do all that for you.

https://ui.shadcn.com/docs/cli

It combines the two ideas so you don't have to npm i radix-stuff & copy/paste. Instead you can just do something like https://ui.shadcn.com/docs/cli and I'm guessing it will create a ./components/Button/... directory with all the stuff you might need and update an ./components/index.ts so you can just do something like:

import { Button } from '@/components'

I haven't tested this. I'm just guessing that's what is going on.

---

Oh I see it wants import { Button } from "@/components/ui/button"

If you wanted to create an index for this you could do something like this:

// ./components/index.ts
export { Alert } from './ui/Alert'
export { Button } from './ui/Button'

Then import { Alert, Button } from '@/components' would work I guess. 🤷

[rollingmoai]

Yeah, this was already the solution before. What I was referring to was the one that you proposed in the first comment (https://github.com/shadcn-ui/ui/issues/19#issue-1557600549)