shadcn.io is not affiliated with official shadcn/ui
Audit Log CRUD Block for React Aria
Three pricing rules with their own add, edit and remove, beside an append-only log that those edits write, with before and after in words, a filter by kind with counts, and an Undo that adds a restored entry.
Installation
Overview
Show the records and the history they leave behind side by side with this audit log for React with React Aria. A hairline frame with a plus mark on each corner holds two columns. At the start, three pricing rules of a web shop: a quick line adds one on Enter, a name and a number edit where they sit as Editable fields, and Remove takes a rule out. At the end, an append-only log that those edits write, newest first: "You changed 'Free shipping over (USD)' from 50 to 60", with the actor, a fixed time and a Badge for the kind. A Toggle Group filters the log by Added, Changed, Removed and Restored, each with its count. The log never shrinks: removing a rule adds a removed entry, and Undo puts the rule back and adds "You restored..." instead of erasing anything. Add rule is the only Shine Button. For admin consoles, settings screens and any record manager that must show what changed and who changed it.
FAQ
How do I fill it with my records and history?
Edit RULES for the records and LINES for the older log entries. A log line has an id, a kind (added, changed, removed or restored), the by name, a minutes value since midnight and the finished text. New entries take the next four-minute step from a fixed start, so a reload repeats the same day and nothing reads the clock.
Why can't I delete a log entry?
Because an audit log is evidence. The only thing that writes to it is a change to a record, and each change adds one line at the head. The filter hides entries without removing them, the count reads "3 of 7 entries", and the empty state says the filter, not the log, is empty.
What does Undo do to the log?
It restores the last removed rule at its old place and appends "You restored 'name'". The earlier "removed" entry stays, so the log tells the whole story. Any other change replaces the Undo, so it never undoes something older than what you see.
What is refused when I edit a rule?
A name can't be empty, longer than 40 characters or the same as another rule's, ignoring case. A value must be a whole number from 0 to 9999. The reason appears under the field, in a slot that is always there, and the polite line repeats it, so nothing moves. A refused edit writes no log line.
What stays local, and how do I wire it to a real API?
Rules and log live in React state in this tab and a reload restores the originals; nothing is sent. In your app write the log on the server, in the same transaction as the change, from the signed-in user, and render what the server returns. The client only displays it, so it cannot be edited from the page.