b2b web product · 2026 · design & typescript, solo · typescript, react, tanstack table
the product's ui library: 30 component families, designed in figma and written in typescript by one person.
the company was starting a new web product and needed one set of components for all of it, from buttons to the data grid.
a five-figure license was planned for the data grid. on the customer portal, a commercial suite decides which parts i can touch, and a licensed grid would have brought the same kind of rules for sorting, keyboard and density. so i built ours on tanstack table, which is headless and mit licensed.
i added everything the commercial grid offered, split across two components: data-table, which is read-only, and data-sheet, which reads and writes. they were the hardest part of the library, and they took a month.
tab moves, enter selects, escape returns, the same way in every component. each one follows aria patterns and contrast rules and was tested with a screen reader.
the accountants who use the product want as much on screen as possible, and not every screen is theirs. so every component works at two densities, compact for more rows and standard for more room, in light and dark.
the docs live in a playground app that runs the real components: every variant with its usage, and code that can be copied straight from there.
the product's screens are built from the library today, and the grid alone runs in 79 places.
interface components brought together through a shared visual language.
focus, error, loading, and confirmation states in form components.
moving with tab, selecting with enter, and returning with escape.
the same components shown in light and dark themes at different densities.
normal, error, and processing states for a form field.
list rows being revealed and rearranged.
names withheld. all data is fictional.