Skip to content

Incorrect behavior in monorepo #10

@winstonpurnomo

Description

@winstonpurnomo

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions