shadcn.io is not affiliated with official shadcn/ui
No Audit Trail Empty State Block for Svelte
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 Svelte with Ark 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.