SplitView
Resizable two-pane split layout with keyboard and pointer drag support.
Category: layout · WCAG 2.1-AA · layout, split, resizable, pane
Props
| Prop | Type | Default | Description |
|---|---|---|---|
start | ReactNode | — | Left pane content |
end | ReactNode | — | Right pane content |
defaultRatio | number | 0.3 | Initial split ratio (0–1) |
min | number | 0.2 | Minimum ratio for start pane |
max | number | 0.8 | Maximum ratio for start pane |
aria-label | string | — | Label for the separator |
Design tokens
--cascivo-color-border--cascivo-color-accent--cascivo-duration-150
When to use
- Two side-by-side panes the user can resize via pointer or keyboard
- Master/detail, editor/preview, or list/content layouts
When not to use
- Static two-column content — use Columns
- A full app frame with persistent navigation — use AppShell or SidebarApp
Examples
Basic
Two-pane split with draggable divider
<SplitView start={<FileTree />} end={<Editor />} />Related components
- Columns — Use for static, non-resizable two-column content