Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

Build your UI Component Library in React & Next.js with this ShadCN UI for Beginners tutorial. Shadcn ui is a collection of re-usable components that you can use as a reference to build your own component library.

💖 Support me on Patreon ➜ https://patreon.com/davegray

⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Complete Next.js Developer: https://bit.ly/CompNextJSDev
- Advanced React: https://bit.ly/AdvReactDev
- Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr

🚩 Subscribe  ➜ https://bit.ly/3nGHmNn

📬 Course Updates ➜ https://courses.davegray.codes/

❓ Questions - Please post them to my Discord ➜  https://discord.gg/neKghyefqh

☕ Buy Me A Coffee ➜ https://www.buymeacoffee.com/davegray

🔗 Source Code Example: https://github.com/gitdagray/shadcn-ui-for-beginners

🔗 My Next.js Videos: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Pk-QJIdGd1tGZEzy9RTgtj

👇 Follow Me On Social Media:
GitHub: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/

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

(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:
🔗 shadcn/ui: https://ui.shadcn.com/
🔗 Next.js: https://nextjs.org
🔗 Next.js Light & Dark Modes: https://www.davegray.codes/posts/light-dark-mode-nextjs-app-router-tailwind

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

Dave Gray

Dave gives a beginner-friendly guide on building a UI component library using ShadCN UI in React and Next.js. He explains the differences between reusable components and a full component library, highlights the library's accessibility and customizability, and provides a step-by-step tutorial for creating custom components. He also shows how to integrate Tailwind CSS and TypeScript into the project, making it a comprehensive resource for developers looking to enhance their projects.