guide
guide-shell
A two-pane docs-reading shell — sticky scroll-spy nav on the left, scrollable prose column on the right. Sections register via a render-prop; an IntersectionObserver drives the active highlight.
GuideShell
A two-pane shell for docs-style reading — sticky scroll-spy nav on the left, a scrollable prose column on the right.
Scroll this column and watch the left nav highlight follow — that's an IntersectionObserver watching every registered section, not a manual scroll handler.
Scroll spy
Each GuideSection registers its own DOM ref via the registerRef render-prop GuideShell forwards. No section needs to know about any other section.
Prose primitives
Lead is the opening line of a section — slightly larger.
P is the workhorse paragraph weight, muted by default.
Eyebrows
This section's heading has an eyebrow — the small "Detail" kicker above the title. It's optional per-section, not a running header.
Scroll the prose column — the left nav follows. Each section registers itself via the render-prop; the eyebrow is optional per-section.
Installation
Usage
GuideShell: GuideShell · GuideSection · Lead · P · Aside
Use when
- Long-form documentation, guides, reference pages where the reader needs to know where they are