Components

Inline label element with variant and size options. Enhanced with prefers-contrast support for users who request higher contrast.

a11y prefers-contrast: more — heavier borders and font weight

<Badge variant="primary" size="sm">Primary</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="neutral">Neutral</Badge>

Polymorphic button/link component. Renders as <a> when href is provided, <button> otherwise. Supports disabled state with proper aria.

a11y Disabled state uses aria-disabled and removes from tab order

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost" size="sm">Ghost</Button>

Hover/focus tooltip upgraded with the Popover API. Browsers that support popover='hint' get auto-dismiss and Escape-to-close. Others fall back to CSS hover/focus.

a11y Visible on focus + hover; Escape-to-close (Popover API)

<Tooltip text="Helpful information" position="top">
  Hover me
</Tooltip>

Scroll-driven reveal animations. Replaces AOS, ScrollMagic, and GSAP ScrollTrigger with zero JavaScript. Uses animation-timeline: view() — content animates in as it enters the viewport.

a11y prefers-reduced-motion: respected — content visible immediately

<ScrollReveal animation="fade-up">
  <Card>Content reveals on scroll</Card>
</ScrollReveal>

Animated counter using CSS @property with <integer> type and counter(). Numbers count up from 0 when scrolled into view — entirely in CSS.

a11y role=img + aria-label exposes counter values to assistive tech

<CounterBadge value={42} suffix="+" label="Components" />

Base container with optional @starting-style entry animation. When animated=true, the card fades and slides in on first render — visible during View Transitions navigation.

a11y prefers-reduced-motion: respected — no entry animation

<Card animated>
  <div class="p-4">Content with entry animation</div>
</Card>

Native <dialog> element with ::backdrop, focus trapping, and Escape-to-close — all browser-provided. Replaces Radix Dialog, HeadlessUI, or any modal library. Entry animation via @starting-style.

a11y Focus trap + Escape-to-close: native to <dialog>

<Dialog id="my-dialog" title="Dialog Title" size="md">
  <p>Dialog content here</p>
</Dialog>

<button onclick="document.getElementById('my-dialog').showModal()">
  Open Dialog
</button>

CSS-only tab switching using hidden radio buttons — the same pattern as the Header's mobile menu checkbox. Arrow key navigation via ~15 lines of inline script (WCAG requirement).

a11y Keyboard: arrow keys, Home, End — full WCAG tablist pattern

<Tabs tabs={[{ id: "one", label: "Tab One" }, ...]}>
  <div data-tab-panel="one" role="tabpanel">First panel</div>
  <div data-tab-panel="two" role="tabpanel">Second panel</div>
</Tabs>

Responsive grid that uses @container queries instead of media queries. The grid responds to its parent container's width, not the viewport — making it truly reusable in any layout context.

<Grid cols={3} gap={4}>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Grid>

CSS scroll-driven parallax. Decorative background shapes move at different rates than content using animation-timeline: scroll(). Replaces Rellax, Locomotive Scroll, or GSAP ScrollTrigger.

a11y prefers-reduced-motion: respected — shapes stay static; aria-hidden on decorations

<ParallaxSection intensity="subtle">
  <h2>Content moves at normal speed</h2>
  <p>Background shapes drift with parallax</p>
</ParallaxSection>