monorepo add component fixed "@workspace" name

[neznayer]

This is about using a monorepo setup with new CLI.
Recently I was trying to use the new monorepo feature on the CLI with my existing next.js monorepo project. I have the name of the packages/ui package set as @mycompany/ui. I found that changing @workspace namespace to some other (for example, @mycompany) would break importing the utils.

For example, in the standard example, scattered by bunx --bun shadcn@canary init (as described here), adding , for instance, card component:

cd apps/web
bunx --bun shadcn@canary add card

would scatter the card.tsx into the packages/ui/src/components/card.tsx file, no problems.
But if change the @worksapce to something else throughout the code (@mycompany for instance), and re-run the add CLI the import of cn in the card.tsx would become incorrect. It will become
import { cn } from "@mycompany/lib/utils"
instead of
import { cn } from "@mycompany/ui/lib/utils"

Changing @mycompany back to @workspace would fix it back.
import { cn } from "@workspace/ui/lib/utils"

[danielbwh]

seeing the exact same thing, thanks for posting

[toyamarodrigo]

Yup it happens to me too. +1

[alathon]

Can confirm; I've tried a number of different things, with/without tsconfig paths etc -- it happens even if you don't define any path aliases in tsconfig. I can't really see why looking briefly at the code, but any alias with multiple forward-slashes except one using the word 'workspace' seems to just cut off before the first forward-slash. E.g.:

• Works fine: @workspace/ui
• Works fine: @workspace/abcdefg/hijk
• Works fine: workspace/abcd
• Works fine: ~workspace/abcd
• Doesn't work: @workspaces/ui --> utils are imported as import { cn } from "@workspaces/lib/utils"
• Doesn't work: @anythingElse/abcd --> utils are imported as import { cn } from "@anythingElse/lib/utils"
• Doesn't work: ~anythingElse/abcd --> utils are imported as import { cn } from "~anythingElse/lib/utils"
• Doesn't work: anythingElse/abcd --> utils are imported as import { cn } from "anythingElse/lib/utils"

[v0rs4]

Same exact issue here. Has it been fixed?

[toyamarodrigo]

I tried using version 2.1.6 and it seems to work 🤔 at least for this case @anythingElse/abcd. I haven't tried other use cases.

pnpm dlx [email protected] add [COMPONENT]

canary and > 2.1.7 seem to be broken

or do what zwarunek did

Originally posted by @zwarunek in #6409

[junior-jornada]

How can I set up a monorepo with Turborepo, pnpm, Next.js, Tailwind CSS, and shadcn/ui, in a way that allows me to share the shadcn component library across multiple apps such as dashboard, financial, etc.?

[duhnunes]

shadcn uses tsconfig.json as its base installation path.
You must modify paths within tsconfig.json as well.

"paths": {
      "@<your-package-name>/ui/*": ["./src/*"]
    }

then you can use it in components.json

"aliases": {
  "components": "@<your-package-name>/ui/components",
  "utils": "@<your-package-name>/ui/lib/utils",
}

so when you run pnpx shadcn@latest add button it will install in the correct location: /packages/ui/components/

[akashdeep023]

Thanks @duhnunes

[alessiotortora]

do you have a solution for monorepo with tanstack start ? it says i have two globals.css but my globals.css never gets updated it stays empty.

bunx --bun shadcn@canary add button
✔ Checking registry.
✔ Installing components.
✔ Created 1 file:

• packages/ui/src/components/button.tsx
  ℹ Updated 2 files:
• packages/ui/src/styles/globals.css
• packages/ui/src/styles/globals.css