shadcn.io is not affiliated with official shadcn/ui
No Audit Trail Empty State Block for React
A 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.
Installation
Overview
Let an administrator set how long events are kept and watch the ledger start, with this no audit trail empty state for React with Base UI. The page is Vouchmoor, a compliance tool: the page's rails and one band across the screen hold a heading, one sentence and a retention policy as three radio cards, 1 year, 3 years and 7 years, each saying how far back it keeps events from a typed day. The Shine Button, the only colored control, is Save policy. Beside the cards a drawn vault door turns its dial to the chosen policy, and its dashed seal turns solid once the policy is saved. Under both sits the ledger: a native table with four headers, Time, Actor, Action and Resource, and the caption "Recording starts today: 0 events". Saving writes the ledger's first row, who set the policy, what was set, what it was set on and a typed UTC time, and changing the policy and saving again adds another. The frame is ruled by Guides, and everything moves with CSS only.
FAQ
What stays in the page, and how do I make it real?
The policy, the ledger rows and the saved state stay in the page: the administrator, the times (10:02, 10:09 and 10:16 UTC on Friday 9 October 2026) and the resource are typed, and a reload or Start over empties the ledger. Nothing is recorded or sent. To make it real, save the policy through your own backend where the code says so and render the ledger from the events your system writes, in the same four columns.
What does the vault drawing do?
It is a drawing of the choice, not a control. Its dial turns a third of a turn for each step from 1 year to 7 years, and its outer seal is only dashed until a policy has been saved, when it turns solid. It stays on the page in every language and is hidden from assistive technology; the cards and the status line carry the same facts in words.
How do the policy cards work?
Each is a native radio named by the policy and described by how far back it keeps events, counted from the page's fixed day: 9 October 2025, 2023 or 2019. Choosing one changes the button to Save policy; once it is saved the button reads Policy saved, quietly, and pressing it says the policy is already saved. Saving a different policy writes "Changed retention from 3 years to 7 years" as a new row, newest first, up to three in the demo.
Does the ledger change size when the first row arrives?
No. The table region has a fixed height with room for its heading, its four headers and three rows, and the empty message sits in the space under the headers until a row exists. The caption counts the events and, after saving, says how long they are kept.
Is it usable with a keyboard and a screen reader?
The cards are a real radio group, with arrow keys moving between them, and the table has a caption, column headers and row headers; each time is a real time element. A polite status line says what was chosen and what was saved. The region around the table is focusable so a narrow screen can scroll it, and the vault is hidden from assistive technology.
Related
- 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 History Empty State
Files and docsA 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.
- Pro
No Permissions Empty State
Team and accessAn access-control tool's empty rules page: a preset strip over a real matrix of checkboxes (Projects, Docs and Billing by Create, Read, Update and Delete), a count, a Save rules foot, and a garden gate that opens as you allow more.
- Pro
No Roles Empty State
Team and accessAn access-management tool's first-role page: a name field, five permission switches, a sentence that rewrites itself, and a key ring whose next free tag is dashed and shows the role you are building.
- Pro
No Contacts Empty State
Team and accessA contacts book's empty state with two tabs: Add one, a name, email and company form, and Import CSV, a drop zone that reads the file's header in your browser; one button for the active tab and an address-card tray whose dashed place turns solid.
- Pro
No Departments Empty State
Team and accessAn org-chart tool's empty departments page: a dashed chart of a root and two children, an Add department button that turns the root into a name field, sub-departments joined by CSS lines, and Remove for a box with no children.