How to use Shadcn?

[federicofanini]

I encountered issues while trying to install components from Shadcn into my project. The components don’t seem to work as expected, and I believe there may be a problem with the installation process or the integration steps.

How to correctly manage components installations and routes?

I tried npx shadcn@latest add sidebar-09 but it creates many issues.

[iambilalazhar]

Same problem here.

[jmunckhof]

Could you share some logs of your errors? Would like to check if I have the same issues.

[bennyweise]

I'm not sure if this is best practice, but here are the steps I am following to integrate new shadcn components.

1. In packages/ui, install the new component:
   bunx shadcn@latest add <component>

2. The component itself probably references the tailwind cn function, which points to the wrong location. Replace the reference to import { cn } from "@/utils" to import { cn } from "../utils"

3. Add the new component to the exports so it can be picked up by the app - this involves adding a line to packages/ui/package.json in the exports section (just follow the examples already there).

This is probably not the 'correct' way to do it, but it works for me. I'm quite new to front-end dev so it was really a case of trial and error to figure out something that works.