Revision stack
ProA document's revisions as a pile of sheets, newest on top. Choose two and they stand up facing each other, turned only 16 degrees so the text keeps its shape, with removed words struck through and added words underlined.
pnpm dlx shadcn@latest add @caliper/revision-stackWhen to use #
Use it for
- Policies, contracts and docs where people need to see exactly what changed.
- Version history that should show the change, not only the date.
Skip it when
- Code; use the file diff, which has line numbers and hunks.
Decisions #
Why it is built this way, so you know what to keep when you change your copy.
Behaviour
- Changes never rely on colour
- Removed words are struck through, added words are underlined, and each sheet says which it is marking in its heading.
Styling
- Text stays readable in 3D
- Sheets turn 16 degrees when compared and the pile is only a picture. The list holds the names and the choice.
Installation #
pnpm dlx shadcn@latest add @caliper/revision-stack
Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.
Usage #
Import it from your copy of the source. The example behind the preview comes with the source.
import { RevisionStack } from "@/components/ui/revision-stack"
The worked example comes with Pro
The 14-line example behind the preview opens here with a Pro or Team licence.
API reference #
RevisionStack
component
Accessibility #
It is built on native elements and keeps aria-hidden, aria-label and aria-live in step with state. Changes that matter are announced through a live region.
Motion #
It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.