The Best UI Components that EVERYONE is Using!

Рет қаралды 129,863

Күн бұрын

🦸 Become A VS Code SuperHero Today: vsCodeHero.com
🧑🏾‍🤝‍🧑🏽 Join my Discord developer community: / discord
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: github.com/codeSTACKr/shadcn-...
_____________________________________
🛠️ Tools I use:
🟠 codeSTACKr Theme: marketplace.visualstudio.com/...
🟠 STACKr Code Font (Exclusive to my VS Code Course - vsCodeHero.com)
🟠 SuperHero Extension Pack: marketplace.visualstudio.com/...
_____________________________________
⏱️ 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: paypal.me/codeSTACKr
_____________________________________
👀 Watch Next:
Playlist: Web Development For Beginners - • Web Development - Begi...
_____________________________________
🌐 Connect With Me:
Website: www.codestackr.com
Twitter: / codestackr
Instagram: / codestackr
Facebook: / 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

Пікірлер: 121

@codeSTACKr 10 ай бұрын

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

@cookiemonster208 8 ай бұрын

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.

@codeSTACKr 8 ай бұрын

Thank you! I appreciate that 🙌

@CharcoalDaddyBBQ Ай бұрын

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

@eleah2665 10 ай бұрын

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

@Frostbytedigital 9 ай бұрын

What I think is most underappreciated about remix is that you can do everything you can in next AND have the ability to use different backend options that are configured for the remix router. I went with express and was able to just copy and paste a bunch of my API when rewriting an older project into react.

@tribuiduonguc7788 9 ай бұрын

lol what is all that accordingly?

@Selendeki 4 ай бұрын

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

@JCboss29 5 ай бұрын

Thank you so much for this comprehensive tutorial

@morshedulislamriaad6496 10 ай бұрын

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

@codeSTACKr 10 ай бұрын

You're welcome!

@blackpurple9163 9 ай бұрын

@@codeSTACKr hey, I use react+vite but not typescript, can you make a Short explaining the installation for non typescript vite react project? I use tailwind css of course, but not typescript (haven't learnt it yet, it's overheating to a beginner like me) Also if possible, can you please tell me why my basic vite react app lags so much and gets stuck in infinite loops even though there's no loops in my code, like an extension to check what the code is actually doing

@JamesQQuick 4 ай бұрын

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

@codeSTACKr 4 ай бұрын

It’s really amazing!

@otisrancko 9 ай бұрын

You are really good at this researching stuff !!!.....

@abdulganiparekh6947 9 ай бұрын

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

@renoox1153 8 ай бұрын

You´re the best man!! thx so much

@SuperYoda7 9 ай бұрын

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

@byteolu 7 ай бұрын

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

@husseinkizz 9 ай бұрын

Long time watching my man, missed your videos!

@codeSTACKr 9 ай бұрын

Thank you! Hoping to be more consistent again.

@husseinkizz 9 ай бұрын

@@codeSTACKr yes man you got this, I missed your content, been on here for a while, I like a few old jade masters here!

@hichamabboud9672 9 ай бұрын

I would love a deep dive into Shadcn-ui, how to change color on components (primary, secondary…), just how to customize the whole project please

@mallusrgreat 5 ай бұрын

its in @/components, it uses tailwind so if you know tailwind, you can modify it very easily

@mnchabel8402 6 ай бұрын

Wow, nice intro to shadcn

@JoelRdz 9 ай бұрын

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

@diegokrause6347 7 ай бұрын

in this case no, because the button is set as asChild, in this case the button is not rendered, that's why the key prop in the link.

@shukhratmukhammadiev4994 6 ай бұрын

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

@FedoraB0realis735 9 ай бұрын

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

@codeSTACKr 9 ай бұрын

Those are coming from the shadcn components that got copied to our project when running the shadcn add command.

@tejasshekar 6 ай бұрын

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

@justinphilpott 7 ай бұрын

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?

@zaredchiu8260 7 ай бұрын

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

@mediacreatif 7 ай бұрын

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.

@hanzofuma 9 ай бұрын

Yesterday I was able to make ChadCn UI working on Angular 😎

@blackpurple9163 9 ай бұрын

It looks good doesn't it

@hanzofuma 9 ай бұрын

Yuup

@shamim12314 9 ай бұрын

Video sound is low. Though thanks for this video

@Oroshimisu 8 ай бұрын

hey man you probably get this question a lot but how did you make this smooth animation on type in your vscode ? Thanks

@codeSTACKr 8 ай бұрын

Hey! It’s just cursor settings in vs code.

@JohnSmith-op7ls 5 ай бұрын

Amazing looking UI… Is literally just a grid with cell borders and and an image and text in each one lol

@arijitRoyFullyStressedOut 9 ай бұрын

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

@someman7 4 ай бұрын

30:06 If I'm understanding this correctly, Radix UI is shadcn's dependency. So I guess by saying "there are no dependencies for shadcn" you meant your codebase doesn't depend on a shadcn package. But that's not how that sounds.

@adarshchakraborty955 3 ай бұрын

According to Shadcn documentation, It says we don't need to install shadcn in our project Instead we can generate components so only those components will endup in our code base what it uses behind the scenes is tailwindcss & Radix UI, that too as a dev depedency (we don't need these packages installed on production server) because in the end, tailwindcss only generates a optimized css file. so I believe that's what he means by no dependency. No files related to shadcn in our node_modules folder.

@someman7 3 ай бұрын

@@adarshchakraborty955 I think I understand, but that's confusing the word. Dependencies are a term broader than what's in your folder. You don't reduce dependencies by pasting code in. You just make them harder to maintain. I would understand if one said shadcdn _components_ not having any dependencies if they were generated in a way that they didn't have any (even dev) dependencies. But from what you're writing that doesn't even seem to be the case (which I'm not saying is a bad thing it's just... it's not an independent thing).

@serychristianrenaud 9 ай бұрын

Thank

@jonice4229 9 ай бұрын

this can be added also for nuxt?

@pogboii 3 ай бұрын

can you use this with nextjs but without typescript? (with javascript)

@SaliAalaNabiyak 3 ай бұрын

41:10 i don't think you need to label the layout of the entire application with 'use client' ?? i mean you imported themeprovider which is a client component . you don't have to make whatever component you imported it in a client component also ! somebody explains to me please.

@markkukivinen2824 3 ай бұрын

In 2007, I built an entire dating site, with login, private messaging, public messaging, all from scratch, in php / mysql. The woman I built it for ran it for years. At that point, I changed fields and worked on cars. 17 years later, I'm trying to get up to speed with developing, and I am more than overwhelmed. I can't believe how much has changed. I cannot follow this video even a little bit. I don't understand what all the command line stuff is about, I don;t understand where all the code is getting pulled in from, I don't understand any of the terms. It's pretty crazy. I'm trying to figure out where to start from. It seems that the actual language itself is such a small part of development, and it's much more about the tools. Anyways, just a random observation.

@jesseswensen7163 5 ай бұрын

Is there a way to keep the header visible while scrolling?

@stevereid636 9 ай бұрын

How did you avoid the error you get when exporting metadata in a component (layout) with “use client” in it!?!

@mediacreatif 7 ай бұрын

yes indeed you cannot export metadata with "use client". I just removed the metadata export but I guess it's not the solution. Did you find ?

@groovebird812 9 ай бұрын

Hi, if i don't want to use tailwind can i use shadecn? all the examples depend on tailwind

@codeSTACKr 9 ай бұрын

It does only work with tailwind

@adrianvalpedrosa2747 6 ай бұрын

What font are you using

@niranjanrai3479 9 ай бұрын

Which vscode theme are u using

@codeSTACKr 9 ай бұрын

codeSTACKr theme of course :D

@nordeenhasan6030 3 ай бұрын

I was using this library with vue.js for two month, now I know it's only for react

@RaulReyesOnline 9 ай бұрын

Why creating nav menu when Shadcn provides a "Navigation Menu" component?

@h4nz0hatori87 8 ай бұрын

How to use Navigation-Menu?

@TooCoolForBZ 5 ай бұрын

bruh did you put a low volume background music? I was so confused what is playing that music.

@dubOZ 9 ай бұрын

is there a reason for not ctrl+c in terminal to stop the server?

@lokeshr9794 9 ай бұрын

no reason, its just user prefrence

@markokraljevic1590 9 ай бұрын

which microphone do you use?

@codeSTACKr 9 ай бұрын

Rode NTG-5

@markokraljevic1590 9 ай бұрын

excellent sound

@codeSTACKr 9 ай бұрын

@@markokraljevic1590 thank you!

@aberba 5 ай бұрын

How's shadcn different from what people used boostrap for?

@user-mx1ek4sl2m 5 ай бұрын

The only difference is everything.

@seekheart2023 6 ай бұрын

What font is that operator mono?

@codeSTACKr 6 ай бұрын

Actually my own custom font based on Fira Code. You can check it out in my vs code course 😁

@austincodes 4 ай бұрын

What is your vscode theme?

@crazy_coder 9 ай бұрын

Can we use this in Angular as well?

@IsmailMamaniat 9 ай бұрын

Github repo link missing

@codeSTACKr 9 ай бұрын

Sorry about that. I just added it to the video description and I'll put it here too: github.com/codeSTACKr/shadcn-nextjs

@raphauy 9 ай бұрын

It's not shadcDn, it's shadcn

@initialized 5 ай бұрын

Who cares

@JohnSmith-op7ls 5 ай бұрын

It’s shat

@Mempler 3 ай бұрын

Holy shad

@MerkieAE 3 ай бұрын

😂 no it’s not

@khantsithu4383 10 ай бұрын

it's shadcn btw, not shad cdn

@codeSTACKr 10 ай бұрын

Yep! I say it correctly about 50% of the time 💀💀💀

@morshedulislamriaad6496 10 ай бұрын

Thanks for correcting me also. I always say it cdn☠️☠️

@prodbykaioken 8 ай бұрын

my vs code doesnt find button from components had to do manual import 🖕🏽

@A_cool_prince 8 ай бұрын

Hi Jesse, how do I getva hold of you. I need help with my artwork for nft's

@brunonovais8801 5 ай бұрын

its missing stitches

@chrise202 5 ай бұрын

EVERYONE!

@omerbresinski 9 ай бұрын

Add editor.smoothCaretAnimation: true to your vscode config :D

@stumblianim638 3 ай бұрын

Don't you think ,its wasted time just to make a button, It's very fast and can be done within 10sec to do this button with regular

@zuowang5185 6 ай бұрын

you kept calling it shadCDN but its CN

@stylrart 9 ай бұрын

Missing SvelteKit

@codeSTACKr 9 ай бұрын

Sveltekit isn't officially supported but there is a fork for it. Maybe I'll make I video for it 😁

@Ghost_cloudism 9 ай бұрын

Who came from his reddit

@longbranchgooberdapple2238 8 күн бұрын

vite is not a react framework xD

@everurstruly Ай бұрын

Lacks basic animation

@rickvian 7 ай бұрын

yet another UI component 🤭

@Okatogurui 5 ай бұрын

ShadCDN 🤣

@sreekumarmenon 9 ай бұрын

"yet another UI framework"?

@MsVsmaster 9 ай бұрын

I’m not using, cheers!

@mhb3262 2 ай бұрын

Don't fall for the hype, it's cool but not mature enough (v0.8). No RTL support, lacks many utility tools thta something like MUI offers, more minor problems (example, some of items that are acting like a button, don't have the cursor pointer). Great Library but I'll give it another try a year later.

@Kats0unam1 5 ай бұрын

Im not using it.

@user-nk8eb7ku6c 5 ай бұрын

PrimeReact is better than shadcn

@superakaike 5 ай бұрын

It's just a trend, a stupid one, because you are copying code into your code base which then you are responsible to maintain. It's only good as a start to build your own component library.

@denizselman1995 6 ай бұрын

Dude please stop copying and pasting. This is super distracting for the person who is trying to learn.

@guruware8612 5 ай бұрын

one could pause the video when its too fast - learning dude.

@Mahdi_BenAbdessalem 4 ай бұрын

@@guruware8612 He skipped too many parts

@brandonnorsworthy 5 ай бұрын

looks like a copy of tailwind components

@wasd3108 10 ай бұрын

yes of course, "it's not a UI library" but literally imports radix-ui for like every component and does literally almost nothing different than you importing it yourself other than applying some tailwind on it "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, without the need for a traditional component library." this description of it is just dishonest and a lie I get that it's youtube world and getting clicks with the ongoing popular topic, but lets not lie about it

@motoboy6666 10 ай бұрын

Relax dude, you seem kinda tense

@kevs3654 9 ай бұрын

I think radix-ui is also mention on the on the documentation of ShadCN? Relax boy, you'll aged early and die with that attitude xD

@wasd3108 9 ай бұрын

@@kevs3654 it is written at the start of the introduction how it's built using Radix and that it's not a library. I am not shtting on shadcn, but the fact that the person in this video conveys how it's "revolutionary" than the libraries and how you don't need one. While shadcn literally uses a library for primitives and adds styles and other styling func on top of it. It's simple tailwindcss with global css variables + variant props to expand primitives and create styled components, this is like the most basic styling component someone would write expanding logic components. It's not even the simplest to use, this is the most modifiable approach. Look how easy Radix themes is to use, but try to add your own component to it, it won't work. The fact that you failed to comprehend my comment, thinking that I am shtting on shadcn, just explains your lack of comprehension skills. There's nothing wrong using shadcn, it's simple to copy paste examples/templates and then changing them. Shadcn tells you, "this is how I create styled components on top of radix, I useRef them and add some variants, classNames and use global css vars to align a theme, copy paste my method". It's a dev's ui compnent folder. It's not revolutionary, it's not a replacement for libraries, because it uses one itself. And everyone likes it, cuz everyone likes to copy paste code and change it, rather than think of steps one by one which also take time. next time ask chatgpt to explain it to you, maybe it will give you an angle for you to understand

@nitsugaorom1091 9 ай бұрын

ChatGPT doing its best!

@danxgaming8709 9 ай бұрын

Hes completely right

@ninibupu 5 ай бұрын

I stopped watching after a minute. Can't take a UI video seriously from a guy with such horrible over customised and mismatching VS Code...

@Gaamaa-oz5ef2lf3n 2 ай бұрын

Shame ! You said using Shadcn on Next js, but you use most the hand written css codes to create a simple header. Insult to Shadcn. Quiting this video in the middle !!