Change default ui directory

[riccardolardi]

Is it possible to change the default ui directory? I'd like the CLI to install new components into @/components/ui-library instead of @/components/ui. Thanks

[mohamedaleya]

According to CLI docs, there's a -p (or --path) option that should do the trick, however after testing it, that didn't work. It keeps installing the component in the /src/components/ui folder.

Here's what I have tried:

npx shadcn-ui add --path /src/components/ui-library alert
npx shadcn-ui add --path /src/components/ui-library alert
npx shadcn-ui add -p /ui-library alert

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

There exist many issues related to this bug if you need more info. Here's one of them:
#848 (comment)

[shadcn]

This is something I'm looking into. It's currently hardcoded to UI but definitely something that we'll make configurable. Assigning this to me.

[Stefandasbach]

Any update on this @shadcn?

[shadcn]

@Stefandasbach I haven't had time to look into it yet. For now, as a workaround, you can provide --path when adding components.

-p, --path <path>  the path to add the component to.

[mindofjonas]

Looks like this still isn't working with npx shadcn-ui add <component> --path <path> either.

[nopitown]

The workaround doesn't work as well :( I hope this option is enabled soon so adoption for existing projects is easier.

[claudfuen]

Bumping this up, would love to be able to configure a default path on components.json for CLI to reference

[datproto]

Bump this again, really need this kind of feature

[artemshchirov]

Bump this again, really need this kind of feature

[unnoq]

Bump this again, really need this kind of feature

[rogerrc12]

Hoping to have this soon

[claudfuen]

Bumping again pls add

[josephdburdick]

Change the path setting in the components.json then run the cli again.

[victorharry]

Any update on this @shadcn?

[joemcbroom]

@shadcn I know you're busy but I tracked down the line which seems to be blocking the workaround
I hesitate to open a PR for it though since it's there for a reason I guess?

ui/packages/cli/src/utils/registry/index.ts

Line 121 in 1cf5fad

if (override && item.type !== "components:ui") {

[shadcn]

Update: Back from vacation. Working on this now.

[joemcbroom]

@shadcn if it's a simple fix but you don't have time to work on it, let me know I'd love to sync on it and be able to contribute. And I'm on PTO this week so have the time :)

[schulzf]

#2266 closes this

[shadcn]

Yes. I believe this is fixed #2266. Please reopen if not. Thank you.

[seanparkross]

I don't think this is working.
npx shadcn@latest add --path /src/components/ui progress
It always goes to /components/ui and then need to move it manually

Tried:
npx shadcn@latest add --p /src/components/ui progress
npx shadcn@latest add --path src/components/ui progress
etc.

[olajoao]

I don't think this is working. npx shadcn@latest add --path /src/components/ui progress It always goes to /components/ui and then need to move it manually

Tried: npx shadcn@latest add --p /src/components/ui progress npx shadcn@latest add --path src/components/ui progress etc.

change your components.json file to the custom path you want

[L3on06]

To customize the installation path for ShadCN/UI components, follow these steps:

1. Navigate to the components.json file.

• If this file does not exist at the root level, run the command:

npx shadcn@latest init

2. In the components.json file, update the following properties:

• ui: Specify the path where the components should be installed.
• components: Define the path for the components' installation.

Example:

{
  "ui": "@/shared/components/ui",
  "components": "@/shared/components"
}

[alex-reusables]

I modified my components.json and that does work to set the install directory to a custom path.

The -p flag remains documented as an option for the add command but for me that path was ignored on component installation. Perhaps it should be removed from the documentation?

[benbonnet]

for test purpose i"ve done this :

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "app/app.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "~/components",
    "utils": "~/components/lib/utils",
    "ui": "~/components/ui",
    "lib": "~/components/lib",
    "hooks": "~/components/hooks"
  },
  "iconLibrary": "lucide"
}

rr7, dont want lib in app/lib

I would've have expected the generated components using this alias for lib (...import { cn } from "~/components/lib/utils"), but it invariably generates import { cn } from "~/lib/utils";

Probably a skill issue; but as of now changing this alias does not seem to have any effects. thank for clarifying