Build Your UI Component Library in React & Next.js | ShadCN UI for Beginners

⭐ Become a full-stack web dev with Zero To Mastery Courses:

👇 Follow Me On Social Media:

(00:00) Intro
(00:11) Welcome
(00:34) What is shadcn/ui?
(02:04) Suggested Prerequisites
(02:50) Installing shadcn/ui
(07:57) Adding Your First Component
(13:45) Quick View of Dark Mode
(14:47) Building a Custom Component

📚 Tutorial References:

Was this tutorial about building your own UI component library with shadcn/ui helpful? If so, please share. Let me know your thoughts in the comments.

#shadcn #ui #component

[FalioV]

For the past year for me became like a ritual to watch you early in the weekends (since I have no time trough out of the week :D). And you always give me something new to look at or another point of view that is priceless. Thank you for your work and keep it up ! :)

[kumargupta]

Thanks for it! Dave. More on other library as well

[AndreaBarghigiani]

Hi Dave, great video as usual and thank you for publishing so much quality content.

You know what could be a great idea for the next video? A course where you teach us how to leverage the ShadCN UI library by building our own library. I've been wrapping my head around the replication of the amazing CLI that this library provide us. It could be great to have the ability to install our own components with our own CLI tool 😅

[togya]

Combining shadcn ui & daysi ui is just 🔥🔥👌🏿

[MouseCodes]

Can we get an advanced guide on design systems and component libraries where you address topics like testing, storybook and playwright?

[samadams]

Thank you very much Coach Dave, Shadcn Amazing anther great tutorial. Big hugs coach, love it🙏

[chouaibdjerdi]

Loved the video I think we need to see more videos about ShadcnUI on Youtube

[johannes.evol.]

Hey thanks for the intro! Would’ve loved if you stayed on dark mode haha, my eyes hurt from all the white 😂 greetings from Portugal

[rajfekar]

Please explain shadcn datatable with search, filter with drizzle or prima or api data

[hakuna_matata_hakuna]

parkui bettre and more cohesive and cross framework, try showing sonner toast nside a dialog in shadcn

[riccardopellegrino]

Hi @DaveGrayTeachesCode, super interesting content! I have a question: If you just need to give styling to the components, would you keep this approach of creating a new component which uses the shad component inside? Or would you override the shad component with new variants? (or edit current variants?)

[piotrszymanski]

Great vid, but i think that everybody who is looking for this type of content, already knows how to create a component made from others component and use it as a whole and it would be nice to show how to handle passing all the props like onChange, value etc... to that custom component which will be forwarded to initial text input - this is more usefull i think.

[BrajagopalMukherjee]

Hi Dave, started with Shadcn ui, Can we expect Reactjs revised tutotial ?any full stack project as u have covered Backend also (me also from your help)?

[shubhamupadhyay]

I just completed django so can you please make a project with django and react

[nasarullahkhan]

In react 19 forwardRef will not work. But Shadcn used forwardRef about in all components.

[saitulasi]

Sir, why haven't you added angular tutorial?

[piotrszymanski]

Sure, u right, but making components in react seems like obvious. The follow up would be highly appreciated. :)

[creatorsremose]

It essentially IS a component library with extra steps... meaning that if there's a new version that introduces important features or improvements, good luck upgrading. Seems like a weird hype to me.

[kamaliddinsattorov]

Yo Dave, you could have waited another year or so to upload this video. I mean, are you racing with that sloth in Zootopia? If so, you are losing race)

[DanteMishima]

Shadcn.... Yeah, I'm never using it.