UI

A growing set of UI components built on ElementsKit primitives. Drop them in as custom elements or use them through the JSX runtime.

Foundations

Styles Shared design tokens and utility classes.

Figma design system Live mirror of the tokens, components, and showcases on styles' page.

Alert Inline informational box — three variants, three sizes, color theming.

Badge Inline status pill — four variants, three sizes, color theming.

Button Headless button styled by the optional theme layer — six variants, four sizes.

Card Block-level container with surface, border, and optional elevation.

Checkbox Headless checkbox styled by the optional theme layer — two variants, three sizes.

Code Inline code span — four variants, nine sizes, color theming.

Kbd Keyboard key chip — nine sizes.

Link Accent-colored anchor with configurable underline behavior and focus ring.

Progress Native styled as a determinate or indeterminate bar — two variants, three sizes.

Radio Headless radio button styled by the optional theme layer — two variants, three sizes.

Slider Headless range input — two variants, three sizes.

Switch Headless toggle switch — two variants, three sizes.

Section Page section, container, header, headings, and paragraph — the building blocks of a marketing page.

Hero Top-of-page block — flex column with optional center alignment.

River Two-column text + visual layout — alternate alignments for rhythm.

Pillar Vertical mini-card for a feature, benefit, or stat.

Statistic Display-number block with leading label and trailing description.

CTA Banner Bordered call-to-action panel — heading, copy, and CTA row.

Testimonial Quote card with oversized opening glyph, citation, and role line.