The Best UI Components that EVERYONE is Using!

Подписаться 295 тыс.

Просмотров 128 тыс.

50% 1

🦸 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

Опубликовано:

1 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 120

@codeSTACKr 9 месяцев назад

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

@cookiemonster208 7 месяцев назад

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 7 месяцев назад

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 9 месяцев назад

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 3 месяца назад

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

@JCboss29 5 месяцев назад

Thank you so much for this comprehensive tutorial

@morshedulislamriaad6496 9 месяцев назад

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

@codeSTACKr 9 месяцев назад

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

@otisrancko 9 месяцев назад

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

@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!

@abdulganiparekh6947 9 месяцев назад

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

@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!

@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?

@shukhratmukhammadiev4994 5 месяцев назад

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

@byteolu 7 месяцев назад

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

@mnchabel8402 6 месяцев назад

Wow, nice intro to shadcn

@hanzofuma 9 месяцев назад

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

@blackpurple9163 9 месяцев назад

It looks good doesn't it

@hanzofuma 9 месяцев назад

Yuup

@JoelRdz 8 месяцев назад

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.

@FedoraB0realis735 8 месяцев назад

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 8 месяцев назад

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

@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

@tejasshekar 5 месяцев назад

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

@zaredchiu8260 6 месяцев назад

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

@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).

@justinphilpott 6 месяцев назад

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?

@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.

@jonice4229 9 месяцев назад

this can be added also for nuxt?

@mediacreatif 6 месяцев назад

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.

@SaliAalaNabiyak 2 месяца назад

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.

@jesseswensen7163 4 месяца назад

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

@serychristianrenaud 9 месяцев назад

Thank

@shamim12314 9 месяцев назад

Video sound is low. Though thanks for this video

@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.

@adrianvalpedrosa2747 5 месяцев назад

What font are you using

@HAD3Sofficial 2 месяца назад

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

@JohnSmith-op7ls 4 месяца назад

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

@RaulReyesOnline 9 месяцев назад

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

@h4nz0hatori87 7 месяцев назад

How to use Navigation-Menu?

@stevereid636 9 месяцев назад

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

@mediacreatif 6 месяцев назад

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

@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

@raphauy 8 месяцев назад

It's not shadcDn, it's shadcn

@initialized 4 месяца назад

Who cares

@JohnSmith-op7ls 4 месяца назад

It’s shat

@Mempler 2 месяца назад

Holy shad

@MerkieAE 2 месяца назад

😂 no it’s not

@niranjanrai3479 9 месяцев назад

Which vscode theme are u using

@codeSTACKr 8 месяцев назад

codeSTACKr theme of course :D

@TooCoolForBZ 4 месяца назад

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

@nordeenhasan6030 3 месяца назад

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

@markokraljevic1590 9 месяцев назад

which microphone do you use?

@codeSTACKr 8 месяцев назад

Rode NTG-5

@markokraljevic1590 8 месяцев назад

excellent sound

@codeSTACKr 8 месяцев назад

@@markokraljevic1590 thank you!

@dubOZ 9 месяцев назад

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

@lokeshr9794 8 месяцев назад

no reason, its just user prefrence

@aberba 4 месяца назад

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

@user-mx1ek4sl2m 4 месяца назад

The only difference is everything.

@seekheart2023 5 месяцев назад

What font is that operator mono?

@codeSTACKr 5 месяцев назад

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

@crazy_coder 9 месяцев назад

Can we use this in Angular as well?

@khantsithu4383 9 месяцев назад

it's shadcn btw, not shad cdn

@codeSTACKr 9 месяцев назад

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

@morshedulislamriaad6496 9 месяцев назад

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

@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

@austincodes 4 месяца назад

What is your vscode theme?

@chrise202 4 месяца назад

EVERYONE!

@zuowang5185 6 месяцев назад

you kept calling it shadCDN but its CN

@stumblianim638 2 месяца назад

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

@brunonovais8801 4 месяца назад

its missing stitches

@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

@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

@Okatogurui 4 месяца назад

ShadCDN 🤣

@sreekumarmenon 9 месяцев назад

"yet another UI framework"?

@MsVsmaster 9 месяцев назад

I’m not using, cheers!

@rickvian 6 месяцев назад

yet another UI component 🤭

@mhb3262 Месяц назад

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.

@everurstruly 26 дней назад

Lacks basic animation

@user-nk8eb7ku6c 4 месяца назад

PrimeReact is better than shadcn

@omerbresinski 8 месяцев назад

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

@Kats0unam1 4 месяца назад

Im not using it.

@superakaike 4 месяца назад

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 5 месяцев назад

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

@wasd3108 9 месяцев назад

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 9 месяцев назад

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 8 месяцев назад

Hes completely right

@brandonnorsworthy 4 месяца назад

looks like a copy of tailwind components

@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 !!