UI
ElementsKit UI components — accessible, reactive, framework-agnostic.
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.
Storybook
Browse every component interactively — variants, sizes, states, and live controls.
Components
Alert
Inline informational box — three variants, three sizes, color theming.
Avatar
User image with a text fallback — two variants, nine 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 <progress> 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.
Marketing
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.