Examples

Whole pages, not swatches

Three screens of the same imaginary product, each built only from kit classes and tokens. They link to one another, so you can walk the app the way a user would — and every one of them is correct in light and dark, including the third-party table and chart.

Dashboard

The flagship: the app shell, a KPI row with deltas and sparklines, a Chart.js chart through the adapter, and a table — all following one theme.

App shell KPI cards Chart.js Table

Form

A realistic multi-section form: fields, selects, a textarea, checkboxes and radios, inline validation, and a summary alert that names what went wrong.

Fields Validation Alerts Buttons

Data grid

The data-heavy screen: a Tabulator grid through the adapter, with filters, sorting, selection, a column total and pagination — re-themed live, with no redraw.

Tabulator Adapter Badges Toolbar

Try the toggle on any of them

The theme control is in each example's topbar. The Chart.js chart and the Tabulator grid follow it too — that is what the adapters are for. Or set your own accent in the generator and apply it: the examples pick it up like every other page here.

Open the dashboard Read the docs