These New Components Blew My Mind

[@Brunoenribeiro]

I'm a front-end developer and while I'm also hyped about this, it pains me to know it's 2024 and we are still get excited for **another** implementation of a carousel.

[@27sosite73]

LLM will replace us soon D: and this will be finally over

[@andybrice2711]

It is a rather absurd state-of-affairs. Like we're doing all the somersaults to build software in languages which were actually designed for page layout. Simply because browsers were the only platform which offered an open, cross-platform way to execute code and render graphics, without a complex and brittle install process.

[@CottidaeSEA]

​@@andybrice2711It sure beats development for mobile. Needing to have a Mac just to build for iOS is shit. Then there's the problem of keeping things updated on all platforms. Some people are also awful at updating software.

[@dinoabdurahmanovic]

And then you find out that those carousels are unusable in real-world projects. I am always going back to custom swiper or slick implementations.

[@andybrice2711]

@@CottidaeSEA Yeah. This is a large part of why we're in this absurd situation. No-one's found a good method of having multiple, versioned software stacks installed in parallel, without massive duplication or conflicts. And proprietary OSes want to deliberately lock down those libraries, frameworks and dev tools. So now we've ended up with the kludgey solutions of Electron Apps and Docker containers, where every app has to contain the entire stack (and maybe even its own small OS).

[@artrix909]

petition for him to make a more in depth video on shadcn 👇👇

[@RootsMj]

Yes please! Shadcn is awesome and worth a whole video.

[@ammarhalees6370]

OMG yes!!🙌

[@zocky3282]

Yessss 👌

[@manupadev]

@tommycallsubackBut how that has been done is masterclass on pro front-end development.

[@kizigamer6895]

Yes

[@dudetru25]

4:04 yeah that made me burst out laughing, that reaction was everything haha, Great Video! Looking forward to checking it out!

[@jackmonaco4503]

It cracks me up that I've seen folks say Shadcn's components are deprecated and outdated. Good work is happening, and it's amazing stuff.

[@OnFireByte]

shadcn is like 1-year-old project with very active contribution, these devs are out of their mind to say that it's deprecated.

[@spl420]

That's some next-level instant legacy

[@dealloc]

People who conflate Stitches (same team behind Radix) with shadcn (a totally different maintainer and contributors)

[@MerthanMerter]

no one says that rly

[@jackmonaco4503]

@@MerthanMerter Just reddit tbh

[@aybmab2]

lol the orgasmic response to the toasts opening... I get it lmao

[@carpye]

I really love the Emil Kowalski's components implemented in shadcn!

[@viatrixhd]

I had this on my radar for some time now, i am really hyped because I will use it in an upcoming project, which doesn't need special branding or design but cares only about the usability (for now atleast). I think this is really a great fit

[@claudiogferraz]

Be happy, web devs, we lived to see the new Bootstrap.

[@rajikkali]

Would love more Shadcn stuff. After looking at it, I instantly moved over from DaisyUI

[@amaechinaikechukwu8266]

Material UI still holds strong

[@nyashachiroro2531]

One of the most seamless libraries I have ever used. There is just no friction. It just works. Add a component. Use it. That's it. I was so surprised honestly.

[@PhilipAlexanderHassialis]

Shadcn is excellent. I would love to have my future projects move there, if only it wasn't missing some crucial stuff our customers expect to have, like e.g. rich grids (like, very, very, VERY rich grids), more stuff for forms than the current offering etc. But design wise, mwah, chef's kiss.

[@ardianhotii]

I agree , I am very excited about what it offers right now and I love it but I want more updates like these to add more new components more examples of current components as you said for grids and form especially for form like complex form and real life example usage

[@dealloc]

I mean for those cases, you'd likely want to use something like AgGrid anyway, which is also very customizable. With Shadcn (and Radix, whose most of the components are based on) you can pick and choose; the point is that they provide sane accessibility out of the box.

[@PhilipAlexanderHassialis]

@dealloc at the moment, most of our projects that need that deep thick client UI (primarily intranet apps so TTFI or latency are non issues) are using PrimeReact which gives us a lot.of the stuff we want in a neat package. But seeing what shadcn does, well, leaves me excited for the future!

[@bakersentamu4725]

I used MUI before and Iam in love with shadcn already. What I love about it so far is that I can customize and style components easily unlike in MUI.

[@neociber24]

That toast was increible, waiting for a Sidebar

[@JEM_GG]

Incredible updates, glad to see the CLI fixes as well!

[@lauracamellini7999]

The typescript stuff is gonna make this very popular among the right people

[@walidcherhane4111]

Is it just me, or do others also find the Shadcn/UI project to be highly overrated? I personally see it as a project that relies heavily on reused content from others, with only minimal enhancements in styles.

[@HashimWarren]

4:07 orgasmic reaction in 3, 2, 1... 😂

[@_4ertilo]

This “blyat” moment in mod actions section at 2:30 has just made my day 😂

[@ngmehdi]

I think that you never heard about Primeface UI, I've been using these components for years with 0 dependencies from Praceface UI and even standardized for React, Vue and Angular

[@KenanTim]

I looked preface Ui I am just shocked that and kinda disappointed this kind of tools libraries etc most people even never heard about it and eventually they not appreciate what they did so far. I used DevExpress libraries for enterprise solutions at work. And finding this kind of open source libraries gives me hope that there is a gold things under the hood. ( Sorry if i give a headache thanks :) )

[@AtomicPixels]

That toast. That’s the benefit of designer dev that becomes discovered by shad

[@Sorkstryparen]

I like ShadUi, but I would say NextUI (They also created Tailwind-Variants) does this.. but better. Would like a video where you test and compar them both

[@muslim8622]

It's NextUI is ui library, ShadUi is not.They are absolutely not the same thing With ShadUI we own all the code from a component, enabling us a total customization with no limit

[@M1a2n3o43]

Tailwind has even released some of their Catalyst components a few days ago.

[@DioArsya]

I’m always asking to myself, how is shadcn/ui compared to react aria components. I’ve learned a lot from react aria about composability etc of a component from them even before shadcn/ui exist, but none of youtubers are deep-dive the react aria and always excited about shadcn/ui. I do love both because both of them are very cool & inspiring. What is your take on this, Theo?

[@FrankyDeMeyer]

What do you mean with “it’s just code copied to your project, no dependencies”. When I installed it, it overwrote most of my tailwind.config and installed 4 npm packages. Most new components are also wrappers for other libraries, so that’s extra dependencies. Also, if you’ve changed the component code in your project, and shadCN comes with updates for it, you then merge them somehow? I mean, I’d love to use it but after each hype I give them a try, I wind up removing it all again 😅

[@PanosPitsi]

Make a wrapper for the components if you want to customize them

[@dealloc]

1) Yes this sucks, but is a one-time thing. Fortunately a tailwind config isn't the worst thing to override; also git is your friend :) 2) The point is what those components provide out of the box. The component libraries (like Radix) provides customizable components with sane accessibility features. You'd likely want to install them anyway in those cases. 3) Your component code is yours. While you could use the experimental diff command from shadcn CLI, again git is your best bet to include changes, as any other merge request. You can do a git add -p to partially add changes you need interactively; then commit chose changes and discard the rest you don't need. 4) You can also do as @user-fr2fm3ri3w says, and wrap your components around shadcn. Though, that defeats the point of using shadcn in the first place, and you could just use Radix components directly instead. Why is this better than an npm package? Because an npm package would require you to opt-in to a specific version, and your only way to prevent breaking changes, if any, would be to use patch-package, or copy paste the code anyway and end up with a worse upgrade path.

[@nanonkay5669]

I genuinely don't understand the excitement about Shadcn when there is Mantine.

[@anonymoussloth6687]

Is your mosiac fork mentioned at 3:03 open source?

[@mustafazakiassagaf1757]

your video have really nice color. i love it

[@m___pryor]

Such an unreal UI package

[@theDanielJLewis]

I'm most excited about the pagination component! I was previously using a component that met my needs well, but Next.js 13.5 breaks it, so I've had to stay on Next.js 13.4.x-I haven't even dared try 14!

[@GligothGaming]

Would love to see a more in depth video on shadcn, with some examples etc.

[@Whattaburger6969-yo3gd]

Taking over the industry? I've never seen or heard it mentioned outside Tech Influencers lmao

[@Muescha]

is your fork of the mosaik public avaiable?

[@mariospittas9331]

Please more Shadcn videos!

[@elvispalace]

you're always hyped

[@randyrips]

Can you use Shadcn without a framework like React or NextJS? I just want to use it with raw HTML, JS, and Tailwind CSS.

[@mcodesthings]

I'm so excited for another tailwind powered framework. Tailwind is for babies.

[@Noritoshi-r8m]

Is there something non vercel/apple you like

[@wouterdeen]

Dedicated video about shadcn would be awesome!

[@Nosleepguy]

Drawer made my mind blowing

[@mohitraj5615]

Vertical navigation is missing. Like the one from NuxtUI.

[@animalfarm8560]

His hair is golden

[@Antebios]

Let me know when it's ready for SolidJS!!

[@itsmu1x]

dude what's ur browser/extension?

[@FzsHotDogInDonut]

what is that browser???

[@pyakz2906]

Shadcdn removes scrollsbars when you open dialogs or dropdowns

[@minimumt3n204]

This is infuriating. I can't seem to find a fix to it

[@ChristopherCricketWallace]

BEHOLD: The wheel (reinvented)

[@RocketLR]

You should do tutorials and "lets build" a webpage using this library.

[@untalentedwebdev]

i fucking love shadcn

[@pilearn1266]

Please give us recommendations for drag and drop in react ,

[@rredington305]

I've built a ton of apps with MUI. After switching to Tailwind & ShadCN, I realized how lazy I got and, over time, lost my CSS skills using MUI.

[@ArielBenichou]

i'm interested in a dedicated video about shadcn/ui

[@HyuLilium]

Shad china?

[@prepperdon]

Love shadcn-ui !!

[@dracula5752]

i am vue dev and man it looks so good i may tried it

[@michaelhildebrand-faust4039]

I want to hear more about why you're so hyped on shad.

[@ak-loz]

At 0:33, what is this you're using?

[@siliconfire]

The browser? Arc.

[@dimitriosbarkas3699]

please do a more in depth video about shadcn/ui

[@KristianTheDesigner]

Could anyone please direct me to the video Theo is talking about that is about the coolest project he built. I assume it is about the modview (!?) and i REALLY want/need to see that because i have been trying for the longest time to achieve something like that (not at the same scale obviously, but still..hehe). I kinda got it , but not really. Did something a bit similar in vanilla js tho where i could click the elements and the clicked element grew and the other ones followed the sizing , but yeah..ANYWAYS..video link anyone? :) And yes, please do a justification video of your love for shadcn. I think it is really nice as well, but would love to hear your in depth view on it and how you use it.

[@Elliott_Ives]

Shad said “it’s shadding time” then shadded all over the bad guys

[@betakors]

what browser are you using?

[@pencilcheck]

I'm indifferent about it, it sounds like a good news but I'm not sure if I will actually take advantage of it.

[@mohitmohlia8420]

which browser is he using?

[@tylersmith8082]

do a whole break down on shad UI. you should also do one for SheetJS. i think a lot more people need to learn about SheetJS.

[@mosescosme8629]

Do a dedicated video. I want to hear more.

[@vikingthedude]

Chad CDN

[@AliAbbas-mb7px]

For me, I really want to see the video why everyone should use shadcn.

[@SandraWantsCoke]

When I installed shadcn, it overwrote everything inside my globals.css and tailwind.config.ts. So, be careful.

[@joestrkr]

Shadcn is great but it desperately needs a proper combobox component.

[@jaroslavhuss7813]

I mean... U guys never heard of DaisyUI? Oh cmon...

[@gearboxworks]

I wish this was available for HMTX, AlpineJS, and DaisyUI. 🤷‍♂️

[@imarichildress6297]

Do it!

[@aeronwolfe7072]

honestly, shadcn is so good, i feel bad for the other component libraries.... ;)

[@27sosite73]

mui? :D

[@nickolaki]

@@27sosite73 Is trash

[@vicnguyen9312]

@@27sosite73ye, mui is trash. Very different to maintain, horible experience for me

[@Lucas-hr1mj]

gigachadcn

[@grant_vine]

Having more than one Toast option is confusing imo, the Sonner one is awesome but then deprecate the other etc their implementations are basically identical

[@dealloc]

I agree, though I assume this is done for backwards compatibility. Maybe it will be deprecated later, and then replaced. Who knows.

[@ben97864]

Can someone who really knows their stuff on the current open-source options for unstyled complex components that behave in intuitive, pleasing and accessible ways - please provide a comparison of Radix Primitives vs HeadlessUI?

[@dealloc]

Personally I find Radix more ergonomic to work with. I have never had to resort to HeadlessUI, but you can use either or, they are not mutually exclusive (except you can't mix primitives from one and the other)

[@browny99]

I still don‘t get it These are react components, and while for react that might be nice, you can‘t use them with a different framework That’s what I like about Tailwind UI and even Bootstrap, you can get react components, but you can also just copy some html + classes and be fine in any project I would love to be able to use shadcn because the components feel and look so refined, but for most of my professional projects, I simply can‘t convert the whole project to react just to use a nicer toast notification

[@quintencabo]

Theo is a react guru. His youtube personality basically asumes everyone is using react and everyone who is not is kinda second tier. He literally said the main reason to use vue was because it was translated in many languages languages. Yeah yeah he walked it back but still. So you dont get it because Theo is a react evangelist and thus assumes you are already using react. But if you keep that in mind then his content is usually pretty good

[@dealloc]

Or maybe, just maybe the library was built for React users and Theo's main audience uses React and it just so happens to have a wider demographic in the real world? I don't know, maybe I'm the crazy one here.

[@harsh07may]

There is a shadcn port for svelte and Vue if you're interested.

[@quintencabo]

@@harsh07may that's actually sounds nice

[@cheeky1699]

shad is a chad

[@kodekorp2064]

If I could use shad on react native then that’ll be dope, but I’ll stick to PandaCSS for now.

[@nikitaistomin3588]

shadcn video!!🖐🖐

[@rusliabdulgani9920]

it almost perfect, but there is still terrible components, it is a date picker... yes, when you try it, it so weird that we cannot change indepedently the years and month, so when we want to choose let's say year 1970, it should be back one month by one month, so it make bad UX... think they need fix it as soon as possible, make the date picker look like material ui or ant design, that already mature..

[@ableandrew]

why with detail and compare against others , like that adobe release but others

[@Александр-ч4п5ъ]

2:57 "blyat" added as permitted term :\

[@realitydesigners]

Chadcn

[@notangelmario]

shad

[@jscul]

Hate to be a hater, but this component library is a TERRIBLE developer experience. Turns out, running the init in a project that already exists? Yeah, that'll delete/mutate files with NO ability to undo. Make sure you commit your changes before fucking around with this library because holy shit, I was not expecting it to completely wipe my index.css file.

[@vbounyar]

Fml, I could've used that pagination instead of making my own from scratch at work 🤣

[@Unc3]

I shad myself

[@gro967]

Only for people who are not capable of simple CSS/Tailwind xD

[@garretmh]

So wait does shadcn depend on me using tailwind? That’s a bit of a dealbreaker

[@zksumon847]

👍

[@TheBuddilla]

I love shadcn but sadly I refuse to use react unless the project requires it. I'm not going to install react just so I can use shadcn.

[@itscooldawgdonteventrip]

No point imho to build something already built

[@fredpallesen]

would love to hear about shadcn vs styleX

[@sergenorin]

I'm sorry but I have to say this... shadcn-vue has done better job for resizable component, you can resize it on the intersection too. sad to see it's not like that on shadcn-ui itself

[@antidegenerates7449]

Overhyped shit promoted by Vercel and fanbois

[@frankcooke576]

Hard to sift through the sales in this channel at times. Take all this shit with a grain of salt.

[@gadgetboyplaysmc]

4:05 lmao

[@pokefreak2112]

> shadui

[@wlockuz4467]

I don't understand shadcn/ui, if they want people to build on top of their library then why not go fully headless.

[@victormustin2547]

the embla carousel is not as smooth and snappy as swiper.js tho, so I don’t think i’ll be switching to it

[@MerthanMerter]

my sonner doesn't animate! not even in shadcn website