Pane

A scrolling panel of a split layout with a sticky header. Use the side variant for a list beside the work and sunken for a panel under it.

Pane
PaneHeader

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Pane

Sessions

Session 1
Session 2
Session 3
Session 4
Session 5
Session 6
Session 7
Session 8
Session 9
Session 10
Session 11
Session 12

Output

Nothing yet.

Dark theme, Pane

Sessions

Session 1
Session 2
Session 3
Session 4
Session 5
Session 6
Session 7
Session 8
Session 9
Session 10
Session 11
Session 12

Output

Nothing yet.

High contrast theme, Pane

Sessions

Session 1
Session 2
Session 3
Session 4
Session 5
Session 6
Session 7
Session 8
Session 9
Session 10
Session 11
Session 12

Output

Nothing yet.

UsageLink to the section Usage

tsx

import { Pane, PaneHeader } from '@skribly/ui/shell'

tsx

<Pane variant="side">
  <PaneHeader title="Files" icon={<Folder />} actions={<IconButton label="Refresh">…</IconButton>} />
  …
</Pane>

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

The PaneHeader heading names the pane, so it becomes a region.
While its content overflows the pane is a Tab stop, so the keyboard can scroll it; its ring is drawn inside so the edge never clips it.

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