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="multi-select"]Root hostState container and token surface for the multiselect root.
[data-slot="select-trigger"]Trigger controlTrigger surface, focus ring, and open/closed state feedback.
[data-slot="select-overlay"]Portaled overlayPanel border, radius, elevation, and max-height constraints.
[data-slot="multi-select-listbox"]Listbox hostOption stack spacing and scrolling behavior.
[data-slot="multi-select-option"]Option hostKeyboard active highlight, committed selection, and disabled styling.

State selectors

MultiSelect state selectors

css
[data-slot="multi-select"][data-state="open"] { /* overlay is visible */ }

[data-slot="multi-select-option"][data-active] {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-slot="multi-select-option"][data-selected] {
  background: #ecfeff;
  border-color: #5eead4;
}

[data-slot="multi-select-option"][data-selected][data-active] {
  background: #ccfbf1;
  border-color: #2dd4bf;
}

[data-slot="multi-select-option"][data-disabled] {
  opacity: 0.52;
  cursor: not-allowed;
}

Example shells

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

Categories (Plain-CSS)

Categories

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