shadcn.io is not affiliated with official shadcn/ui
No History Empty State Block for React
A doc editor's History sheet drawn open at the end of a drawn page before any edit is kept: an isometric tray with a dashed card, and a Try an edit button that adds typed versions, each with an Undo.
Installation
Overview
Show the empty version history of a document as the sheet it lives in, with this no history empty state for React with Base UI. The host is Chronwick, a doc editor: its header holds the real History button, a clock with a back arrow and the count, and under it a stage draws the editor, a toolbar over a page with its title and paragraphs and, at the page's top end, a version chip that is only dashed. Drawn open in place at the stage's end edge, full height, is the Sheet: a drawing of an isometric tray with one dashed card hovering over it where the first version will go, "No versions yet" and the Shine Button, the only colored control, Try an edit. Each press keeps the next typed sample edit (Renamed to Q4 plan, Moved to Archive, Restored) as a version row, newest first, with who made it, the day and the time, and an Undo that removes it and says so. The empty message gives way to the rows inside the same scrolling body, and the chip on the page turns solid with the count. Pressing History opens the real sheet with the same content. The frame is ruled by Guides, and everything moves with CSS only. Shown open in place for the preview; in your app keep the Sheet and drop the in-place copy.
FAQ
What stays in the page, and how do I make it real?
The versions stay in the page's state: each is one of three typed sample edits with a fixed time on Friday 9 October, so a reload empties them and Start over empties them without one. No document changes and nothing is saved. To wire it for real, store a version where the code says so, from your editor's own change events, and render the rows from your store; Undo then restores the document from the version before it.
What does Try an edit make, and what is the limit?
It keeps the next sample edit that is not already in: first Renamed to Q4 plan, then Moved to Archive, then Restored, and the list is always newest first. When all three are in, the button stays on the page, goes quiet and says in words that all three are in; press Undo on a row and it makes that edit again. The status line announces every version kept and every Undo.
What does Undo do, and where does focus go?
Undo removes that version at once, says "Undid" and its name in the polite status line, and moves focus to the Undo of the next version, or to Try an edit when none remain. The chip on the page and the count on the History button follow, and the empty message comes back when the last version is gone.
What is the in-place sheet, and what is the real Sheet?
Shown open in place for the preview, so the block shows its content without a click: on load the sheet is drawn as a plain non-modal panel at the end edge of the stage. Pressing History opens the real Sheet, with its focus trap, Escape to close it and focus back on the button, and the in-place copy stays closed until a reload. Both share one body and the page's state. In your app keep only the Sheet and its trigger.
Which side does the sheet open on, and how does it look on a phone?
The sheet opens at the end of the layout: on the right in a left-to-right page and on the left in a right-to-left one, read when you press the button. On a phone the in-place sheet docks to the foot of the stage as a bottom sheet with a body of fixed height, so Try an edit stays on the first screen, and the real sheet keeps the catalog's own phone layout.
Is it usable with a keyboard and a screen reader?
The History button is named with its count, such as History, 2 versions. In the sheet Tab reaches Undo on each version, whose name carries what it undoes, and then Try an edit. The versions are a real list named by the line above it, the times are real time elements, and the drawings are hidden from assistive technology.
Related
- Pro
Version History Dialog
Side sheetsA docs tool's version history sheet shown open: six versions with authors and times, the diff of the chosen one against the current text marked with underline, strike-through, glyphs and words, and a two-step restore.
- Pro
No Comments Empty State
Activity and updatesA document reviewer's comments sheet shown open in place at the end of a drawn page: a sticky margin note drawing, a field with a 0 / 500 counter and a Comment button that stacks comments with a Delete button on each.
- Pro
No Recent Items Empty State
Activity and updatesA workspace's Recent popover drawn open under a top bar before anything has been opened: a clock face with a dashed hand, and a button that opens typed pages in turn, each pushed to the top of a list that keeps three.
- Pro
No Activity Log Empty State
Activity and updatesA personal activity feed with nothing recorded yet: four tick cards for the kinds of event beside a vertical timeline of dashed nodes that turn solid and write a first-person sample line as each kind is ticked.
- Pro
No Audit Trail Empty State
Team and accessA compliance tool's empty ledger: retention policy radio cards beside a vault door whose dial turns to the choice, and an empty table of Time, Actor, Action and Resource whose first row is written when the policy is saved.
- Pro
No Attachments Empty State
Files and docsA task's empty attachments popover shown open in place: a drawn paperclip holding a dashed sheet, Attachment rows that are dashed while there is room and done per file, and one Attach files button.