Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

Revision History Pinning CRUD Block for React Aria

A team wiki page's history as a document window: save a revision with a message, restore an old version as a new one, pin the ones to keep and watch the oldest unpinned drop when the list fills.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Give a document a history that cannot rewind, with this revision list for React with React Aria. A document window holds the revisions at the start (an initials avatar, the message, the revision number and day, and a pin Toggle) and the chosen revision at the end: its label is an Editable, its text sits in a scroll region, and under it the working Textarea and a message Input. Save revision, the one Shine Button in the top bar, adds revision N+1 and needs a message and changed text. Restore this version never goes back: it adds a new revision, "Restored from 3", on top. The list keeps six: saving a seventh drops the oldest unpinned one, the foot names it, and Undo brings it back. Pin one to keep it; with all six pinned the save says "Unpin one to save". The latest and pinned revisions cannot be deleted, the rest can, with Undo. Not a diff: that is the blog and dialog version histories.

FAQ

How do I fill it with my page's revisions?

Edit REVISIONS, newest first: each has an id, a number n, an author, an ISO date, a message, the text and a pinned flag. New revisions are numbered from serial, so a number is never reused even after the oldest one drops; the keeping limit is LIMIT.

Which revision is dropped, and can I get it back?

The oldest one that is not pinned, when a seventh would be added. The polite line in the foot says which ("Dropped r1, the oldest unpinned") and Undo restores the whole list as it was, including the dropped revision and your working text. A pinned revision is never dropped.

Why does Restore add a revision instead of going back?

So history only grows and nobody loses a step: restoring revision 3 copies its text into a new latest revision called "Restored from 3" and loads that text into the working area. If the latest revision is already that text, it says so and adds nothing.

How do I edit a label from the keyboard?

Press the pencil beside the label (or click the label), type, and press Enter to save or Escape to cancel; an empty label is refused with its reason. Pins are toggles on every row and the list rows are buttons, so Tab and Enter reach everything.

What stays local, and how do I wire real revisions?

Everything lives in this tab and a reload brings the five originals back. In your app call your API from addRevision, pin, relabel and remove, keep the six-revision rule on the server, and store the text with the revision so a restore is a copy.

How does it look on a phone?

The window shows one pane at a time: the revision list first, then the chosen revision with a Back to revisions button. Save revision stays in the top bar, and a refused save switches to the pane with the message field and focuses it.

All 100 crud blocks