shadcn.io is not affiliated with official shadcn/ui
Environment Config Carousel Block for React
Eight configuration variables in Development, Staging and Production, one environment per swipeable slide, with masked values, secrets that are never shown, a Differs mark against Production and a derived list of what differs on every move.
Installation
Overview
Compare configuration across environments without a wide diff table, with this environment config carousel for React with Base UI. Configstead, a configuration manager, shows eight variables (the app URL, the log level, a database URL, a cache lifetime, a worker count, a beta flag, a session secret and an upload limit) in Development, Staging and Production, one environment per slide on a ruled track. Each row has the key in mono and a value that stays masked until you press "Show values"; the two secrets are never drawn and say "Not shown: secret". A "Differs" mark appears wherever a value is not what Production has, and a revealed value also shows Production's beside it. A band above the track lists the variables that differ from Production for the environment in view, recomputed on every move from the typed values, and an "Only differences" Button dims the rows that match. The foot holds the status line, a dot for each environment, and Previous and Next. The ruled bands come from Guides. Configstead and the values are made up for the example.
FAQ
How do I use my own variables?
Edit ENVS and VARIABLES. A variable has a key, a secret flag and one value for each environment in the order of ENVS. PROD is the index of the environment the others are compared with. The marks, the counts beside the environment buttons and the list under them come from one helper, differsIn, so nothing is typed twice.
Are secrets ever shown?
No. A secret is compared but never drawn: its row says "Not shown: secret" and the demo's values are placeholders that only decide whether the Differs mark shows. Reveal applies to the other variables only. Keep real secret values out of the page and compare digests or versions from your server instead.
How does it work with a keyboard?
Tab reaches the environment buttons, Only differences, then Show values of the environment in view, then the dots, Previous and Next. With focus inside the track, the arrow keys move between environments (mirrored in a right-to-left layout) and Home and End jump to the first and last. Environments that are out of view are hidden from the tab order and from screen readers. The toggles are announced as pressed or not.
Why doesn't the band above the track change size?
The three lists of differences are stacked in one cell and only the current one is visible, so the band always has the height of the longest. The same goes for masked and revealed values: they take the same row.