UI
← Home

Splitter

A window splitter divides a region into two resizable panes. Focus the separator and use the arrow keys to resize (Home/End jump to the limits), or drag it with the pointer. The primary pane size is exposed via `aria-valuenow`.

  • Axe
  • Focus
  • Drag
  • Cancel
  • Restore

Preview

Sidebar
Content

Installation

npx shadcn@latest add https://ui.publictheta.com/r/splitter.json

Conformance

Verified against the @publictheta/ui-spec splitter specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.

  • Axe — No WCAG 2 A/AA axe-core violations
  • Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
  • Drag — Pointer-drag surfaces don't select text or hijack touch scrolling
  • Cancel — Escape mid-drag (and pointercancel, when the OS takes the gesture) restores the value the drag started from and ends it, so the release commits nothing
  • Restore — What the user set is still there after a reload — the pane size, the column widths, the open section, the active tab, the scroll position — but only where the host opted in, and never at the cost of working when storage is unavailable

See the full conformance matrix across all components.