SplitView

Panes divided by splitters that the pointer and the keyboard can move. Side by side panes stack below 40rem, so neither gets too narrow to read.

SplitView
Splitter

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, SplitView

Files

README.md
package.json
src
tokens
test

Preview

Drag the line, or focus it and use the arrow keys.

File list: 30%

Dark theme, SplitView

Files

README.md
package.json
src
tokens
test

Preview

Drag the line, or focus it and use the arrow keys.

File list: 30%

High contrast theme, SplitView

Files

README.md
package.json
src
tokens
test

Preview

Drag the line, or focus it and use the arrow keys.

File list: 30%

UsageLink to the section Usage

tsx

import { SplitView, Splitter } from '@skribly/ui/shell'

tsx

<SplitView defaultSizes={[0.3, 0.7]} label="Files and preview">
  <Pane>…</Pane>
  <Splitter label="Resize the file list" />
  <Pane>…</Pane>
</SplitView>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Each Splitter is a focusable separator that reports the share of the pane before it in percent and points at it with aria-controls.
Arrow keys move it by 1%, Page Up and Page Down by 10%, Home and End to the limits, Enter collapses and restores; double click restores the starting split.
Arrow keys follow the reading direction.
When the panes stack on a narrow screen and scroll together, that column becomes a tab stop, named by label, so the keyboard can scroll it.

This demo runs through axe in all three themes on every test run. See what the tests check.