How about adding a $lib/components/ui/index.ts file?

[Evertt]

Currently I'm doing this for myself in every project that uses shadcn, but I think it would be nice for everyone. So my $lib/components/ui/index.ts basically looks like this:

export {
  Button,
  buttonVariants,
  type ButtonProps,
  type ButtonEvents,
} from "./button"

export { Checkbox } from "./checkbox"
export * as DropdownMenu from "./dropdown-menu"
export { DarkmodeSwitch } from "./darkmode-switch"
export * as Form from "./form"
export { Input } from "./input"
export { Label } from "./label"
export * as RadioGroup from "./radio-group"
export * as Select from "./select"
export { Skeleton } from "./skeleton"
export * from "./sonner"
export { Switch } from "./switch"

So in my components I can write:

import { Button, DropdownMenu } from "$lib/components/ui"

Or since I've set up an extra alias I can write:

import { Button, DropdownMenu } from "$ui"

Or since Vite is actually quite smart with their treeshaking, I can now even do:

<script>
  import * as UI from "$ui"
</script>

<UI.Button>Click me</UI.Button>
<UI.DropdownMenu.Root>...</UI.DropdownMenu.Root>

And Vite will properly tree-shake the UI components so the build-files never contain more code than they need to.