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

A detailed code-walkthrough of how I built my components library using shadcn-ui components from ui.shadcn.com
Github repo - github.com/rajeshdavidbabu/sh...
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
8:11 - Setting up vite-config and package.json
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

[@akahades11]

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

[@raj_talks_tech]

Happy that you found value, will try and do my best !

[@Mohammed-019]

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

[@raj_talks_tech]

Glad you liked it! Will try to come up with more quality content

[@yashkhd1100]

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

[@raj_talks_tech]

Thanks Yash. I am a barebones guy, I like minimal build-tooling setup and scale it based on my needs. Some CLI tools have a lot of boilerplate !

[@tiagoagm]

Very good man. Great tutorial. Thanks

[@raj_talks_tech]

Cheers bud. Glad you found it useful !

[@Assoehosselaar]

Amazing video!

[@raj_talks_tech]

Glad you found it helpful !

[@pluraltest9242]

Awesome content

[@raj_talks_tech]

Thanks for the feedback !

[@DioArsya]

wow this is so cooool 🎉

[@user-ge6fi4iy6q]

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

[@raj_talks_tech]

Thanks for the love !!!

[@Shubham-yc6nz]

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

[@raj_talks_tech]

Appreciate the feedback, can you tell me what you dint understand so that I can improve my next videos

[@mrbanana6969]

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 ?

[@raj_talks_tech]

Not sure looks like a dev environment problem. Never tried this setup, usually if you are using JS it shouldn't complain unless u add a //@ts-check at the top of the file

[@vuluu4066]

Although we have the tree-shacking for the components, the shadcn-ui-library-starter/dist/style.css still includes css of all the exposed components. Do you have any solutions to solve it?

[@raj_talks_tech]

Hey, Thanks for the question I haven't tried this out yet, but it could be that this is a limitation of tailwindcss. In the final build of your app, do you see tailwindcss purging unused css ?

[@vuluu4066]

​@@raj_talks_tech A potential solution is that setting up a monorepo for the Component Library. Each component has their own Vite config to build and to expose js, css artifacts.

[@raj_talks_tech]

That could work. But isn't that an overkill ? I assume chakra-ui had such a setup like that but they never seem to recommend it. But yeah should work ! Or you could try pandacss instead of tailwindcss

[@eca8799]

is this possible to do in an existing app project?

[@raj_talks_tech]

Should be if you have tailwindcss support

[@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!

[@raj_talks_tech]

U could write ur own plugin for tailwind, or just build and import the css file

[@CardCollectorKing]

Any possibility of going through form components using shadcn?

[@raj_talks_tech]

Hey, I will add it to my list of things to consider. Thanks for the feedback !

[@jamesnelson174]

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.

[@raj_talks_tech]

Hey James, Thanks the code is in the description and you just have to do an npm build and publish it to the public npm registry, and you are good to go! In your target apps, you can add them as an npm module and use it!

[@jamesnelson174]

@@raj_talks_tech thanks for the reply. Can u do an example on ur channel so we all learn.? Thank you again

[@raj_talks_tech]

Will consider it for future videos !

[@JD-eu8re]

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

[@raj_talks_tech]

I mean you dont have to, you only have to import the index.css from this library you are building. Once your library bundle is ready then you can simply work with that. Look at the example project !

[@Phantom-pj1ls]

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

[@raj_talks_tech]

Most likely not. Because all the components still use tailwind classes heavily.

[@Phantom-pj1ls]

@@raj_talks_tech Yeah it sucks! It's an awesome tool and I hope someday we can use it with other than Tailwind! I had to make some tweaks even to get basic color change between active/inactive tabs!

[@raj_talks_tech]

​@@Phantom-pj1ls Or you can try and convert the tailwind css classes to css-module classes and use them like a normal CSS. That would also be an option.

[@Phantom-pj1ls]

@@raj_talks_tech I could but that wasn't the problem! The problem is that for some reason this data-[state=active]: "bg color here" doesn't seem to work css directly like in Tailwind! I had to use a hook to toggle between active tabs and with that state changing color!

[@Randomguy48279xyz]

👍

[@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".

[@raj_talks_tech]

haha yes you are right. I often miss pronounce it. Thanks for the feedback!

[@mujtabakamal9538]

How can I import this library in NextJs app

[@raj_talks_tech]

You can publish it and then import it. But if you are using Next.js then I would say follow the instructions for setting up the library at ui.shadcn.com

[@mujtabakamal9538]

thanks