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
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
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?
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 ?
@@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.
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
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 ?
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
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!
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".
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.
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!
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 !
@@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!
@@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.
@@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!
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
![SAFEPLANET - ดาวเคราะห์ [ THE PLANET ]](http://i.ytimg.com/vi/4X1XL3I_k3c/mqdefault.jpg)
You deserve more recognition. Keep up the good work! I liked and subscribed in hopes of more quality contents like this.
Happy that you found value, will try and do my best !
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
Thanks !! You can checkout the current shadcn-cli implementation its doing something similar, enabling us to bring in components from other places
Yeay!, my subs make it hit 1k.
thank you for your hard work and share to the people
Thanks for the love !!!
This is the video I was looking for, I am wait for more quality contents like this.❤
Glad you liked it! Will try to come up with more quality content
Very good man. Great tutorial. Thanks
Cheers bud. Glad you found it useful !
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
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 !
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?
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 ?
@@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.
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
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 ?
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
Thanks! I was doing exactly this but couldn't get tree shaking working. Saved me several hundred KB!
Amazing video!
Glad you found it helpful !
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!
U could write ur own plugin for tailwind, or just build and import the css file
Awesome content
Thanks for the feedback !
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".
haha yes you are right. I often miss pronounce it. Thanks for the feedback!
Thanks quality content. I didn't understand everything but not bad
Appreciate the feedback, can you tell me what you dint understand so that I can improve my next videos
is this possible to do in an existing app project?
Should be if you have tailwindcss support
wow this is so cooool 🎉
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.
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!
@@raj_talks_tech thanks for the reply. Can u do an example on ur channel so we all learn.? Thank you again
Will consider it for future videos !
Any possibility of going through form components using shadcn?
Hey,
I will add it to my list of things to consider. Thanks for the feedback !
what do we change so that we don't have to install Tailwind in the consumer App ?
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 !
What about if I dont want to use Tailwind? Can I still use shadcn?
Most likely not. Because all the components still use tailwind classes heavily.
@@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!
@@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.
@@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!
👍
How can I import this library in NextJs app
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
thanks