Introduction

Kanto is a design system for data-dense product interfaces — dashboards, admin tools, forms.

The components are standard custom elements, so they run in React, Vue, Angular, Svelte or plain HTML without a per-framework rewrite. One implementation, one place a fix has to land.

Why custom elements

The alternative — a React port, a Vue port, an Angular library — is three codebases drifting apart.

The trade is real and worth naming: custom elements need JavaScript to upgrade, so during server rendering they hold their place, hidden, until the bundle lands. In return, a component is written once and every consumer gets the same fix at the same time.

Two rules that hold everywhere

Data goes in as properties, not attributes. options, data, columns, items — anything that is not a string or a boolean. An attribute can only ever hold a string.

Events are kt--prefixed CustomEvents, with the payload in detail. They bubble and cross shadow boundaries, so you can listen on a container rather than on every element.

What is in the box

Eighty elements across six groups, a token layer that drives all of them, and a light theme that costs no component-specific CSS.

This site is built with those elements and no framework. If a component breaks, its own documentation breaks with it.