Skip to content

Components

Each component is documented with HTML examples, variants and sizes, states, theming tokens, and accessibility notes. Browse by category below, or open the Kitchen sink to see every component live on one page.

Actions

Semantic button component with variants, sizes, and htmx-friendly request states.

Visually connect adjacent buttons into a segmented cluster.

A connected row of two-state toggle buttons — exclusive (radio) or multiple selection — with roving-tabindex keyboard support. Light CSS skin + installToggleGroup.

Horizontal grouping of related controls with consistent spacing and optional separators.

A command palette (⌘K launcher) — type-to-filter list of actions in a dialog, with grouped results and keyboard navigation. WAI-ARIA combobox pattern.

Styled keyboard keys and shortcuts built on the native <kbd> element.

Forms

Wraps a label, control, and help/error message into a single, validation-aware unit.

Semantic input class that applies to standard input, select, and textarea elements.

Compose an input with leading and trailing addons on one surface.

A segmented one-time-code input built on a single accessible <input> with autocomplete=one-time-code, rendered as visual slots by installInputOtp.

Native <select> with full styling on the closed state and the OS / browser picker for the dropdown — pure CSS, no JavaScript.

Accessible single-select with type-to-filter, built on the WAI-ARIA 1.2 combobox pattern, native popover, and CSS Anchor Positioning.

Multi-select combobox with tag input — type to filter, click to toggle, Backspace to remove the last tag. Built on popover + anchor positioning.

Semantic checkbox class that styles a native input[type=checkbox] while preserving its native semantics, keyboard behaviour, and form participation.

Semantic radio class that styles a native input[type=radio] while preserving its native grouping, keyboard behaviour, and form participation.

Native checkbox styled as an iOS-style toggle, with role="switch" for proper screen-reader semantics. Pure CSS, no JavaScript.

Native input[type=range] styled with consistent cross-browser chrome. Keyboard, form integration, and accessibility come from the browser; a tiny behavior keeps the WebKit fill in sync.

Native date / time input styled to match the HC form-control family, with the OS-native calendar popup preserved.

A styled month-grid date picker rendered by installCalendar, following the WAI-ARIA date-picker grid pattern with full keyboard navigation. Localized via Intl.

Navigation trail from the site root to the current page — pure CSS, semantic HTML, no JavaScript.

Semantic page links with current-page emphasis and disabled prev/next.

Accessible tab panels following the WAI-ARIA APG pattern, with progressive enhancement for browser find-in-page and an optional URL-routed variant.

Accessible dropdown menu following the WAI-ARIA APG menu pattern, built on the native popover attribute and CSS Anchor Positioning.

The desktop application menu bar (File / Edit / …) built on hc-menu.

Top-level site navigation with content panels (mega-menu).

A right-click / keyboard context menu built on the hc-menu surface, opened at the pointer via installContextMenu. WAI-ARIA menu semantics.

Overlays

Minimal styling for the standard <dialog> element. Modal flows use showModal(), non-modal use show().

Slide-in side panel built on the native <dialog> element, with edge positioning and CSS-only slide animations via @starting-style.

Lightweight floating panel built on the standard popover attribute.

Richer tooltip with structured content. The user can move the cursor into the card and click links inside it.

Short, transient text label that appears on hover or focus, built on the native popover attribute and CSS Anchor Positioning.

Data display

Semantic data table with hoverable rows and a quiet header band.

An interactive, Excel-like data grid — multi-level sticky headers, frozen columns, row selection, keyboard cell navigation, and inline editing — built on a semantic table and position:sticky. For paged data, not a client-side grid framework.

Generic container with optional header, body, and footer parts.

A generic list / option row primitive — media, content, and actions.

Circular or rounded user avatar — an <img> when a photo is available, a <span> with initials when not. CSS-only, with an optional behavior that swaps a broken image for its initials fallback.

Small inline status indicator with variant colors.

A thin divider line between sections or groups, built on the native <hr> element with horizontal / vertical orientation. Pure CSS, no JavaScript.

Collapsible section group built entirely on native <details> / <summary> and the modern name attribute — no JavaScript required.

A standalone show/hide disclosure built on native details/summary.

Feedback

Block-level notice or status message with variant colors.

Transient, event-driven notifications — fired from client code or an HX-Trigger header, with position, stacking, and swipe-to-dismiss.

Native <progress> element styled with consistent cross-browser chrome, supporting determinate and indeterminate states. Pure CSS, no JavaScript.

A minimal CSS-only loading indicator for busy and pending states.

A loading placeholder block with pulse / wave animation, theme-adaptive surface, and prefers-reduced-motion support. Pure CSS, no JavaScript.

A centered block for "no results" and "nothing here yet" states.

Layout

A fixed aspect-ratio box for images, video, and embeds.

A scrollable region with thin, themed scrollbars using the standard CSS Scrollbars module. Pure CSS, no JavaScript.

A full-viewport application shell for business apps — persistent sidebar, header, main, optional aside and footer — built on CSS Grid. Pure-CSS layout; the only JavaScript is the accessible mobile navigation overlay.

Resizable panels with a draggable, keyboard-accessible handle, following the WAI-ARIA Window Splitter pattern. Driven by installSplitter.

A scroll-snap carousel driven by native scrolling, with optional autoplay.