shadcn.io is not affiliated with official shadcn/ui
Config Changes Ledger Changelog Block for Radix UI
A change ledger of settings with the old value struck through and the new one after an arrow, an environment Select, and a Copy button for each row's rollback command.
Installation
Overview
A configuration-changes ledger for React with Radix UI, written for Dialkeeper, a fictional configuration service. A start-aligned header counts the changes from the data ("7 setting changes, 3 in production") and carries an environment Select at its end with a polite line under it that says how many rows show. Under a band rule that meets the rails, one row per change runs rail to rail: the key in mono with the environment, the person and the day beneath it, the old value struck through and the new one after an arrow (a key that was added says "Not set" for the old one), the rollback command that would undo the change in mono, and a Copy button for that command. Copying only fills the clipboard: nothing runs in this demo. It's built from Guides, Select and Copy Button, with CSS transitions for the entrance and your theme's tokens for every colour. For settings pages, audit logs and release notes that include configuration. The changes are example data.
FAQ
How do I change the ledger?
Edit CHANGES at the top of the file. A change has a key, the environment, who changed it, a UTC time as an ISO string, its old value (empty for a key that is new) and its new value. The rollback command is built from them (cfg set key old --env name, or cfg unset key --env name for a new key), so the visible command and the copied one never disagree, and the headline counts come from the list.
What does Copy do?
It puts that row's rollback command on your clipboard and says so to screen readers through a polite status line. Nothing is executed and no setting changes: "cfg" is a fictional command line.
How does the environment Select work?
Choosing an environment swaps the rows and a polite line says how many are showing. Every row of the full list sits unseen in the same cell, so the block keeps its height whichever environment is chosen. The Select opens with Enter, Space or the arrow keys and closes with Escape.
How are the old and new values told apart without colour?
The old value is struck through and read as "Was"; the new one follows an arrow, is heavier and is read as "Now". A key that did not exist reads "Not set" before the arrow. No red and green.
How does it fit on a phone and in a right-to-left layout?
On a phone each row stacks: the key and its details, the values and command, then the Copy button under them. Long commands wrap rather than scroll. In a right-to-left layout the arrow mirrors while keys, values and commands keep their reading order.