Examples

Everything below is running on this page

Switch any example to its Code tab to see the exact markup and script that produced what you are looking at — the preview is built from those strings, so the two cannot drift apart.

A complete screen

Toolbar, a filter list down the side, a grid, and an editor dialog with validation — the shape most internal tools end up in. Around eighty lines, no framework.

Whole screens

The three screens every internal tool starts with — a sign-in, a sign-up, and the dashboard everyone lands on afterwards. Built from the same widgets as everything else on this page.

Data

The grid, in the shapes it is usually needed in — including one with no actions column, where editing and deleting come from the row.

Forms

Labelled inputs, a value/text combobox, a calendar that speaks two eras, a debounced search field, a file drop zone, and one call to read or validate the lot.

Containers and chrome

Panels, tabs, the layout frame, windows, and the message helpers.

Navigation

Menus and a menu bar, a ribbon, a tree — and the whole windowed shell they were built for.

Feedback and layout

Progress, spinners, banners and badges — plus the cards, button groups and grid helpers that hold a screen together.

Making it your own

Repaint it with CSS variables, or add a widget of your own that the markup parser treats exactly like a built-in.

Ready to try it?

One package, nothing else to install.

$npm i kob-ui
Read the docs