When you build a component library, you spend your time on the hard, impressive ones. Then you count what your own product screens actually reach for, and you get a bit humbled.
I build HextaUI, an open source library of 65 components for shadcn/ui, with paid blocks on top. In October I counted what the 55 Pro blocks import, from the source.
One caveat first. These are my own blocks, so this tells you how I build, and nothing about what other people use. I'd love to know that too.
Waiting and explaining are everywhere
Button came first, at 95%, which surprises nobody. The list below it is the interesting part.
A few things stood out.
Spinner is in more blocks than Dialog. So is Kbd, the tiny keyboard hint, which I'd have guessed was a nice-to-have. It's in 36% of blocks, and Dialog is in 27%.
The parts that handle things going slowly or being empty add up. Spinner, Empty and Skeleton are in 42%, 31% and 29%. If you think of states as something to add at the end, these numbers say otherwise. They're some of the most common pieces of UI I have.
Collapsible is doing a surprising amount of work. It's in 42%. I think that's what happens when you try to show a lot in a small space without opening a new layer on top of everything.
What never got used
The 55 blocks use 56 of the 65 components. These 9 are never imported directly.
- Aspect ratio
- Carousel
- Data table
- Item
- Menubar
- Navigation menu
- Pagination
- Scroll area
- Video player
I'm not deleting them. Blocks are app UI, so a Carousel missing here doesn't mean much. People building a landing page will want one.
Data table is the more interesting gap, because it's the kind of component you put at the top of a features list. My Orders Table block is built from simpler pieces instead. That says something about big, do-everything components, at least for how I build.
How much is in one screen
The median block imports 10 different components, and the range is huge.
Order Detail needs 23. If you only look at it as a page, that sounds like a lot of stuff. But an order really does have that many things going on. The complexity is in the problem, and the components only make it visible.
What I'm taking from this
It makes me want to spend more time on boring components. A Spinner in nearly half of my blocks deserves as much care as a Video player in none of them.
It's a good exercise if you have a design system. Count the imports. It takes an afternoon, and it replaces a lot of opinions about what matters with a list you can look at.
The full table is on the HextaUI site if you want the rest.