Version history

Pro

Every saved version of a document, grouped by day: see what changed against now or the version before, name the important ones, and restore any of them without losing what is there.

Installs components/ui/version-history.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/version-history

Approved by legal

From Yesterday, 11:20 to Approved by legal: red was removed, green was added

+1 −1

1 added, 1 removed in overdue-reminder.txt

3	3		Hi {first_name},
4	4
5	5		Invoice {number} for {amount} was due on {due_date}.
6		−	Removed: Please pay it as soon as possible: {pay_link}
	6	+	Added: You can pay it here: {pay_link}
7	7
8	8		If you have already paid, please ignore this email.
9	9

When to use #

Use it for

Documents, templates, policies and configuration people edit over time.
Anywhere someone asks “what did this say last week?”.

Skip it when

An audit of who did what across a workspace; use the audit trail.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/version-history

Adds its 12 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.

example.tsx

import { VersionHistory } from "@/components/ui/version-history"

The worked example comes with Pro

The 108-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

VersionHistory

component

PropTypeDefaultDescription

versions *readonly DocumentVersion[]—Newest first; the first is the current version.

onRestore *(version: DocumentVersion) => void—Make this version's content current, as a new version.

onName((id: string, name: string) => void)—

pathstring"Document"Shown in the diff header, e.g. a file name.

languageCodeLanguage"text"

nowstringnew Date().toISOString()ISO time treated as now, for Today and Yesterday.

classNamestring—

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.