VersionHistory
StableA list of earlier versions of your work, with who made each, when, and Preview and Restore buttons.
Also known as history, revisions, versions
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
List with preview
Version history
Version 4Current
AI, Assistant2 min ago
Tightened the headline
Version 3
Person, Maya10 min ago
Changed the color of the button
Version 2
AI, AssistantYesterday
Added a pricing section
Version 1
AI, AssistantYesterday
First draft
Preview does not create a new version.
const [previewId, setPreviewId] = useState<string | null>(null);
const [currentId, setCurrentId] = useState(versions[0].id);
<VersionHistory versions={versions} currentId={currentId} previewId={previewId}
onPreviewChange={setPreviewId} onRestore={(id) => { setCurrentId(id); setPreviewId(null); }} />Press Preview on any older version. The banner offers Exit preview and Restore. Restore makes that version the current one.
When to use it
Lists earlier versions of a piece of work, newest first, with who made each one. Preview and Restore are separate, so people can look without changing anything.
Made of: Title · Preview banner · Version rows · Current label · Preview button · Restore button · Preview note
Use it for
- A document, design or page that both the AI and people edit.
- Looking at an older version before deciding to bring it back.
- Telling AI edits apart from people's edits.
Not for
- Versions of one chat message: use VersionPager.
- Going back to an earlier step of an agent's work: use CheckpointList.
- Undoing one AI edit to a short text: use RevertToggle.
Do and avoid
Trip plan versions
Version 3Current
Person, PriyaToday, 10:42
Fixed the hotel dates
Version 2
AIToday, 10:15
Added a day in Porto
Version 1
Person, PriyaYesterday
First plan
Preview does not create a new version.
Trip plan versions
Version 1
Person, PriyaYesterday
First plan
Version 2
AIToday, 10:15
Added a day in Porto
Version 3Current
Person, PriyaToday, 10:42
Fixed the hotel dates
Preview does not create a new version.
Do
- Mark the current version in words, with no buttons on it.
- Say that Preview does not create a version, so people feel safe trying it.
- Show who made each version, so AI edits and human edits are easy to tell apart.
- Show the previewed version in your own screen. The list only tells you which one through onPreviewChange.
Avoid
- Do not restore when someone only previews. They are different actions.
- Do not put the oldest version first. The numbering expects newest first.
- Do not use amber on the preview banner. Nothing is waiting on the person.
- Do not hide the banner. People need a clear way out of a preview.
On a phone
- Each version is a row whose text has a 192px minimum width, so Preview and Restore wrap below the text on a narrow screen.
- Preview and Restore keep their size and have a 44px tap area on a touch screen.
- The preview bar at the top wraps, with its buttons under the text when needed.
Seen in products
- In Figma and Figma Make every AI edit creates an auto-numbered, auto-named version that can be previewed without creating a new version.
- A Figma forum thread reports versioning limits in Make.
- Claude artifacts support editing drafts in place (release notes, Jun 2026).
- Gemini Canvas and Claude artifacts offer versions.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| versionsrequired | VersionEntry[] | none | Newest first. Each entry has an id, time, author (ai or person) and optional name, authorName and summary. A missing name becomes Version N. |
| currentId | string | none | Id of the current version. Defaults to the first entry. |
| previewId | string | null | none | Controlled preview. Omit to let the component manage it. |
| onPreviewChange | (id: string | null) => void | none | Called when a preview starts or exits. |
| onRestorerequired | (id: string) => void | none | Called when Restore is pressed on a row or in the banner. |
| title | string | "Version history" | Heading and accessible name of the section. |
| previewNote | string | "Preview does not create a new version." | Note under the list and in the preview banner. |
| className | string | none | Extra classes for the section. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- current
- The version matching currentId (or the first one) shows a Current badge and has no Preview or Restore buttons.
- previewing
- Pressing Preview marks that row, and shows a bar above the list with Exit preview and Restore.
- hover
- A row that is not being previewed gets a soft background under the pointer.
Tokens
Change one of these and every part that uses it follows.
--surface--surface-sunken--surface-hover--border--lime (via Badge)--radius-card
Built in
- Versions are a numbered list, and the current one is marked for screen readers.
- Preview and Restore buttons include the version name, such as "Preview Version 3".
- Each Preview button tells screen readers whether it is on.
- Starting a preview is announced as "Previewing" and the version name.
- Who made each version and which one is current are said in words, not color.
- After a restore, keyboard focus moves to the restored version and screen readers hear "Restored" and its name. Leaving a preview from the bar returns focus to that version's Preview button.
What you need to do
- Keep version names and summaries short, so the button names stay easy to hear.
- Set restoredMessage when you translate.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide