Generally, when using these components I ended up wanting to customize a lot. I switched around the options, coloring, the words in the loading, I mix and matched the components from different CLIs, etc.
I think these are more useful as baselines than as final destinations, and I expect production users to customize them far more than options in components.
I also separately don't really believe in traditional components anymore, code is cheap. The value in these components is that I took the time to pixel match a bunch of the CLIs, not the specific interface used to integrate them.
Think MUI, heroUI, traditional components have you install their package, import the component and configure it through arguments.
ShadCN components have you copy the component code into your codebase, you own it. They come with the ability to configure arguments, but also because the code is yours its expected that you change the internal logic/styling/structure of the component.
I believe in the era of AI code the ladder just makes more sense.
If you are using shadCN as building blocks for a centralized component library I think it makes more sense, but personally I don’t think the component registry pattern scales well across multiple teams/UIs. ShadCN and tailwind really encourage design drift.
I think shadCN has its place for sure but I’d always advocate for Mantine and css modules anywhere early enough to use premade UI solutions.
> ShadCN components have you copy the component code into your codebase, you own it
That’s a common misconception/myth/lie that doesn’t seem to want to go away even though Shadcn is more honest about it these days.
You don’t own the compenents, and you don’t copy the component code into your codebase. The components are Base UI (and previously Radix)
And they’re imported like any other.
What you’re copying is a thin styling wrapper, just the same as you can use to restyle “traditional” components.
The difference is that you have to provide all the styles, rather than just overrides, which can be both a blessing and a curse.
I think this is a misinterpretation. BaseUI provides baseline semantics that because the code is in your codebase you can choose to keep or remove. BaseUI is also actively unstyled/unopinionated, you use it to compose your own components, which again live in your codebase.
When you import shadcn components you can rebuild them however you want, thats the point.
I'm a big believer in guides. ShadCN provides great starting points for continued engineering as do other ShadCN libraries. For companies with the resources to, they do just start with BaseUI.
In the long run I think most UI will be BaseUI/RadixUI + Component and style guides, prompts, and traditional packages will no longer be relevant.
That seems a bit of non-argument. You can choose to keep or remove any components from your codebase, styled or unstyled, composable or monolithic.
What Shadcn gives you is a layer of abstraction that separates the underlying (imported) components from the code that consumes them, so you change your button in one place. It’s exactly how better frontend teams consume just about any component library, Base UI or otherwise.
Shadcn really is a bit of a nothing burger, or rather it’s a bit of soggy lettuce between the meat and the bun.
I fully expected this to be complements for the output you get from those tools for some reason, that AI generated look. No idea why anyone would want that though.
On a barely-related note, I'm getting a little tired of job openings at startups that emphatically require Shadcn and Tailwind for dedicated frontend development. Shadcn and Tailwind are crutches for "fullstack" devs -- if I'm a really accomplished frontend developer, they make little sense for me to use and hamper what I can do for you. Just a peeve.
Can you show me some examples that are hard to implement in Tailwind? I've been using Tailwind for an app with a somewhat complex UI for the past ~2 years, and it works great most of the time. Sometimes it doesn't, but then I write some CSS. Tailwind doesn't stop me from doing so.
Tailwind removes the C and the S, leaving only the S in CSS. (In long form, CSS is supposed to encourage modularity and a separation of concerns, concepts totally abandoned in the world of per-element styles.)
What inspired you to make this?
gonna use it on my websites homepage
Why did you choose to use shadcn registry?
Generally, when using these components I ended up wanting to customize a lot. I switched around the options, coloring, the words in the loading, I mix and matched the components from different CLIs, etc.
I think these are more useful as baselines than as final destinations, and I expect production users to customize them far more than options in components.
I also separately don't really believe in traditional components anymore, code is cheap. The value in these components is that I took the time to pixel match a bunch of the CLIs, not the specific interface used to integrate them.
What are traditional components? How are untraditional better?
Think MUI, heroUI, traditional components have you install their package, import the component and configure it through arguments.
ShadCN components have you copy the component code into your codebase, you own it. They come with the ability to configure arguments, but also because the code is yours its expected that you change the internal logic/styling/structure of the component.
I believe in the era of AI code the ladder just makes more sense.
If you are using shadCN as building blocks for a centralized component library I think it makes more sense, but personally I don’t think the component registry pattern scales well across multiple teams/UIs. ShadCN and tailwind really encourage design drift.
I think shadCN has its place for sure but I’d always advocate for Mantine and css modules anywhere early enough to use premade UI solutions.
> ShadCN components have you copy the component code into your codebase, you own it
That’s a common misconception/myth/lie that doesn’t seem to want to go away even though Shadcn is more honest about it these days.
You don’t own the compenents, and you don’t copy the component code into your codebase. The components are Base UI (and previously Radix) And they’re imported like any other.
What you’re copying is a thin styling wrapper, just the same as you can use to restyle “traditional” components.
The difference is that you have to provide all the styles, rather than just overrides, which can be both a blessing and a curse.
I think this is a misinterpretation. BaseUI provides baseline semantics that because the code is in your codebase you can choose to keep or remove. BaseUI is also actively unstyled/unopinionated, you use it to compose your own components, which again live in your codebase.
When you import shadcn components you can rebuild them however you want, thats the point.
> When you import shadcn components you can rebuild them however you want, thats the point.
Why not use BaseUI directly?
I'm a big believer in guides. ShadCN provides great starting points for continued engineering as do other ShadCN libraries. For companies with the resources to, they do just start with BaseUI.
In the long run I think most UI will be BaseUI/RadixUI + Component and style guides, prompts, and traditional packages will no longer be relevant.
I mean, you are using BaseUI directly... The components on top live in your code base.
i agree, very pro that
That seems a bit of non-argument. You can choose to keep or remove any components from your codebase, styled or unstyled, composable or monolithic.
What Shadcn gives you is a layer of abstraction that separates the underlying (imported) components from the code that consumes them, so you change your button in one place. It’s exactly how better frontend teams consume just about any component library, Base UI or otherwise.
Shadcn really is a bit of a nothing burger, or rather it’s a bit of soggy lettuce between the meat and the bun.
I love this!
I fully expected this to be complements for the output you get from those tools for some reason, that AI generated look. No idea why anyone would want that though.
On a barely-related note, I'm getting a little tired of job openings at startups that emphatically require Shadcn and Tailwind for dedicated frontend development. Shadcn and Tailwind are crutches for "fullstack" devs -- if I'm a really accomplished frontend developer, they make little sense for me to use and hamper what I can do for you. Just a peeve.
I don’t know about Shadcn, but how does Tailaind hampers your ability to do anything?
Some developers are CSS experts.
Can you show me some examples that are hard to implement in Tailwind? I've been using Tailwind for an app with a somewhat complex UI for the past ~2 years, and it works great most of the time. Sometimes it doesn't, but then I write some CSS. Tailwind doesn't stop me from doing so.
Tailwind removes the C and the S, leaving only the S in CSS. (In long form, CSS is supposed to encourage modularity and a separation of concerns, concepts totally abandoned in the world of per-element styles.)
Tailwind is the worst form of CSS, except for all the others.