Skip to content

Components

Around 40 thin classes in 10 categories, all consuming tokens.

Everything here is rendered live with the current tokens — yours, if you've made a system on the design page. Each category below is its own page.

6 components

Actions

Buttons and your own variants, button group, input group, close button, icon button.

7 components

Forms

Fields, form validation, switch, file input, range, color & date inputs, color picker.

11 components

Surfaces & data

Cards, surface effects, panel, calendar, list group, accordion, tables, stat, divider, empty state, timeline.

6 components

Feedback

Badges, alerts, banner, toast, spinner, skeleton.

3 components

Overlays

Dropdown, tooltip, drawer.

6 components

Identity & media

Hero, avatar, avatar group, media object, icons, gallery.

9 features

Motion & interactions

Entry animations, stagger, lift, scroll progress, scroll reveal, animated disclosure, auto-grow fields, overlay choreography, view transitions.

2 topics

Extending

Extending keel — the grammar, and what's missing.

8 components

Application

Toolbar, tool, tree, property rows, canvas & artboard, selection, status bar, app shell.

Looking for full page patterns assembled from these instead? See sections. To write components of your own in the same grammar, start at extending.