These New Components Blew My Mind

  Рет қаралды 84,867

Theo - t3․gg

Theo - t3․gg

Күн бұрын

Wow, Shadcn/ui keeps getting better. Did not expect to love these so much. Open source is cool, love seeing projects like Tailwind and Radix built on top of in this way
Link to changes: ui.shadcn.com/docs/changelog
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

Пікірлер: 180
@artrix909
@artrix909 5 ай бұрын
petition for him to make a more in depth video on shadcn 👇👇
@RootsMj
@RootsMj 5 ай бұрын
Yes please! Shadcn is awesome and worth a whole video.
@ammarhalees6370
@ammarhalees6370 5 ай бұрын
OMG yes!!🙌
@zocky3282
@zocky3282 5 ай бұрын
Yessss 👌
@manupadev
@manupadev 5 ай бұрын
@@tommycallsubackBut how that has been done is masterclass on pro front-end development.
@kizigamer6895
@kizigamer6895 5 ай бұрын
Yes
@Brunoenribeiro
@Brunoenribeiro 5 ай бұрын
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
@27sosite73 5 ай бұрын
LLM will replace us soon D: and this will be finally over
@andybrice2711
@andybrice2711 5 ай бұрын
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
@CottidaeSEA 5 ай бұрын
​@@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
@dinoabdurahmanovic 5 ай бұрын
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
@andybrice2711 5 ай бұрын
@@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).
@carpye2774
@carpye2774 5 ай бұрын
I really love the Emil Kowalski's components implemented in shadcn!
@aybmab2
@aybmab2 5 ай бұрын
lol the orgasmic response to the toasts opening... I get it lmao
@jackmonaco4503
@jackmonaco4503 5 ай бұрын
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
@OnFireByte 5 ай бұрын
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
@spl420 5 ай бұрын
That's some next-level instant legacy
@dealloc
@dealloc 5 ай бұрын
People who conflate Stitches (same team behind Radix) with shadcn (a totally different maintainer and contributors)
@MerthanMerter
@MerthanMerter 5 ай бұрын
no one says that rly
@jackmonaco4503
@jackmonaco4503 5 ай бұрын
@@MerthanMerter Just reddit tbh
@dudetru255
@dudetru255 5 ай бұрын
4:04 yeah that made me burst out laughing, that reaction was everything haha, Great Video! Looking forward to checking it out!
@viatrixhd
@viatrixhd 5 ай бұрын
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
@rajikkali2381
@rajikkali2381 5 ай бұрын
Would love more Shadcn stuff. After looking at it, I instantly moved over from DaisyUI
@randyrips
@randyrips 5 ай бұрын
Can you use Shadcn without a framework like React or NextJS? I just want to use it with raw HTML, JS, and Tailwind CSS.
@bakersentamu4725
@bakersentamu4725 5 ай бұрын
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.
@PhilipAlexanderHassialis
@PhilipAlexanderHassialis 5 ай бұрын
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
@ardianhotii 5 ай бұрын
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
@dealloc 5 ай бұрын
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
@PhilipAlexanderHassialis 5 ай бұрын
@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!
@theDanielJLewis
@theDanielJLewis 5 ай бұрын
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!
@elvispalace
@elvispalace 5 ай бұрын
you're always hyped
@prepperdon
@prepperdon 5 ай бұрын
Love shadcn-ui !!
@neociber24
@neociber24 5 ай бұрын
That toast was increible, waiting for a Sidebar
@JEM_GG
@JEM_GG 5 ай бұрын
Incredible updates, glad to see the CLI fixes as well!
@lauracamellini7999
@lauracamellini7999 5 ай бұрын
The typescript stuff is gonna make this very popular among the right people
@mustafazakiassagaf1757
@mustafazakiassagaf1757 5 ай бұрын
your video have really nice color. i love it
@DioArsya
@DioArsya 5 ай бұрын
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
@FrankyDeMeyer 5 ай бұрын
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 😅
@user-fr2fm3ri3w
@user-fr2fm3ri3w 5 ай бұрын
Make a wrapper for the components if you want to customize them
@dealloc
@dealloc 5 ай бұрын
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.
@m___pryor
@m___pryor 5 ай бұрын
Such an unreal UI package
@anonymoussloth6687
@anonymoussloth6687 2 ай бұрын
Is your mosiac fork mentioned at 3:03 open source?
@betakors
@betakors 5 ай бұрын
what browser are you using?
@nyashachiroro2531
@nyashachiroro2531 3 ай бұрын
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.
@Sorkstryparen
@Sorkstryparen 5 ай бұрын
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
@JEsterCW
@JEsterCW 5 ай бұрын
NextUI is top1 ui lib for now, it just needs more components to be unbeatable, theres few components that have really tought api if you have really specific needs, but what I love about NextUI is that its open to customization, it gives some similiar vibes what MUI does with their own approach.
@muslim8622
@muslim8622 5 ай бұрын
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
@maskedvillainai
@maskedvillainai 2 ай бұрын
That toast. That’s the benefit of designer dev that becomes discovered by shad
@Woeden
@Woeden 5 ай бұрын
Is there something non vercel/apple you like
@GligothGaming
@GligothGaming 5 ай бұрын
Would love to see a more in depth video on shadcn, with some examples etc.
@Nosleepguy
@Nosleepguy 5 ай бұрын
Drawer made my mind blowing
@wouterdeen
@wouterdeen 5 ай бұрын
Dedicated video about shadcn would be awesome!
@M1a2n3o43
@M1a2n3o43 5 ай бұрын
Tailwind has even released some of their Catalyst components a few days ago.
@Poohbify
@Poohbify 5 ай бұрын
At 0:33, what is this you're using?
@pilearn1266
@pilearn1266 5 ай бұрын
Please give us recommendations for drag and drop in react ,
@itsmu1x
@itsmu1x 5 ай бұрын
dude what's ur browser/extension?
@amaechinaikechukwu8266
@amaechinaikechukwu8266 5 ай бұрын
Material UI still holds strong
@ngmehdi
@ngmehdi 5 ай бұрын
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
@KenanTim 5 ай бұрын
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 :) )
@JEsterCW
@JEsterCW 5 ай бұрын
I love prime, but it doesn't works with Remix for the moment, so I'm sticking with NextUI for the PoC process.
@mariospittas9331
@mariospittas9331 Ай бұрын
Please more Shadcn videos!
@RocketLR
@RocketLR 5 ай бұрын
You should do tutorials and "lets build" a webpage using this library.
@_4ertilo
@_4ertilo 5 ай бұрын
This “blyat” moment in mod actions section at 2:30 has just made my day 😂
@Muescha
@Muescha 5 ай бұрын
is your fork of the mosaik public avaiable?
@mohitmohlia8420
@mohitmohlia8420 5 ай бұрын
which browser is he using?
@Whattaburger6969-yo3gd
@Whattaburger6969-yo3gd 5 ай бұрын
Taking over the industry? I've never seen or heard it mentioned outside Tech Influencers lmao
@pencilcheck
@pencilcheck 5 ай бұрын
I'm indifferent about it, it sounds like a good news but I'm not sure if I will actually take advantage of it.
@untalentedwebdev
@untalentedwebdev 5 ай бұрын
i fucking love shadcn
@FzsHotDogInDonut
@FzsHotDogInDonut 5 ай бұрын
what is that browser???
@vikingthedude
@vikingthedude 5 ай бұрын
Chad CDN
@HashimWarren
@HashimWarren 5 ай бұрын
4:07 orgasmic reaction in 3, 2, 1... 😂
@dracula5752
@dracula5752 5 ай бұрын
i am vue dev and man it looks so good i may tried it
@michaelhildebrand-faust4039
@michaelhildebrand-faust4039 5 ай бұрын
I want to hear more about why you're so hyped on shad.
@tylersmith8082
@tylersmith8082 5 ай бұрын
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.
@imarichildress6297
@imarichildress6297 4 ай бұрын
Do it!
@KristianTheDesigner
@KristianTheDesigner 5 ай бұрын
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.
@FranFiori94
@FranFiori94 5 ай бұрын
This is only source code: *installs radix components*
@mohitraj5615
@mohitraj5615 3 ай бұрын
Vertical navigation is missing. Like the one from NuxtUI.
@kodekorp2064
@kodekorp2064 5 ай бұрын
If I could use shad on react native then that’ll be dope, but I’ll stick to PandaCSS for now.
@nikitaistomin3588
@nikitaistomin3588 5 ай бұрын
shadcn video!!🖐🖐
@mcodesthings
@mcodesthings 5 ай бұрын
I'm so excited for another tailwind powered framework. Tailwind is for babies.
@ArielBenichou
@ArielBenichou 5 ай бұрын
i'm interested in a dedicated video about shadcn/ui
@zksumon847
@zksumon847 5 ай бұрын
👍
@ableandrew
@ableandrew 5 ай бұрын
why with detail and compare against others , like that adobe release but others
@walidcherhane4111
@walidcherhane4111 5 ай бұрын
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.
@JEsterCW
@JEsterCW 5 ай бұрын
rel, fax
@mosescosme8629
@mosescosme8629 5 ай бұрын
Do a dedicated video. I want to hear more.
@dimitriosbarkas3699
@dimitriosbarkas3699 5 ай бұрын
please do a more in depth video about shadcn/ui
@cheeky1699
@cheeky1699 5 ай бұрын
shad is a chad
@Lucas-hr1mj
@Lucas-hr1mj 5 ай бұрын
gigachadcn
@SandraWantsCoke
@SandraWantsCoke 5 ай бұрын
When I installed shadcn, it overwrote everything inside my globals.css and tailwind.config.ts. So, be careful.
@gearboxworks
@gearboxworks 26 күн бұрын
I wish this was available for HMTX, AlpineJS, and DaisyUI. 🤷‍♂️
@nanonkay5669
@nanonkay5669 5 ай бұрын
I genuinely don't understand the excitement about Shadcn when there is Mantine.
@JEsterCW
@JEsterCW 5 ай бұрын
I love mantine for the hooks, but the ui lib is really tought to work with, so primereact with nextui are still 10x better, but mantine is lovely project overall just bad decisions were made and thats why its not as much popular as it should be.
@ChristopherCricketWallace
@ChristopherCricketWallace 5 ай бұрын
BEHOLD: The wheel (reinvented)
@pyakz2906
@pyakz2906 5 ай бұрын
Shadcdn removes scrollsbars when you open dialogs or dropdowns
@minimumt3n204
@minimumt3n204 3 ай бұрын
This is infuriating. I can't seem to find a fix to it
@realitydesigners
@realitydesigners 5 ай бұрын
Chadcn
@aeronwolfe7072
@aeronwolfe7072 5 ай бұрын
honestly, shadcn is so good, i feel bad for the other component libraries.... ;)
@27sosite73
@27sosite73 5 ай бұрын
mui? :D
@nickolaki
@nickolaki 5 ай бұрын
@@27sosite73 Is trash
@vicnguyen9312
@vicnguyen9312 5 ай бұрын
@@27sosite73ye, mui is trash. Very different to maintain, horible experience for me
@vbounyar
@vbounyar 5 ай бұрын
Fml, I could've used that pagination instead of making my own from scratch at work 🤣
@grant_vine
@grant_vine 5 ай бұрын
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
@dealloc 5 ай бұрын
I agree, though I assume this is done for backwards compatibility. Maybe it will be deprecated later, and then replaced. Who knows.
@HyuLilium
@HyuLilium 5 ай бұрын
Shad china?
@AliAbbas-mb7px
@AliAbbas-mb7px Ай бұрын
For me, I really want to see the video why everyone should use shadcn.
@notangelmario
@notangelmario 5 ай бұрын
shad
@ben97864
@ben97864 5 ай бұрын
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
@dealloc 5 ай бұрын
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)
@Elliott_Ives
@Elliott_Ives 5 ай бұрын
Shad said “it’s shadding time” then shadded all over the bad guys
@Unc3
@Unc3 5 ай бұрын
I shad myself
@joestrkr
@joestrkr 5 ай бұрын
Shadcn is great but it desperately needs a proper combobox component.
@fredpallesen
@fredpallesen 5 ай бұрын
would love to hear about shadcn vs styleX
@user-lq7xz1th4x
@user-lq7xz1th4x 4 ай бұрын
2:57 "blyat" added as permitted term :\
@browny99
@browny99 5 ай бұрын
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
@quintencabo 5 ай бұрын
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
@dealloc 5 ай бұрын
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
@harsh07may 5 ай бұрын
There is a shadcn port for svelte and Vue if you're interested.
@quintencabo
@quintencabo 5 ай бұрын
@@harsh07may that's actually sounds nice
@gro967
@gro967 5 ай бұрын
Only for people who are not capable of simple CSS/Tailwind xD
@jaroslavhuss7813
@jaroslavhuss7813 5 ай бұрын
I mean... U guys never heard of DaisyUI? Oh cmon...
@rusliabdulgani9920
@rusliabdulgani9920 5 ай бұрын
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..
@victormustin2547
@victormustin2547 5 ай бұрын
the embla carousel is not as smooth and snappy as swiper.js tho, so I don’t think i’ll be switching to it
@TheBuddilla
@TheBuddilla 5 ай бұрын
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.
@gadgetboyplaysmc
@gadgetboyplaysmc 5 ай бұрын
4:05 lmao
@TheBlackManMythLegend
@TheBlackManMythLegend 5 ай бұрын
No point imho to build something already built
@sergenorin
@sergenorin 21 күн бұрын
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
@garretmh
@garretmh 5 ай бұрын
So wait does shadcn depend on me using tailwind? That’s a bit of a dealbreaker
@glebtsoy4139
@glebtsoy4139 5 ай бұрын
Great, another React UI library, cause we dont have enough of them...
@pokefreak2112
@pokefreak2112 5 ай бұрын
> shadui
@wlockuz4467
@wlockuz4467 5 ай бұрын
I don't understand shadcn/ui, if they want people to build on top of their library then why not go fully headless.
@lpon9757
@lpon9757 5 ай бұрын
To all the haters, it would make YT a better place if you explained your point of vue and why you think it's not that good from your experience, instead of this is sh*t or useless. It's virtually impossible to know who/what you can trust these days on the web to get information when you're not an expert, please share
@MerthanMerter
@MerthanMerter 5 ай бұрын
my sonner doesn't animate! not even in shadcn website
@__mac
@__mac 5 ай бұрын
Why not use Mantine instead, they are 30 years ahead of the game when it comes to components & offer custom hooks that sync seamlessly
@antidegenerates7449
@antidegenerates7449 5 ай бұрын
Overhyped shit promoted by Vercel and fanbois
@frankcooke576
@frankcooke576 5 ай бұрын
Hard to sift through the sales in this channel at times. Take all this shit with a grain of salt.
@27sosite73
@27sosite73 5 ай бұрын
4:50 your browser does not render in 120 FPS
UI Libraries Are Dying, Here's Why
13:28
Theo - t3․gg
Рет қаралды 264 М.
React Query Is (Still) Essential - My Favorite React Library
11:04
Theo - t3․gg
Рет қаралды 140 М.
ONE MORE SUBSCRIBER FOR 6 MILLION!
00:38
Horror Skunx
Рет қаралды 14 МЛН
Would you like a delicious big mooncake? #shorts#Mooncake #China #Chinesefood
00:30
Cool Tools I’ve Been Using Lately
23:11
Theo - t3․gg
Рет қаралды 115 М.
I Waited 3 Years For This Router. It STILL Blew My Mind.
21:30
Theo - t3․gg
Рет қаралды 95 М.
My Favorite State Manager Is...URLs?
6:29
Theo - t3․gg
Рет қаралды 68 М.
I WISH I Knew These Tailwind Tips Earlier
9:15
Theo - t3․gg
Рет қаралды 166 М.
This UI component library is mind-blowing
8:23
Beyond Fireship
Рет қаралды 561 М.
Microsoft Regrets Using React (For Edge)
14:28
Theo - t3․gg
Рет қаралды 69 М.
Contributing to Open Source Can Change Your Life - Here’s How to Do It
3:18
Learn Fast Make Things
Рет қаралды 1,1 МЛН
React Wasn't Built For The Web
12:43
Theo - t3․gg
Рет қаралды 177 М.
125 Million Effected Accounts By FireBase Configuration
10:53
ThePrimeTime
Рет қаралды 102 М.
Pratik Cat6 kablo soyma
0:15
Elektrik-Elektronik
Рет қаралды 8 МЛН
Не обзор DJI Osmo Pocket 3 Creator Combo
1:00
superfirsthero
Рет қаралды 1,3 МЛН
iPhone 15 Pro vs Samsung s24🤣 #shorts
0:10
Tech Tonics
Рет қаралды 10 МЛН
Индуктивность и дроссель.
1:00
Hi Dev! – Электроника
Рет қаралды 1,6 МЛН