Subscribe
Sign in
I've now worked with both @shadcn/ui components (various projects) and @Chakra UI components (app with chakra)
tl;dr: shadcn is what I would personally use going forward.
why:
1. (very biased) I fundamentally like the tailwind philosophy and while you can use tailwind with chakra as well, I find with shadcn it's first class.
2. (pretty biased) If you every plan to onboard someone to your project they will probably have a higher familiarity with shad components because they are "closer to the metal"
for example the popover component:
shad```
<PopoverContent className="w-80">
<div className="grid gap-4">
<div className="space-y-2">
<h4 className="font-medium leading-none">Dimensions</h4>
<p className="text-sm text-muted-foreground">
Set the dimensions for the layer.
</p>
</div>
<div className="grid gap-2">
<div className="grid grid-cols-3 items-center gap-4">
...
chakra```
<Portal>
<Popover.Positioner>
<Popover.Content>
<Popover.Arrow />
<Popover.Body>
This is a popover with the same width as the trigger button
</Popover.Body>
3. (seems objective) as far as i can tell genAI works substantially better with shadcn. V2->V3 in chakra seems to have introduced a ton of breaking changes. here are things you should expect:
space={2} -> lint error, prop now called `spaceX` or `spaceY`
isOpen={shouldShowThingState} -> lint error, prop now called `open` (most bools have be renamed to drop `is`)
AI messes these up constantly on autocomplete, even with incessent pestering about v3.
4. (seems objective) some things in chakra are "shad style": run a command to dump code into your project that you use for the components. others still come from the package.
where does Select.Root actually import from? the package or your project? this is more overhead for someone onboarding to the project
5. (seems objective) the charts module is very very slick in Shad (even though my finance uses chakra, I used the chad charts: charts example ), afaict there is no chakra analog. probably a deal breaker if you want plug and play charting.
As one positive for chakra, there are more prebuilt components. This does help with some velocity when you are just spinning up a project.
I'd be curious what other peoples experience is. Especially curious if you've used another component library.
shoutout to @shadcn for giving so much leverage to developers!
