6 ms·

Brainless: Shadcn components that look like Claude Code, Codex and Grok

128 points by benswerd 2mo ago

Exoristos 2mo ago
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.
- foxygen 2mo ago
  I don’t know about Shadcn, but how does Tailaind hampers your ability to do anything?
  - Exoristos 2mo ago
    Some developers are CSS experts.
    - foxygen 2mo ago
      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.
      - whatshisface 2mo ago
        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.)
        Yiin 2mo ago
        Tailwind is the worst form of CSS, except for all the others.
      - Exoristos 2mo ago
        You're kind of missing the point. I'll probably bungle this analogy, but why is it important to a furniture startup that a master carpenter can put together Ikea?
        deleted 2mo ago
        [deleted]
        teknofobi 2mo ago
        Because you’ll be a force multiplier making the IKEA builders have nicer materials and surface finishes, instead of making really nice furniture pieces that get thrown away on every redesign. Same reason to want a .NET backend dev that plays well with others, instead of a lisp dev with a perfect reimplementation of their own web framework, but going across stacks or teams requires onboarding on the tech instead of just the domain
- benswerd 2mo ago
  With respect to CSS expertise, I don't need/want perfect CSS at my company, I want styling that is clear and workable. Tailwind and ShadCN gets me there, my most backend-y backend engineer gets tailwind. The job of CSS on my team is not to be beautiful or top 1%, its to function.
- maxcb 2mo ago
  I suppose not everyone is a really accomplished frontend developer, though. Better to stick to accessible solutions like Shadcn and Tailwind, rather than have a project stagnate should the accomplished frontend developer leave. Maybe AI adds a layer of protection here, but either way most companies esp. startups, don't need CSS masters, they need people who can build solutions.
dprkh 2mo ago
Why did you choose to use shadcn registry?
- benswerd 2mo ago
  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.
  - tipiirai 2mo ago
    What are traditional components? How are untraditional better?
    - benswerd 2mo ago
      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.
      - crab_galaxy 2mo ago
        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.
sim04ful 2mo ago
I love this!
_345 2mo ago
What inspired you to make this?
- benswerd 2mo ago
  gonna use it on my websites homepage
techpression 2mo ago
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.

128 points by benswerd 2mo ago

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.

foxygen 2mo ago
I don’t know about Shadcn, but how does Tailaind hampers your ability to do anything?
- Exoristos 2mo ago
  Some developers are CSS experts.
  - foxygen 2mo ago
    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.
    - whatshisface 2mo ago
      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.)
      - Yiin 2mo ago
        Tailwind is the worst form of CSS, except for all the others.
    - Exoristos 2mo ago
      You're kind of missing the point. I'll probably bungle this analogy, but why is it important to a furniture startup that a master carpenter can put together Ikea?
      - deleted 2mo ago
        [deleted]
      - teknofobi 2mo ago
        Because you’ll be a force multiplier making the IKEA builders have nicer materials and surface finishes, instead of making really nice furniture pieces that get thrown away on every redesign. Same reason to want a .NET backend dev that plays well with others, instead of a lisp dev with a perfect reimplementation of their own web framework, but going across stacks or teams requires onboarding on the tech instead of just the domain
benswerd 2mo ago
With respect to CSS expertise, I don't need/want perfect CSS at my company, I want styling that is clear and workable. Tailwind and ShadCN gets me there, my most backend-y backend engineer gets tailwind. The job of CSS on my team is not to be beautiful or top 1%, its to function.
maxcb 2mo ago
I suppose not everyone is a really accomplished frontend developer, though. Better to stick to accessible solutions like Shadcn and Tailwind, rather than have a project stagnate should the accomplished frontend developer leave. Maybe AI adds a layer of protection here, but either way most companies esp. startups, don't need CSS masters, they need people who can build solutions.

dprkh 2mo ago

Why did you choose to use shadcn registry?

benswerd 2mo ago
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.
- tipiirai 2mo ago
  What are traditional components? How are untraditional better?
  - benswerd 2mo ago
    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.
    - crab_galaxy 2mo ago
      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.

sim04ful 2mo ago

I love this!

_345 2mo ago

What inspired you to make this?

benswerd 2mo ago
gonna use it on my websites homepage

techpression 2mo ago

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.