Two policy pages with clearly marked sample text: a long-form document whose sticky contents follow your reading position, and a summary-first page with plain-language cards that jump to and flash the full section.
Document with contents
Newdocument.tsxLong-form terms with a sticky table of contents and scrollspy (IntersectionObserver), reading progress, copyable section links and a mobile contents menu.
| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow / title / effective / version / intro | string | — | Header copy and badges. |
sections | { id; title; body: (string | { list: string[] })[] }[] | — | Paragraphs and bullet lists per section. |
sampleNotice | boolean | true | Shows the sample-text notice. |
contactEmail | string | — | Linked in the contact section. |
stickyOffset | number | 0 | Height of a fixed site header, so sticky contents sit below it. |
className | string | — | Classes for the outer element. |
Summary first
Newsummary-first.tsxPlain-language summary cards above the full text; each jumps to and flashes its section. Switch policies with a blurred crossfade and expand what changed.
| Prop | Type | Default | Description |
|---|---|---|---|
title / description | string | — | Header copy. |
policies | { id; label; updated; changes?; summaries: { icon; title; text; section }[]; sections: { id; title; paragraphs }[] }[] | — | Policies; each summary points at a section id. |
value / defaultValue | string | — | Active policy id (controlled / uncontrolled). |
onValueChange | (id: string) => void | — | Called when a policy is chosen. |
sampleNotice | boolean | true | Shows the sample-text notice. |
className | string | — | Classes for the outer element. |
Install the whole set
Installs every legal pages variant at once. Each section above has its own command for a single variant.
Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.
Accessibility
- Contents links mark the section in view with aria-current="location"; jumping moves focus to the section heading.
- Policy switcher is a tablist with arrow, Home and End keys; “What changed” is a disclosure with aria-expanded.
- Smooth scrolling, gliding indicators and flashes are instant or faded under reduced motion.