I open-sourced a UI kit — then went looking for everything I got wrong about it
There's no shortage of React UI kits on npm. Search for one right now, and you'll get hundreds of results, most with the same seven button variants and a Storybook someone abandoned halfway through. So when I open-sourced brightframe — pulled out of a real coworking site I built, LAN — I didn't really want to write the usual "here's our 70 components, look how many there are" post. Component count isn't interesting. Anyone can list props and screenshot a button in five colors. What actually took time, and what I think is worth writing about, is the part that happens after the README makes a claim. "Tree-shakeable." "Server Components-safe." "Accessible." Those are three words I typed pretty confidently early on, and then, more recently, I sat down and tried to prove myself wrong on each one. This post is what that turned up. "Tree-shakeable per component" — okay, but how much, actually? Every component ships as its own entry point: import " brightframe/tokens.css " ; import " brightframe/Btn.css " ; import { Btn } from " brightframe/Btn " ; Saying "unused components add nothing to your bundle" costs nothing. I added size-limit to CI so the claim has to keep being true, not just have been true once when I wrote the sentence: Entry Minified + brotli Whole kit ( import { ... } from "brightframe" , JS) 40.13 kB Whole kit ( brightframe/style.css ) 11.83 kB One component ( brightframe/Btn , JS) 641 B One component's styles ( brightframe/Btn.css ) 890 B 641 bytes vs. 40 kilobytes. That gap is the whole reason the per-component entry points exist, and now if a refactor accidentally makes Btn drag in half the kit, the build just fails instead of me finding out from a bundle-size complaint six months later. "Server Components-safe" — this one had an actual bug in it RSC has no hook dispatcher at all. A component needs "use client" if it does one of two things in its own source: calls a hook, or wires up a DOM event handler in its own JSX. I wrote a little script ( scripts/che