UI
← Home

Split View

A multi-pane resizable layout — the IDE / editor-shell arrangement of sidebar, editor, and panel. Each separator resizes only its two adjacent panes (giving to one exactly what it takes from the other), so the rest of the layout stays put. Drag a separator or focus it and use Arrow / Home / End.

  • Axe
  • Focus
  • Drag
  • Cancel
  • Restore

Preview

Files
Editor
Output

Installation

npx shadcn@latest add https://ui.publictheta.com/r/split-view.json

Conformance

Verified against the @publictheta/ui-spec split-view 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.