Unable to add shadcn components

[raw-brt]

Is there a reason why you haven't added a components.json file in the ui package?

For those of you trying to add shadcn components to the ui package, you need to add a components.json as described in the docs. Something like this:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/globals.css",
    "baseColor": "gray",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/utils"
  }
}

Great project, guys. Thank you for sharing it!

[pontusab]

oh I'm to used to do it manually! wanna do a PR for this? 🖤

[0xVitae]

Where do you add this?

[jedimonkey]

Actually my PR allows adding shadcn components, but the paths are broken. I can't seem to work out the something that works with shadcn's cli tool. Ideally the alias config needs to be:

 "utils": "../utils",
 "ui": "@ui/components"

to match the dialog.tsx file: import { cn } from "../utils";

But when I have that config it fails:

An invalid components.json file was found at /home/marcus/dev/namer-v1/packages/ui.
Before you can add components, you must create a valid components.json file by running the init command.
Learn more at https://ui.shadcn.com/docs/components-json.

The root issue looks like bun doesn't honour the '@' alias. I've definitely got that working in pnpm monorepos before, but I'm new to bun. Any help here would be appreciated!

[jedimonkey]

My pr didn't fully fix the issue - but I can't work out how you are bringing in the shadcn components in the format that you have in the repo. Do you add them and then fix the paths?

Is the ts aliases a bun monorepo issue? The IDE seems to know what's going on, but Bun fails. I'd re-open this ticket, as it's not fixed.

[KyoeiX]

I had to: bun add @radix-ui/react-switch

in packages/ui

Then add the Shadcn Switch component manually, updating the references in package.json:

"exports": {
    "./globals.css": "./src/globals.css",
    "./cn": "./src/utils/cn.ts",
    "./button": "./src/components/button.tsx",
    "./input": "./src/components/input.tsx",
    "./tooltip": "./src/components/tooltip.tsx",
    "./dialog": "./src/components/dialog.tsx",
    "./icons": "./src/components/icons.tsx",
    "./switch": "./src/components/switch.tsx",
    "./tailwind.config": "./tailwind.config.ts",
    "./postcss": "./postcss.config.js"
  },

[0xVitae]

this is broken still