How Shadcn/ui ACTUALLY Works
HTML-код
- Опубликовано: 28 фев 2024
- What a fantastic post. Love how Manupa framed things here. Component libraries are almost as controversial as React, hopefully this helps break down why I like the way shadcn/ui does things :)
POST manupa.dev/blog/anatomy-of-sh...
MANUPA'S TWITTER / manupadev
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏 
Наука
![Code a Zelda Like [Javascript, THREE, Rapier] 01](/img/1.gif)
Thanks for the shoutout Theo. Always a pleasure.
Insightful story about the designers, those guys are heavily under appreciated by us devs
Tjta mostly because they can't build stuff. I find people limit themselves into roles. Devs should learn some design why because your can't design shit people will use. Lol No people people should not have to learn everything but understand enough of what other people do. So your able to respect their work. Design is hard
@9659 Yes it is and any dev worth their salt will understand that and understand the value designers bring
@@jwoods9659 Exactly. I'm tired of people meaning "specialization" as "the sole thing I will do". No, if you want to be productive you need to learn a lot of things from a lots of domains. This doesn't mean being an authority, but at least understanding it good enough you can discuss it with authority.
@@Gornius You gotta remember most developers and designers are nerds. Hince they think a certain way..."mastering" be a "expert". That is the fastest way to be unemployed. You need to have a good working knowledge of skillsets like you said. It takes a lifetime to master this stuff yes. There are people that do, they know everything in it. But that's all they know they are limited to that one thing. And that's fine, but average everyday people.need to be realistic that is not them and most jobs require that you are able to just pick up things and run with it. I say learn how to learn the 20% of working knowledge you need in something and go from that point
It really depends I have worked with designers who knew what they were doing and "designers"
I’m a designer. Bridging gaps ⚡️I love this channel for picking up the dev experience. This breakdown of a ui primitive and style config on top is the way 👍
Oh Theo! Currently in my job in building de UI library for our Design System, basically you just described everything im facing with right now, love it!
that blog was in my reading list for months now, this vid reminded me of it, good stuff + that css frameworks video of yours is the very first video i watched from you. never subscribed that fast before lol
The tangent on design was spot on. I'm a UX UI designer and the worst part of the job is working with devs who are not interested in working with you.
I find myself very frustrated most of the time for the same reason… AND IM A DEV.
@@techjandro yeah grenade tossing designers are also a plague
it goes both ways.
@@sayamqazi so true.
Theo audible for blog posts is nice
shadcn deresrves to be the standard way of building modern UI in no time.
Ooo i didnt realize this was out. Im so glad work uses tailwind and i am def pushing for shadcn.
wow this video has truly incredible value, learned so much here in a single video thanks theo love you
The idea that designers design and coders code (and each broken down in sub-cubicles) and then throw over the fence is quite antiquated. It was the very thing that "Agile teams" tried to address. Great story in any case. Iris seems like a great designer to team up with.
The designer I work with currently is just like Iris. Always takes his time to help me out when I have issues with the css for a specific design.
I would really love to work with someone like him again as I would be leaving the company soon 😔
The whole video is great, but the dev/design tangent was the highlight for me. Thanks for sharing.
Love this blog and video! I hope some piggy backs off this and makes a blog about the shadCn Vue project. Would love to see what they used to replace the react specific libraries. I know that used Vee validate and and a vueZod lib for forms tho.
I learned early in my dev career that designer collaboration is a mandatory consideration. It's so important to be able to interact with an open mind the concerns and technical limitations of design mockups.
I just switched from bootstrap to tailwind and shadcn-svelte since last week. I am not a front end dev, but had done a few sites and apps. Initially the first 2 days was a bit frustrating, but after that it was great. Now after a week I find this way is better. Also great on having everything in your project. I had 2 minor changes on copied code, 1 to expose a type on TS. Another is to use a sub component not used by shadcn-svelte but existed underneath.
I am about to try this with Svelte for my own project as well. I just want a good pattern for frontend stuff to make it as painless as I can so that I can focus on backend.
@@joelazaro461 not painless but seems more straightforward.
I have been using shadcn for my final year project and have been getting a lot of mileage out of it especially since it is a dashboard UI. And the best part is that it is new enough that they thought I designed the UI from the ground up.
Lmao
Datepickers 💀 A couple thousand lines.
forms with multiple datepickers with business rules and validation and 2 way binding ☠
I really like shadcn, but honestly, I've been getting so much mileage out of straight up native html elements with how much the support for them/their apis have improved the past few years, that I probably wouldn't use too many components out of here -- especially given how much custom crap I usually have to end up writing anyway. I'll probably end up sticking to either pure css and/or tailwind for the time being, but I like projects that genuinely get us to re-evaluate how we're doing things. Thanks for the video!
You should use it if u haven’t. Component libraries are garbage.. this one is very different. I thought the same before…
@@toparamennoodles9652 I tried using a date picker from shadcn, the imports were around 100KB uncompressed. How is it different than other libraries in this regard?
@ashundeyan8031 go for HTMX then
That story about designers remember me about something - similar principle can be applied between testing team and SW engineers in general. In many companies those are in their own 'silos', which always makes me mad as hell, being test engineer who feel to be held back not by SWEs, but others within my 'silo'. When I started to bridge those gaps myself, everything went much better, both side. Less gaps = better.
In html css and js one crazy facts is that you actually have control over any pixel of screen at any time
(Except for some browser thinks like alerts or s)
So practically everything is doable.
I love shadcn because it does all these behaviours and a11y things properly. I'm not front-end/UI developer, but had to build a quick and dirty UI to interact with an administrative API that I built, and being able to build a decent UI quickly and accurately for the three people who will eventually use it was invaluable.
As a final year IT student, shadcn helps me procrastinate even longer 😅
SOLID principles mentioned in frontend 😂
Honestly very few devs I've come across who work on the UI have come with these skills and its painful to teach every single time.
you gotta love theo's miniatures
This library of "reusable" components only works with react or is it compatible with any framework like lit?
As a designer, I approve of this message.
This was a great video 👍🏼
I love how much respect you have for every aspect of building products. Except for the poor standards committee on date pickers whom you hate.
Why am I getting a feeling of Deja Vu from this video
Because you read the blog post before, just like me 😂
i'm using it on a project this week and its really nice. but some components are really different from what i'm used to, specially when handling those informations. hey theo you could do a video that combines shadcn and zod for newbies. sometimes i lose a lot of time on those(im a newbie)
Good words about design teams!
"We need this in Vue. I have worked on such a library at my previous job. Of course, it was not that advanced, but it sped up development considerably
It exists for vue as well, though unofficially. Google it and you can find it 👍
There is port of shadcn for vue
WRT overriding a component's styles via className (24:40), you can also reverse the order, for example replace
cn(badgeVariants({ variant }), className)
with:
cn(className, badgeVariants({ variants })
I wonder if there is a list of commonly accepted variance name available ? Some kind of defacto naming. Thanks.
To be 100% fair, bootstrap originally was to be part of your code base and you would customize it, you would just download zip file and drop the contents into codebase back in bootstrap 1.0/2.0/3.0 days, even 5.x is supposed to still be customizable by using SASS and building up your own set of property variables with the base just being good consistent defaults. But a lot don't bother with customizing to that degree.
I'm using Firefox under Linux, but type="date" shows a very useful and working date picker.
Its nice when you can get a dev and a designer who are willing to work together and compromise. In my (very long) experience, it doesnt happen that often...
I believe there are many things to improve, previously when i was working on the project, using new scrollable component in terms of width is was working very nice. But for the height we need to specify the perticular value, other wise it takes full height, and the issue was resizing for responsive ness. Was weird.
Other was the form control was giving the bad usestate error normally we can solve that using use effect, but here i was not sure what to use, as the error was comming from the shadcn/ui form.
And one was the the popover, when we pass a button to the popover the popup trigger stops working after one time- i think we need to pass some ref to root.
And i also noticed sometimes it the variant has the bigger value of style, and you are pass the smaller value while calling the component it doesn't work.
If anyone can help me with form please do, i haven't found the solution yet.
I do my dev work in Firefox and I use native datetime pickers all the time. What’s the issue?
Really great article
4:39 I don't see anything wrong with Firefox's date picker...
I love tailwind-merge and wish it was a first party tailwind solution, but removing it when not needed to be used is sound as that lib is 5kb gzipped and has a runtime cost.
This is called chad ui and you can't convince me otherwise
28:07 This is still simple for forward ref. The hard part is when your component has a generic type and you need a ref prop. React had to make it complicated with forward ref instead of just allowing us to have a regular ref prop that works like any other prop. :D
Couldn’t agree more that it should be easy to build it the accessible way.
Why no one mentions ANT Design tho? This lib is so damn great TBH
The CLI part you said is not true, it’s not ‘since just a few months ago’ I installed them over EIGHT months ago using the CLI.
man I tried using Shadcn and I had so much issues with it, specifically the component. In the end I just disabled shadcn and added tailwind styled components.
The issue was that with the for some reason the defaultValue is not being handled correctly. I had a dropdown for languages, and for native select, option, it worked without issue. With the shadcn select I could not make it work. It always ignores the default values.
Also, i had a list of multiple selectes, which was dynamic I even added a useMemo however the cause so much performance issues that it was unusable in the end.
Maybe I suck, but maybe shadcn needs a bit more overhaul to be used on more "serious" usecases.
Select is different in radix vs a normal select.
When you use shadcn it just installs a couple dependencies and creates files. When you think of it like another developer in your project created those files it gets a lot more powerful.
I have a strong feeling I ran into the same issue last night that you had(the defaultValue issue). My approach was to treat it like a component some developer wrote for me and looked at the file. Figured out it was just radix, looked at the radix docs and solved it pretty quickly after that.
It's not an issue with shadcn, it's an issue with radix, and it's really not an issue because radix covers it in their docs.
As for the second issue you mentioned, I think you might have been pushing radix outside of its expected use case. You used a hammer as a wrench.
Instead of expecting every component to cover every possible use case(just like you'd not expect that of a developer on your team to do) you'd modify the existing component, or add a new component to that folder.
You have to shift your thought process a bit.
It would take no extra time to have implemented the new select component you made as a new shadcn component. You would have gotten all the benefits shadcn offers on top of it.
I don't mean to suggest that you(or anyone) needs to use shadcn. It's just it seems like the issues you had were not caused by shadcn itself and were caused by treating shadcn like it's a normal component library.
@@user-sf8du I get you, but if I need to debug every component I use I kinda just write my own using tailwind, which in the end I did, took me less time then to figure out what was the problem.
I think shadcn does a good job at making unstyled components but by then not being installed via a package means they can be out of date and could in theory introduce major technical debt if your not careful. Someone at my work had those exact issue where cmdk the lib behind the command component changed and this broke the component. Which wouldn't have happened as easily with a properly maintained headless UI lib
I will watch the video but before that I just want to said that.
I'm not a React developer and I'm bored of the Web but there is one thing I can tell is the approach of chadcn/ui is great and I really glad of the "copy and paste" approach.
I think it's better to give to the developer the power of edit the library than just impose all the constraint of the library. Personally I try to create my own "Framework" in Golang but I found myself just editing for each project the core part of my architecture to just follow my hearth.
That why tools like "chadcn/ui" are a great inspiration for me cause they show me I can just create a simple CLI who will generate the base component of my "Framework" and if I want to add for example the module React Email, I can just type "my_cli add emails" and tada I copy paste my emails module than I can edit to my will ^^
"Unlike bootsrap or MUI, with shad ui you have the code in your codebase, it's yours".
How is that true if you still have to install radix-ui, tanstack-table, react-date-picker, etc. You are still limited by how much customization the underlying packages allow.
Kind of, but worst case scenario you can still replace them.
Bootstrap and MUI aren’t un-styled primitives.
Must be nice to work with a designer like that, who puts ego aside for the success of their team.
Theo, am i to understanding your point with ref's are like pointers in C/C++, you and point to hell and then go there ;)
Nope. An entirely different concept. A ref in react is an object that is a reference to the underlying DOM object for a given React component.
@@manupadev refs in React are not only to reference DOM Elements, it can be any value.
@@Laura69 Yes Indeed. I should have made the context more clear. I'm specifically talking about element refs.
Is everyone fine with that just one select component for example takes 100kb minified?
I believe Theo misspoke when he said Firefox in regards of DatePicker. In my experience Firefox implements the HTML5 DatePicker to spec. Safari on the other hand flat out refuses to do so.
I had to implement it for an internal tool at Twitch in 2018 specifically because Chrome supported it but Firefox didn't if I recall correctly
if you don't want to allow to override certain styles you should put them last in cn call like this cn("can be overridden", className, "can't be overridden")
A youtube comment is not a good place to do a deep dive conversation in web development. But I do take issue with your story about the card and popover. There is nothing not doable about the design you were given. Maybe it's because I've been a web developer/engineer since there weren't libraries or consoles. My take is you just manually create the thing you want where you want it in those instances. (Which is essentially what popper does, but if you don't have influence to utilize a library like that I guess i understand why you'd have the designer re work their design) 100% agree on your statement about chain of understanding User to Designer to Engineer.
I wish I could work with a designer in our team. I am designing everything for our admin site and as much I enjoy doing it besides coding it can take up a big chunk of my time.
Wouldn't surprise me if shadcn simply becomes standard coding practice moving forward.
Nice
I'm waiting for someone to create gigashad, then i'll use it.
how about Park UI ?
I watch youtube as I prefer it over reading blog posts. Now I find myself more often watching someone reading a blog post. Not sure what is going on. I look forward to start reading blog posts again that is reacting to youtube videos reacting to blogposts.
Bro's literally out there reading blog posts jfc
Generational shift represents my early career days 😂
If you know you know
Did he just uploaded a old video?
Still haven't seen any suggestion on how to manage updates/fixes once you've took a cut. You're basically screwed.
npm packages suffer from this for the most part too though
@@Charles-Darwin they are different though, if you pick a badly maintained project then you didn't research. But if it is maintained well and you have a pipeline setup with some level of testing along with mend (or other tool to spot out of date packages), integrating changes as they evolve in the package is more bitesize. You still have potential breaking changes to deal with but at least you are aware of them.
The same way you do with your own custom components. The code is yours.
sorry to break at to you but she didn't change how you look at designers, you did realized how you can achive that, while frustrating designer
as designer as dev i'll say one thing, before starting argue with a designer, know that 99,9% of what you're going say is not about limitation but skill issue
@@IlhanNegis It's about balancing the cost (time) of their design decisions with the value of those decisions.
@@alexkaminsky210 that is by definition is not dev's job
@@IlhanNegis you're probably right in plenty of situations but it's also not uncommon for devs to explain those tradeoffs to the stakeholders. It's part of product engineering.
so basically code gen nice.... 😏
Is shadcn codegen?
change my mind but browsers and tools should be smart enough nowadays to function without aria stuff..
Leave it to JavaScript devs to install 5 npm packages just to enable styling in their project. So tired of this ecosystem and its ceaseless tide of hype and framework-hopping.
Honestly, I don't get the appeal of copy and paste of components. Yes you can modify the code, neat. But I'd rather the components be easy to style and customize, and to have them part of package manager so you get updates and bug fixes as the the components evolve, like they should.
It's laughable that the person who released this video ruclips.net/video/EtYtYnhxeNc/видео.html
says that he's an accessibility advocate... :/
shadcn/ui does indeed present an interesting (and probably an essential) concept; only, they didn't do it right (for everyone). they used tailwind (and the thousands of classes that come with it) when they should have just used plain old css (or at least sass): you say you provide control, you shouldn't opionionate your "control" with a dependency. tailwind is fine if you're prototyping. but for production systems, i prefer clean separation (which tailwind doesn't do with inlining too many classes) between components and styles (using a stylesheet that doesn't mix and match responsibility; that's what css was made for in the first place). I would adopt shadcn/ui when they use css (or scss or at least css-in-js), but as it stands now, it's not for me.
You could always just fix this in a couple hours for the components you do want, and ignore the rest.
Disagree. This is a bad take.
Primeiro ?
most hyped? by who? youtubers?
İts kinda ridiculous how you have to make your components in front end instead of relaying on html elements, i dont understand why native html elements are so hard to modify and why they look garbage.
I absolutely hate tailwind, almost as much as I hate reading html. I need meaningful names of components to be able to understand them. To have to break down what some element *is* by *how* it's styled not *what* it's called is just insane and unnecessary cognitive load. I'm not against the utility of it, but they should just roll up some mixins that can be used inside s/css. It's just bootstrap remade a little more flexible.
U haven’t wrote tailwind for more than 10 minutes if you actually think it’s anything like bootstrap. This is one of the worst takes I’ve ever seen. Congratulations 👌🏼