# 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](/ui/styles): Shared design tokens and utility classes.

- [Figma design system](https://www.figma.com/community/file/1634497966964502610): Live mirror of the tokens, components, and showcases on styles' page.

- [Storybook](/storybook/): Browse every component interactively — variants, sizes, states, and live controls.

## Components

- [Alert](/ui/alert): Inline informational box — three variants, three sizes, color theming.

- [Avatar](/ui/avatar): User image with a text fallback — two variants, nine sizes, color theming.

- [Badge](/ui/badge): Inline status pill — four variants, three sizes, color theming.

- [Button](/ui/button): Headless button styled by the optional theme layer — six variants, four sizes.

- [Card](/ui/card): Block-level container with surface, border, and optional elevation.

- [Checkbox](/ui/checkbox): Headless checkbox styled by the optional theme layer — two variants, three sizes.

- [Code](/ui/code): Inline code span — four variants, nine sizes, color theming.

- [Kbd](/ui/kbd): Keyboard key chip — nine sizes.

- [Link](/ui/link): Accent-colored anchor with configurable underline behavior and focus ring.

- [Progress](/ui/progress): Native <progress> styled as a determinate or indeterminate bar — two variants, three sizes.

- [Radio](/ui/radio): Headless radio button styled by the optional theme layer — two variants, three sizes.

- [Slider](/ui/slider): Headless range input — two variants, three sizes.

- [Switch](/ui/switch): Headless toggle switch — two variants, three sizes.

## Marketing

- [Section](/ui/section): Page section, container, header, headings, and paragraph — the building blocks of a marketing page.

- [Hero](/ui/hero): Top-of-page block — flex column with optional center alignment.

- [River](/ui/river): Two-column text + visual layout — alternate alignments for rhythm.

- [Pillar](/ui/pillar): Vertical mini-card for a feature, benefit, or stat.

- [Statistic](/ui/statistic): Display-number block with leading label and trailing description.

- [CTA Banner](/ui/cta-banner): Bordered call-to-action panel — heading, copy, and CTA row.

- [Testimonial](/ui/testimonial): Quote card with oversized opening glyph, citation, and role line.