Installation — Kanto

npm install kanto-ds

Import the system

import 'kanto-ds'; import 'kanto-ds/styles.css';

That registers every element and loads the token layer. Then use them as markup:

<kt-button variant="primary" icon="plus">New entity</kt-button>

No build step

One stylesheet and one script, from a CDN — a prototype, a static page, a CMS template:

The script is every element in one minified file, Lit included — about 85 kB gzipped. @1 follows the latest 1.x release; pin an exact version in production. The library's functions are its exports:

Import one element

Applications that use a handful should import those instead, so the bundler can drop the rest:

import 'kanto-ds/components/core/kt-button'; import 'kanto-ds/styles.css';

Narrower styles

styles.css is the webfonts, the tokens and a small set of page-level element styles. To keep Kanto out of your global CSS, take the tokens alone:

import 'kanto-ds/tokens/index.css';

Icons

<kt-icon> resolves Lucide icons by name at render time, which means the set cannot be tree-shaken. Kanto ships the icons its own elements draw, and the few a first screen reaches for — plus, pencil, settings, download, upload, external-link, filter, ellipsis, refresh-cw. Register whatever else you use, once:

import { Rocket, Wallet } from 'lucide'; import { registerIcons } from 'kanto-ds/icons'; registerIcons({ Rocket, Wallet });

Theme

Dark is the default and needs no setup. Light is one attribute away: