shadcn.io is not affiliated with official shadcn/ui
Environment Config Diff Changelog Block for Svelte
A staging against production table in a fixed-height scroll region with grouped settings, masked secrets, a result as a shape and a word, and a Mismatches only switch.
Installation
Overview
An environment config diff for Svelte with Ark UI, written for Envmirror, a fictional environment manager. A start-aligned header says how many settings differ (counted from the data, "5 of 17 settings differ") and carries a "Mismatches only" switch at its end. Under it an inset frame with + marks on its corners holds one table in a fixed-height, focusable scroll region: a sticky head (Setting, Staging, Production, Result), four groups (Runtime, Database, Services, Flags) each with a heading row, and a row per setting with its key and both values in mono and a result as a shape and a word, never colour alone: a check and "Match", an unequal sign and "Mismatch". A mismatch row also takes a heavier weight and a bar at its start edge. Secrets are masked: a row of dots and a short fingerprint, so two secrets can be told apart without being read. It's built from Guides and Switch, with CSS transitions for the entrance and your theme's tokens for every colour. For environment pages and release checks. The settings are example data.
FAQ
How do I change the settings?
Edit GROUPS at the top of the file. A setting is a key, its staging and production values and, for a secret, secret set so the values are treated as fingerprints. Two values that are equal read "Match"; anything else is a mismatch. The headline count, the switch's results and the line under the table are computed from the list.
How are secrets handled?
They are never shown. A secret's cell draws eight dots and a short fingerprint ("fp 3a9c"), and screen readers hear "Hidden value, fingerprint 3a9c". Two secrets match when their fingerprints do, which is all a diff needs. Put fingerprints, never values, in the data.
What does the switch do and why does the frame stay the same height?
"Mismatches only" hides the matching rows and any group that ends up empty; a polite line under the table says how many rows show. The table sits in a scroll region of fixed height, so the block never changes size when you flip the switch.
Is it a real table?
Yes: a native table with a caption, scope on every header, the key as the row header and group names as row-group headers. The scroll region has a name and takes focus, so the keyboard can reach rows past the bottom edge.
How does it fit on a phone and in a right-to-left layout?
Below md the Staging and Production columns are replaced by two lines under the key, so a row keeps its key, both values and its result without scrolling sideways. In a right-to-left layout the table mirrors while keys, values and counts keep their reading order.