Getting StartedInstall and bootstrap headless foundations 4
LayoutHeadless structural primitives for expandable and container patterns 6
OverlayHeadless modal and floating layer behavior 3
FeedbackHeadless notification and status communication patterns 5
FormHeadless input and selection contracts 17
UtilityReusable action, identity, and clipboard behavior 6
NavigationHeadless trails, trees, menus, and command surfaces 7
Overview API Styling Examples

CSS contract table

SelectorApplied onPurpose
[data-slot='select']root hostOwn the outer shell, root spacing, and open-state driven layout changes.
[data-slot='select-trigger']trigger buttonApply focus ring, border, surface, and text treatment to the visible trigger.
[data-slot='select-listbox']listbox containerDefine overlay padding, option spacing, and owned scrolling behavior.
[data-slot='select-option']option rowStyle idle option rows before layering active, selected, and disabled states on top.
[data-active] / [data-selected] / [data-disabled]option stateRepresent focus movement, committed selection, and unavailable rows without custom JavaScript.

State selectors

Selectbox state selectors

css
[data-slot='select'][data-state='open'] { ... }
[data-slot='select-trigger']:focus-visible { ... }
[data-slot='select-option'][data-active] { ... }
[data-slot='select-option'][data-selected] { ... }
[data-slot='select-option'][data-selected][data-active] { ... }
[data-slot='select-option'][data-disabled] { ... }

Example shells

The primitive contract stays the same while your shell defines the trigger, overlay, and option row treatment.

Release owners (Plain-CSS)

Release owners

The primitive stays native while your wrapper card and option rows carry the visual style.