feat(cli): add support for custom ui dir

[shadcn]

This PR adds support for custom dir/path for ui components. It builds on top of the existing schema, aliases and resolveImport.

Default schema

This will place components inside .[ROOT]/components/ui.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
  }
}

Custom ui alias

This will place components inside .[ROOT]/primitives. Imports will be resolved automatically.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/primitives" <---- adds components to `.[ROOT]/primitives`👈
  }
}

More examples

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils",
    "ui": "~/app/ui" <---- adds components to `.[ROOT]/app/ui`👈
  }
}

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "aliases": {
    "components": "#/components",
    "utils": "#/lib/utils",
    "ui": "#/components" <---- adds components to `.[ROOT]/components`👈
  }
}

Help me test this

1. Add a ui alias to your components.json file.
2. Run the following command to add new components: npx [email protected] add
3. Verify that components are placed in the custom path and that imports are correctly updated.
4. Comment to let me know.

What's an alias?

An alias is an import alias. You can think of it as How do I write imports for my components or utils?.

If you write import { Button } from "@/components/button" then @/components is your alias. import { AlertDialog } from "~/app/ui/alert-dialog" has alias ~/app/ui.

We use aliases instead of paths because it tells us more about your project setup. Using aliases, we can figure out components paths and automatically resolve imports when adding new components.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
ui	⬜️ Ignored (Inspect)	Visit Preview		Jan 2, 2024 1:18pm

[github-actions]

A new prerelease is available for testing:

npx [email protected]

[ezeparziale]

I installed npx [email protected] init
I tested without ui parameter --> The components are saved in @/components/ui automatically
I tested with ui parameter set with @/primitives, when I ran npx [email protected] add alert I got the alert file in primitives folder. If the folder doesn't exist, it is created automatically.

[billymoonz]

works as expected

[shadcn]

Merging. Thanks everyone.

[jonathanwilke]

Seems to be working for me!

[Bolaji06]

Works perfectly fine components get saved automatically into the preferred path.

[tiavina-mika]

when it will be released?

[vagnermaltauro]

yes @tiavina-mika