Let's Build a Component Library Using Shadcn's UI Components

Timecodes:
0:00 - What are we building ?
1:03 - Requirements for a component library
2:20 - Building the library template
3:43 - Cleaning up the template
4:23 - Setting up shadcn configs
6:50 - Setting up tailwind build process
7:47 - Setting up tsconfig
10:38 - Adding more components to the mix
11:06 - Testing the library with an app
15:30 - Avoiding classname clashes
16:08 - Removing base-css from tailwindcss
16:47 - Github repo

[akahades]

You deserve more recognition. Keep up the good work! I liked and subscribed in hopes of more quality contents like this.

[Mohammed-]

This is the video I was looking for, I am wait for more quality contents like this.❤

[CandraDarmawan-eq]

Yeay!, my subs make it hit 1k.
thank you for your hard work and share to the people

[ffeeejj]

I highly appreciate the work you've done ❤

[vuluu]

Although we have the tree-shacking for the components, the still includes css of all the exposed components. Do you have any solutions to solve it?

[yashkhd]

This was great...liked and subscribed..!! One addition with this already great video can be setting up pro grade library structure with Nx or Turbo workspace

[bearbricknik]

Awesome video! Thank you for sharing the insights. I am currently looking into this and maybe you know if you also have a video where you share how to upload this custom UI Library to github and install all the components from a github url directly? The idea is to create a custom library in a private repo and re-use this library across multiple projects to keep the UI always the same across the apps. This means the UI library has to be independent from the apps I am creating.

Would love to hear from you! 👍 for this video

[mrbanana]

Nice tutorial. I set my test app to be ts instead of js and the variant props (i.e. variant and size for Button) are not typed. So there is no intellisense/ I can essentially add any prop to the button in importing apps, despite the d.ts files for the button being build properly. any ideas why this would be ?

[huakun]

Thanks! I was doing exactly this but couldn't get tree shaking working. Saved me several hundred KB!

[jamesnelson]

Great tutorial, How can i build my own npm package from shadcn and only use and build the only components i want. i want to have it on npm package too. I want to be able to use it in other projects not just by copy pasting.
Thank you... Anticipating your response.

[JoshPalmeroc]

Do you know how to include the css within the components automatically? It would be nice if the consumer of the library doesn't additionally need to import a css file. Thanks for the video btw very helpful!

[CardCollectorKing]

Any possibility of going through form components using shadcn?

[eca]

is this possible to do in an existing app project?

[Phantom-pjls]

What about if I dont want to use Tailwind? Can I still use shadcn?

[waffle-codes-js]

I promise I'm not trying to be a jerk, I had a hard time with the word as well..

Component is pronounced: Kuhm-poh-nuhnt. The first O makes more of an 'UH' sound, The second "o" sounds the same as the letter, e.g. "oh".

[J-eu]

what do we change so that we don't have to install Tailwind in the consumer App ?

[Shubham-ycnz]

Thanks quality content. I didn't understand everything but not bad

[mujtabakamal]

How can I import this library in NextJs app