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

Headless pagination styling

Pagination directives add slot attributes while leaving the visual structure fully owned by your markup.

HookElement
[data-slot='pagination']Root landmark.
[data-slot='pagination-first']First page button.
[data-slot='pagination-page']Numbered page button.
[data-slot='pagination-page-size']Rows-per-page select.

State hooks

  • [data-disabled] marks disabled roots and controls.
  • [data-current] marks the selected numbered page button.
  • [data-mode], [data-page-index], and [data-page-size] describe root state.

Practical guidance

Keep movement controls in DOM order, reserve enough width for the largest page number, and use native button and select elements so disabled and focus states remain reliable.