Components

Every Hydrateless component is built on semantic HTML and modern CSS, with JavaScript added only where an interaction genuinely needs it. Browse the catalog below, or jump into the theme studio to see them all respond to your tokens.

36 components and primitives

Forms

Button A native button styled with intent, variant, and size modifiers.Input A text input styled with the hl-input primitive.Textarea A multi-line text input built on a native textarea.Select A native select with a CSS-drawn caret.Checkbox A label-wrapped checkbox on a native input.Radio Group Native radios grouped under role="radiogroup".Switch A toggle built on a native checkbox with role="switch".Slider A range slider on a native input[type=range].Segmented Control A compact single-select built on native radios.Combobox An editable input paired with a filterable listbox.Field An accessible layout wrapper for one form control.

Actions & Overlays

Dropdown Menu A button-triggered menu following the WAI-ARIA menu pattern.Menu A menubar with single-level submenus.Modal A dialog overlay built on the native <dialog> element.Drawer An off-canvas panel built on the native <dialog>.Popover Floating content anchored to a trigger.Tooltip A text hint shown on hover and focus.Command Palette A filterable list of commands with keyboard navigation.

Disclosure

Accordion Collapsible sections built on native <details>.Disclosure A single expandable section via native <details>.Tabs A tabbed interface with full ARIA roles and keyboard support.

Feedback

Alert A short, prominent message with an intent color.Badge A small label for statuses, counts, and tags.Progress A progress bar built on the native <progress> element.Spinner A loading indicator that inherits currentColor.Skeleton A placeholder shown while content loads.Toast Non-modal notifications that auto-dismiss.

Data Display

Card A surface for grouping related content.Avatar A user image with a graceful text fallback.Table A styled native <table> with striping and hover.Kbd A styled keyboard key for documenting shortcuts.

Navigation

Breadcrumb Breadcrumb navigation using a semantic nav and list.Pagination Page navigation with first/last and ellipsis truncation.Table of Contents Auto-generated navigation built from page headings.Skip Link A "skip to content" link revealed on keyboard focus.Separator A thin divider between content.