Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Audit Trail Changelog Block for Vue

A tamper-evident audit trail: six events in a framed table, each with the hash of the event before it and its own, and a Verify chain Shine Button that recomputes every hash in the browser.

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

An audit trail for Vue with Ark UI, written for Ledgerwatch, a fictional audit-log service. A start-aligned header carries a Verify chain Shine Button. Under it, an inset frame with overshooting corners holds one table of six events, newest first: the action and the resource it touched, who did it with a masked IP address, the fixed time in UTC and the chain, which is the short fingerprint of the event before it and its own. Each fingerprint is a real FNV-1a hash of the event's fields and the one before it, written into the data. Pressing Verify chain recomputes the six hashes in your browser, oldest first, marking each row Verified as it goes, and the foot reads Chain verified, 6 of 6 events. It's built from Shine Button, Guides and a native table. The events are example data, and the fingerprint is short and non-cryptographic: it shows the idea of a chain, not a production seal.

FAQ

What does Verify chain actually do?

It recomputes the FNV-1a fingerprint of every event from its fields and its prev, checks that each prev equals the hash of the event below it and that each stored hash still matches, then counts how many pass. The result is real, but only against the example data in the file: change one field and the chain fails from that event on.

How do I use my own events?

Replace EVENTS with your log, newest first, and give each a prev (the hash of the row below, or the genesis value for the oldest) and a hash. Compute the hashes once with the same fingerprint and inputOf helpers and write them into the data; do not compute them at render time, or the check would always pass.

How is the result announced?

A permanent polite status region starts empty and is filled once, when the check finishes, with Chain verified, 6 of 6 events. The row marks change as the check runs, but no ticking value is announced. The button keeps its place and is marked busy with aria-disabled while it runs, so a second press does nothing.

What changes on a phone and in a right-to-left layout?

Below lg the actor, time and chain move under each event, so nothing scrolls sideways at 320 pixels. Hashes, resources and addresses keep their left-to-right direction in a right-to-left layout, and the dates read as one phrase.

What moves, and what happens with reduced motion?

The header and frame fade up once on load. The verification steps through the six rows, about a fifth of a second each, on a bounded timer; with reduced motion it jumps straight to the result. Nothing is sent anywhere.

All 200 changelog blocks