shadcn.io is not affiliated with official shadcn/ui
No Environments Empty State Block for Radix UI
A config manager's empty environment list as three dashed isometric slabs that turn solid one at a time, with an Add variable row that counts variables on each slab and one Shine Button that names the next environment to create.
Installation
Overview
Turn an empty environment list into the first layer of settings, with this no environments empty state for React with Radix UI. A header sits over one framed panel ruled by Guides, split in two. At the start three isometric slabs, Development at the bottom, Staging in the middle and Production on top, each only dashed, over a list that counts the variables in each environment. At the end the message and the Shine Button, the only colored control, which creates the environments in order: its label names the next one, and pressing it turns the next slab solid. Below it an Add variable row (a key in capitals, a value and a native Select for which environment) comes alive once the first slab is solid, and each variable counts on its slab's line. The frame never changes size, and everything moves with CSS only. For the empty state of any settings, secrets or hosting console.
FAQ
What is saved, and how do I make it real?
Nothing. The environments and variables are text in the page's state and a reload clears them. Values are not encrypted or hidden here, so never type a real secret. To wire it for real, create the environment with your API where the code says so, store each variable on your server, and show masked values in your own list.
Why are the environments created in order?
The slabs stack, so the demo builds them from the bottom: Development, then Staging, then Production. The button's label always names the next one, and once all three exist it becomes a quiet, unavailable button that says so instead of disappearing, so focus never falls out of the page. Start over dashes the slabs again.
How do the variables work?
The key is shown in capitals and digits and underscores only; anything else is stripped as you type. A key must be new in the environment you pick, a value cannot be empty, and a demo environment holds four variables. A refusal says why in the line at the foot and, for a missing or repeated key or value, puts focus on the field to fix. Each variable adds one to the count on its slab's line, which is the list's way of saying what the drawing shows.
What does the Add to menu list?
All three environments, with the ones that do not exist yet unavailable. When you create an environment, it becomes the one the next variable goes to. It is a native select, so it opens the system's own list on a phone.
Is the drawing anything but decoration?
No. It is hidden from assistive technology; the list beside it says which environments exist and how many variables each holds. The slabs are one SVG whose classes change, so a dashed slab fades into a solid one with a CSS transition that is off under reduced motion.