Guide: Adding new component

[jrTilak]

Hey, I was trying to add some a new component as per some #issuse but, I do not know the proper steps. So I want a to know the steps to do so.

I have done the following thigs:

• Created the new components in /registry/default/ui and /registry/new-york/ui
• Created the demo components in /registry/default/example and /registry/new-york/example
• Added my componet in /registry/registry.ts
• ...

Then now, what should I do!!

Thanks!!

[Febin-Joseph]

sure @jrTilak i will help you ,These all steps you done are correct like creating files in /registry/default/ui and /registry/new-york/ui and creation of /registry/default/example and /registry/new-york/example and added the component and its demo in registry these all are correct and the next step is to

1. build it by using pnpm build:registry now you will be getting some additional files dont care about it .
2. Add your componentName.mdx in apps/www/content/docs/components (keep in mind the extension should be .mdx)
3. Now move to apps/www/config/docs.ts and add the component name and other details like other in that file .
   BONUS TIP:
   when adding a new component name and other details in docs.ts dont forgot to add label: "New" so it will dispaly as a new
   compenent in the webpage
4. and atlast use this for build or run the package/cli using pnpm --filter=shadcn-ui dev
5. Now move to the testing part use pnpm test .

[jrTilak]

Ok, now everything is going as expected, Only one issue left->

• When i do pnpm build:registry and open the local server of the shadcn website, it shows everything, the documentation written in mdx file but the component preview is not showing.

I debug and found out that there is a file called app/www/__registry__/index.tsx which is erosible for showing the preview and it is auto generated file. I checked that file after build but my component is not included there due to which this issue is there

If i manually update the file as other components data is there, it works fine but i am not supposed to edit that file. So what am i missing?

[Febin-Joseph]

I think building one's more will may fix the problem. Else needed to check that the component-demo in index.tsx exists or any other probs. In index.tsx

[jrTilak]

Yeah, I figured it. We also have to include the component in /registry/registry.ts

[diegoulloao]

Having the same issue, what was the solution? I've followed the above steps and still getting Component component-demo not found in registry.

[diegoulloao]

Ok, I had to add my component to registry/ui.ts and my example to registry/examples.ts, finally build the registry again: pnpm build:registry.