From buttons to modals — the parts you need to build a screen, each with a live preview and copy-ready code. No libraries, no build step. Every part is cast from a single mold — kata, the Japanese discipline of the form.
Native inputs with a restyled face. Keyboard support and form behavior stay intact.
A value that exists to be copied: install commands, tokens, links. One click, confirmed in place.
Labels, helper text, error states and a search variant. A focus ring wraps the field.
One choice from a visible set. The dot scales in; nothing else moves.
A row of radios wearing one pill. Switching views or modes, cast as a single control.
A native select, dressed in KATA tokens. The platform picker and keyboard support come free.
A range with a filled track and the core in the thumb — the mark shows where your grip is.
A number with minus and plus on either side, cast as one control. Bounds are enforced, not suggested.
A real checkbox underneath, so it works with no JS at all. Teal variant included.
Multi-line input on the same mold as Input: same border, same ring, same heights logic.
Disclosure built on native <details>. Zero JavaScript, keyboard and find-in-page included.
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Small status pills — dots, colors and a solid variant.
Where you are, as a path. The last crumb is the page itself — not a link.
What a screen says when there is nothing in it yet: one icon, one line, one way forward.
Keyboard keys as small cast pieces: a bottom edge, mono type, nothing else.
A measured level with a tick scale — storage, capacity, load. The scale is part of the component.
Page numbers with a clear current page: ink-filled, everything else quiet.
A hairline that divides without decorating. Plain, labelled, and vertical forms.
One number, its name, and which way it moved. Tabular figures, quiet deltas.
The admin staple — a quiet header, hairline rows, and a Badge for status.
The white thumb slides between tabs, and the panel switches with it.
Events on a rail, newest last. The current step carries the core.
A label that appears on hover and focus, in ink black. Pure CSS — no positioning library, no JS.
A message that stays on the page: info, success, warning, danger. Flat, token-tinted, one icon.
Built on the native dialog element — backdrop blur and Esc-to-close come free.
A thin bar that tells the truth: how much is done, in ink or in the one accent.
Loading placeholders with the same geometry as the real content, so the page never jumps.
One ring, one moving edge. Three sizes, tuned to sit inside buttons without shifting the label.
Slides in at the bottom right and fades after a few seconds — for saves and sends.
A single point of light travels the edge of a card. The beam is the core color — the one accent, in motion.
Numbers that count up once, when they arrive on screen — machined, not bouncy.
An endless, even loop. Pauses when you reach for it; fades at both edges.
A soft light that follows the cursor across a card's surface. Nothing moves but the light.
A headline that arrives word by word, each word rising into place. Settles once, then stays.