components / pane

pane.

a window onto content taller than the room you want to give it: the pane scrolls, not the page. what a section becomes when it would otherwise push everything below it off the end of the document — a growing wall of images, a long log, a list with no natural end. it isn't `shelf` (the horizontal errand: a row of cards you skim, sized by the shelf and paged by arrows) — a pane keeps its content exactly as given and only bounds how much of it you see. the thin scrollbar is on by default and is the affordance, written against a class so it survives an app-wide `*::-webkit-scrollbar { display: none }`; scroll chaining is deliberately left alone so the page keeps moving at the end of the pane; the edge is faded only where the content actually continues, measured with a ResizeObserver, and the pane is a tab stop only while it overflows.

  • 0.9.2pane: fade only the edge the content runs past
  • 0.9.1shelf: arrows disable at their end
  • 0.9.0marquee: repeats are inert as well as hidden
  • 0.8.4salon: trailing row capped instead of stretched
  • 0.8.3intro: onExit fires as the fade begins
  • 0.8.2navbar: owns its entrance
  • 0.8.1donut: frames cached across mounts
  • 0.8.0desk: editor and preview sync by caret
  • 0.7.6heatmap: buckets are tz-aware
  • 0.7.5toast: success earns its icon, not a colour
  • 0.7.4kbd: the one rounded corner in the registry
  • 0.7.3stack: fanned pile, not a laid-out wall

scroll inside the pane — the page stays where it is until the pane runs out.

installation
bunx @justin06lee/chrome@latest add pane
props
nametypedefaultdescription
children *ReactNode-
maxHeightstring'70vh'tallest the pane may grow, as any CSS length; shorter content is left alone and does not scroll.
scrollbarbooleantrueshow a thin scrollbar. off leaves the pane scrollable but unmarked.
ariaLabelstring-accessible name; given one, the pane becomes a named region.
classNamestring-