kbui

The problem

Say you select a few projects and click Archive. If the request fails, you should be able to try again without finding and selecting those projects all over again. I put that behaviour in kbui’s shared table. Each app decides what archiving means and makes the request. The table keeps the selection on failure and clears only the rows you submitted when it succeeds.

How it works

I keep shared values like button colours, spacing and text sizes in one file. These named settings are called design tokens.

The styles are plain CSS. An app can use them with React or supply the same markup itself.

The React components pair those styles with native controls and Base UI for behaviour like keyboard navigation and focus management.

How it stays consistent

I test the table with a request that fails and one that succeeds. The tests check that a second click while the request is running can’t send it twice, a failure keeps your selection, and a success clears only the rows you sent.

See it running

Every component has a page you can open: a live example you can click through its states, the code behind whichever state you picked, and the full list of its properties underneath. The planner on the front page is built the same way, out of the same parts.

Who uses it

Three things run on it today: this site, Bezl’s task screen, and the component site that documents it. Each release goes out as packages on npm, so a project can pin the exact version it was built against and upgrade when it suits.

What comes next

The library now covers most of what an ordinary app asks for, so the next stretch is less about adding components and more about the rules that hold them together: one shared way to lay a page out, and documentation that can’t fall behind the code. Further out, I’d like to describe a screen in plain English and have kbui check it against its own design rules. That last part doesn’t exist yet.