InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/pane

UsageCopy Anchor Link

import {
  PANE_OWNS_SCROLL,
  Pane,
  PaneBody,
  PaneStrip,
  Toolbar,
} from "@/components/pane";

<Pane>
  <Toolbar title="Sources" />
  <PaneBody>…</PaneBody>
</Pane>

Use it for every page's chrome: a Pane, a Toolbar with the title, a PaneBody. Panes are flush, split by 1 px hairlines, and nothing inside a window floats. A tab list or a filter bar pinned under the toolbar is a PaneStrip.

Don't put buttons in the toolbar: actions live with the content they act on, in a section's header, a filter bar or the PageHeader line. Don't nest a second scroll container inside PaneBody either: a page that needs its own says so with PANE_OWNS_SCROLL.

AnatomyCopy Anchor Link

<Pane>
  <Toolbar title />
  <PaneBody>
    {/* a page that pins a strip owns its scroll */}
    <div {...PANE_OWNS_SCROLL}>
      <PaneStrip />
      {/* the region that scrolls */}
    </div>
  </PaneBody>
</Pane>

ExamplesCopy Anchor Link

A pinned stripCopy Anchor Link

A page that pins a strip under the toolbar spreads PANE_OWNS_SCROLL on its root. PaneBody sees it, stops scrolling and turns into a flex column, so only the region under the strip scrolls. The shell keeps no list of such pages. Page Tabs does all of this for a page with tabs.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

The toolbar's title is the page's h1, focusable by script only (tabIndex={-1}). After keyboard navigation to a page, move the focus to it: the new page is announced and the next Tab starts at its top.

The drag band does nothing in a browser. In Electron it moves the window, and any control on a drag band needs [-webkit-app-region:no-drag] to take clicks; the toolbar holds none.

API referenceCopy Anchor Link

ToolbarCopy Anchor Link

PaneCopy Anchor Link

PaneBodyCopy Anchor Link

PaneStripCopy Anchor Link

Every div attribute.

ConstantsCopy Anchor Link