The Best UI Components that EVERYONE is Using!

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.
✅ 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!

_____________________________________

🛠️ Tools I use:
_____________________________________

⏱️ Timestamps ⏱️
00:00 - Intro & Overview
03:26 - Astro Installation
09:47 - Vite Installation
15:27 - Gatsby Installation
21:30 - Remix 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!
_____________________________________

👀 Watch Next:
_____________________________________

🌐 Connect With Me:
_____________________________________

** 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

[cookiemonster]

I just discovered your channel. This is my second video of yours, and I am impressed by the high quality. Specifically, the clarity and pacing of the videos are optimal for me. And you clearly can do a long video without rushing or without being boring.

[eleah]

Cool. Thanks for including remix, the not-next, or next-before-next.

[CharcoalDaddyBBQ]

I was using Antd for my project but switching to shadcn has made customization so much easier! Thank you

[morshedulislamriaad]

This video is helpful because you show the installation for several framework. Thanku Brayn.

[JamesQQuick]

Shadcn has confused me for a long time. I'm using it for the first time now. Thanks for the video!

[Selendeki]

Shadcn was incredibly easy to use, and it looks amazing. So good

[JCboss]

Thank you so much for this comprehensive tutorial

[SuperYoda]

not to much related to shadcn but should we use "moduleResolution": "Node" in this Next.js invironment?

[otisrancko]

You are really good at this researching stuff

[abdulganiparekh]

Love you so much for your very good explanation, thanks from India

[shukhratmukhammadiev]

Hey, thanks for your video, but adding 'use client' to layout break down nextjs, so for me it does not work

[mediacreatif]

Hi there. Why the name of the component's files inside /components/ui aren't in UpperCamelCase format ? you did for Header.tsx but not form ui/container.tsx.

[husseinkizz]

Long time watching my man, missed your videos!

[tejasshekar]

What about support for SSR ? Since all these components have "use client" directive, there is no SSR advantage?

[justinphilpott]

I have an error when trying some other more complex components e.g.: "DialogTrigger must be used within Dialog", and my nesting is correct, I'm using the astro setup, any ideas?

[arijitRoyFullyStressedOut]

wish there was a sidebar(side menu) component in shad/cn ui lib, can anyone provide me that, I am actually new to frontend. thanks in advance

[byteolu]

Thank You @codeStackr & Antonio! MVP design is easier to build thanks to you guys and your hard work!

[FedoraBrealis]

beginner question when you're building the site in the later half of the video and you're pasting in buttons and routes and things, are you getting this from the Shad site or something or is it just pre-written? I'm just typing it out as I go along but was curious

[zaredchiu]

What if I have a project already built halfway and I used vite javascript swc . can i still use shadcn?

[JoelRdz]

Amazing video!
35:18 shouldn't the key prop be in the Button component instead of Link?