The Best UI Components that EVERYONE is Using!

[@codeSTACKr]

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

[@JamesQQuick]

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

[@codeSTACKr]

It’s really amazing!

[@eleah2665]

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

[@Frostbytedigital]

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]

lol what is all that accordingly?

[@morshedulislamriaad6496]

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

[@codeSTACKr]

You're welcome!

[@blackpurple9163]

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

[@markkukivinen2824]

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.

[@k-yo]

Fun fact, you can probably still fire up something similar to your original dating site and still have a viable functioning solution. We are indeed in the age of over-engineering

[@SaliAalaNabiyak]

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.

[@ajaymalviya.7]

I have seen almost all tutorials on youtube with shadcn UI only showing how to setup and start using them, no one shows how to change them to a personal design system, i think that would be the best way of showing shadcn UI by translating a figma design system of maybe a simple dashboard or a simple website. nobody would use shadcn ui with its default style and default css variables in real world projects.

[@CharcoalDaddyBBQ]

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

[@someman7]

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]

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]

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

[@JCboss29]

Thank you so much for this comprehensive tutorial

[@abdulganiparekh6947]

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

[@shukhratmukhammadiev4994]

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

[@husseinkizz]

Long time watching my man, missed your videos!

[@codeSTACKr]

Thank you! Hoping to be more consistent again.

[@husseinkizz]

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

[@otisrancko]

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

[@hanzofuma]

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

[@blackpurple9163]

It looks good doesn't it

[@hanzofuma]

Yuup

[@renoox1153]

You´re the best man!! thx so much

[@hichamabboud9672]

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]

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

[@RaulReyesOnline]

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

[@h4nz0hatori87]

How to use Navigation-Menu?

[@mnchabel8402]

Wow, nice intro to shadcn

[@niranjanrai3479]

Which vscode theme are u using

[@codeSTACKr]

codeSTACKr theme of course :D

[@JoelRdz]

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

[@diegokrause6347]

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.

[@tejasshekar]

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

[@SuperYoda7]

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

[@stevereid636]

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

[@mediacreatif]

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 ?

[@byteolu]

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

[@zaredchiu8260]

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

[@FedoraB0realis735]

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]

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

[@Oroshimisu]

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

[@codeSTACKr]

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

[@pogboii]

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

[@jesseswensen7163]

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

[@JohnSmith-op7ls]

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

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

[@adrianvalpedrosa2747]

What font are you using

[@dubOZ]

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

[@lokeshr9794]

no reason, its just user prefrence

[@seekheart2023]

What font is that operator mono?

[@codeSTACKr]

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

[@aberba]

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

[@ΣτάθηςΣταθόπουλος-σ7ρ]

The only difference is everything.

[@jonice4229]

this can be added also for nuxt?

[@raphauy]

It's not shadcDn, it's shadcn

[@initialized]

Who cares

[@JohnSmith-op7ls]

It’s shat

[@Mempler]

Holy shad

[@MerkieAE]

😂 no it’s not

[@markokraljevic1590]

which microphone do you use?

[@codeSTACKr]

Rode NTG-5

[@markokraljevic1590]

excellent sound

[@codeSTACKr]

@@markokraljevic1590 thank you!

[@khantsithu4383]

it's shadcn btw, not shad cdn

[@codeSTACKr]

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

[@morshedulislamriaad6496]

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

[@TooCoolForBZ]

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

[@groovebird812]

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

[@codeSTACKr]

It does only work with tailwind

[@IsmailMamaniat]

Github repo link missing

[@codeSTACKr]

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

[@nordeenhasan6030]

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

[@austincodes]

What is your vscode theme?

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

[@shamim12314]

Video sound is low. Though thanks for this video

[@prodbykaioken]

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

[@crazy_coder]

Can we use this in Angular as well?

[@brunonovais8801]

its missing stitches

[@zuowang5185]

you kept calling it shadCDN but its CN

[@sanaullahraisofficial]

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

[@A_cool_prince]

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

[@ПавловОлексій]

If only shadcn didn't have tailwind dependency....

[@agosolsgaming4036]

i like building stuff from scratch and i really don't like to use shadcn. Its my personal opinion.

[@brunoripa]

It's not working. I have a css import error: Cannot find module '@/styles/globals.css' imported from '//src/pages/index.astro'

[@stylrart]

Missing SvelteKit

[@codeSTACKr]

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

[@serychristianrenaud]

Thank

[@chrise202]

EVERYONE!

[@candrew34]

Every time I skip through video, it plays an ad...This is too much.

[@pt_trainer9244]

tailwing is so confusing

[@omerbresinski]

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

[@Cloudeditz2]

Who came from his reddit

[@wasd3108]

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]

Relax dude, you seem kinda tense

[@kevs3654]

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]

​@@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]

ChatGPT doing its best!

[@danxgaming8709]

Hes completely right

[@longbranchgooberdapple2238]

vite is not a react framework xD

[@sreekumarmenon]

"yet another UI framework"?

[@Okatogurui]

ShadCDN 🤣

[@everurstruly]

Lacks basic animation

[@MsVsmaster]

I’m not using, cheers!

[@rickvian]

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.

[@ninibupu]

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

[@denizselman1995]

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

[@guruware8612]

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

[@Mahdi_BenAbdessalem]

@@guruware8612 He skipped too many parts

[@Kats0unam1]

Im not using it.

[@MohamedIsmailS-b7z]

PrimeReact is better than shadcn

[@brandonnorsworthy]

looks like a copy of tailwind components

[@Gaamaa-oz5ef2lf3n]

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