When using the shadcn cli in a monorepo, the behavior is incorrect:
Set up with shadcn@canary init, then select Next.js (Monorepo) option, which will setup a web package and a ui package that it imports from. It features components.json in both folders, and the workflow is to install root ui components into the ui package.
apps/web/components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "../../packages/ui/src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"iconLibrary": "lucide",
"aliases": {
"components": "@/components",
"utils": "@workspace/ui/lib/utils",
"ui": "@workspace/ui/components",
"lib": "@/lib",
"hooks": "@/hooks"
}
}
packages/ui/components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "",
"css": "src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"iconLibrary": "lucide",
"aliases": {
"components": "@workspace/ui/components",
"utils": "@workspace/ui/lib/utils",
"hooks": "@workspace/ui/hooks",
"lib": "@workspace/ui/lib",
"ui": "@workspace/ui/components"
}
}
So when we install shadcn sidebar for example:
❯ pnpm dlx shadcn@latest add sidebar
✔ Checking registry.
✔ The file button.tsx already exists. Would you like to overwrite? … no
✔ Installing components.
✔ Created 7 files:
- apps/web/hooks/use-mobile.ts
- packages/ui/src/components/input.tsx
- packages/ui/src/components/separator.tsx
- packages/ui/src/components/sheet.tsx
- packages/ui/src/components/sidebar.tsx
- packages/ui/src/components/skeleton.tsx
- packages/ui/src/components/tooltip.tsx
ℹ Updated 3 files:
- apps/web
- packages/ui/src/styles/globals.css
- packages/ui/src/styles/globals.css
ℹ Skipped 1 files: (use --overwrite to overwrite)
- packages/ui/src/components/button.tsx
The Basecn behavior is not correct - it reinstalls existing component (button) into an incorrect location, and the new component also does not respect the specified location (installs into packages/ui/src/components/ui instead of packages/ui/src/components).
❯ pnpm dlx shadcn@latest add https://basecn.dev/r/sidebar.json
✔ Checking registry.
✔ The file use-mobile.ts already exists. Would you like to overwrite? … no
✔ Installing components.
✔ Created 6 files:
- apps/web/components/ui/button.tsx
- apps/web/components/ui/input.tsx
- apps/web/components/ui/separator.tsx
- apps/web/components/ui/sheet.tsx
- apps/web/components/ui/tooltip.tsx
- packages/ui/src/components/ui/sidebar.tsx
ℹ Updated 2 files:
- packages/ui/src/styles/globals.css
- packages/ui/src/styles/globals.css
ℹ Skipped 2 files: (use --overwrite to overwrite)
- apps/web/hooks/use-mobile.ts
- packages/ui/src/components/skeleton.tsx
When using the shadcn cli in a monorepo, the behavior is incorrect:
Set up with
shadcn@canary init, then selectNext.js (Monorepo)option, which will setup a web package and a ui package that it imports from. It featurescomponents.jsonin both folders, and the workflow is to install root ui components into theuipackage.apps/web/components.json
packages/ui/components.json
So when we install shadcn sidebar for example:
The Basecn behavior is not correct - it reinstalls existing component (button) into an incorrect location, and the new component also does not respect the specified location (installs into
packages/ui/src/components/uiinstead ofpackages/ui/src/components).