Examples

Everything below is running live on this page

Switch any example to its Code tab to see the exact markup and script behind it. The preview is built from that same source, so what you see and what you copy always stay together.

57 components Live previews Exact source
Explore the complete screen

A complete screen

A bar across the top, a menu down the left, a toolbar, a grid, and an editor dialog with validation — the shape most internal tools end up in. Around a hundred 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, that one with the bar, the sidebar and the status line an application actually ships with.

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, steppers, the layout frame, windows, and the message helpers.

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