NV-08Navigation
Scroll Index
A section rail for long pages, with a tick per heading that you can hover, click or drag to scrub, built with React.
no extra packages
Kokonut UIKokonut UINV-08Navigation
A section rail for long pages, with a tick per heading that you can hover, click or drag to scrub, built with React.
Field notes · 8 min read
A component library is a promise: that the next screen will be faster to build than the last, and that it will feel like the same product. These notes cover what we learned keeping that promise for two years.
Most of it is about saying no. Every prop is a decision someone else has to make, and every variant is a screen that drifts.
Three rules settled most arguments before they started. Write them down early, and point to them often.
Ship the smallest component that solves the problem in front of you. A button with four sizes is easier to live with than one with nine, and nobody has ever asked for the fifth.
Animation explains where something came from and where it went. Anything else is decoration, and decoration ages quickly. Keep interface motion under 300 ms and let people interrupt it.
Tokens are the vocabulary. Color, type, spacing and radius live in one place, so a rebrand is a pull request rather than a quarter.
Name colors by job, not by hue. A surface, a border and a muted label survive a palette change; a gray-150 never does.
Two families and five sizes cover nearly everything. Line height is part of the size, never a separate choice.
Build from the inside out: primitives first, then the pieces that compose them. A dialog is a portal, a focus trap and a surface before it is ever a confirmation box.
Keep the API close to the platform. If it behaves like a button, it is a button element, with every attribute a button takes.
Keyboard first. If a component can't be used without a mouse, it is not finished. Test with a screen reader before review, not after launch, and treat reduced motion as a real setting.
Release small and often. A changelog people actually read is worth more than a migration guide nobody finds.
Every release gets a short note: what changed, why, and what to do about it, in that order.
Theming per product, a token pipeline that feeds design and code from the same file, and fewer components, not more.
Thanks for reading. Drag the rail on the right to move through these notes, or hover it to see where each section starts.
