The Best UI Components that EVERYONE is Using!

Channel:

codeSTACKr

Subscribers:

296,000

Published on August 21, 2023 2:00:13 PM ● Video Link: https://www.youtube.com/watch?v=DTGRIaAJYIo

Category:

Tutorial

Duration: 54:06

64,833 views

2,092

🦸 Become A VS Code SuperHero Today: https://vsCodeHero.com
🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: https://discord.gg/A9CnsVzzkZ

Discover the power of shadcn/ui, a collection of reusable React components that revolutionize CSS styling in this comprehensive tutorial. Learn how to build an amazing UI in just minutes. Explore the combination of Radix UI and Tailwind CSS, and how shadcn/ui supports server-side rendering, dark mode, and themes.

This video covers:
✅ Ease of Use: Copy and paste components or use the CLI for setup.
✅ Integration with Radix & Tailwind: Unstyled, accessible components with utility-first CSS.
✅ Installation Guides: Step-by-step setup in Astro, Vite, Gatsby, Remix, and Next.js 13.4.
✅ Application Build: Build an e-commerce storefront with shadcn, inspired by @codewithantonio.
✅ Accessibility & Customization: Full keyboard navigation, assistive technology support, and more.
✅ Themes & Dark Mode: Choose from predefined themes and enjoy TypeScript support.

Shadcn/ui is not just a trend; it's a game-changer in web development. Whether you're a beginner or an expert, this video will guide you through the process of creating a visually appealing and fully functional application. Try shadcn in your next project and experience the ease and flexibility it offers. Don't forget to like and subscribe for more content like this!

GitHub Repo for E-Commerce Next.js project: https://github.com/codeSTACKr/shadcn-nextjs
_____________________________________

🛠️ Tools I use:
🟠 codeSTACKr Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 STACKr Code Font (Exclusive to my VS Code Course - https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions
_____________________________________

⏱️ Timestamps ⏱️
00:00 - Intro & Overview
03:26 - Astro Installation
09:47 - Vite Installation
15:27 - Gatsby Installation
21:30 - Remix Installation
26:52 - Next.js Installation
31:45 - Building with shadcn-ui
32:10 - Header Component
32:56 - Container Component
34:26 - Header: Nav Menu
35:50 - Header: Shopping Cart & Theme Toggle Buttons
36:59 - Header: Profile Avatar Menu
39:17 - Dark Mode Toggle Functionality
42:07 - Header: Responsive Sheet
44:29 - Hero Component
46:01 - Product Components
50:41 - Skeleton Components
52:36 - Custom shadcn-ui themes
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

👀 Watch Next:
Playlist: Web Development For Beginners - https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

🌐 Connect With Me:
Website: https://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#reacts #ui #css