Functional Wrappers

Invisible behavioral layers that separate visuals from interaction logic. Wrappers add hover states, drag-and-drop, selection, dismissal, or expand/collapse behavior without rendering any visible UI.

11 wrappers · 5 documented here

Key Characteristics

  • No visual UI — purely behavioral; wrappers render no visible elements of their own
  • Separation of concerns — interaction logic stays isolated from visual components
  • Composable — wrap any Preset or Composite to add behavior
  • Five wrappers — Actionable, Sortable, Selectable, Dismissible, Expandable

Wrappers

ActionableAdds hover/focus/click handlers, cursor, and focus ring to any child component
SortableDrag-and-drop sorting (requires @dnd-kit/sortable peer dependency)
SelectableMulti-selection logic with keyboard support (Shift+click, Ctrl+click)
DismissibleEscape key and outside-click dismissal behavior for overlays and popups
ExpandableExpand/collapse with smooth height animation and accessible aria attributes

How It Fits

Wrappers are cross-cutting behavioral additions — they can wrap anything in the consumer catalog. Need a Card that dismisses on outside click? Wrap it in Dismissible. Need a list of chips that supports drag reordering? Wrap each in Sortable. Unlike Context Containers (which affect styling), Wrappers affect behavior. See the Architecture chart for the complete tier map.