shadcn.io is not affiliated with official shadcn/ui
Environment Status Dashboard Block for Radix UI
Six environments on leases, each with its version, state, daily cost and expiry, where Extend 24 h pushes a lease back, Tear down asks first, and the daily total in the header follows.
Installation
Overview
Keep short-lived environments from piling up with this environment lease dashboard for React with Radix UI. A compact header says how many environments exist and what they cost a day, and a hairline frame lists six Stagehall environments: Production, Staging, two pull request previews, a sales demo and a load test. Each row shows the version in mono, the state, the daily cost and when the lease ends, with the time to go and a plain note when it ends soon. Production has no lease and no buttons. Extend 24 h pushes a lease a day further, up to three times. Tear down asks first in an Alert Dialog with focus on Cancel; the row then stays in place as torn down with a Bring back button, and the totals follow. It is built from Alert Dialog, Button and Guides. For platform teams who pay for what they forget to remove.
FAQ
How do I add an environment?
Add an object to ENVIRONMENTS: an id, a name, a version, a state, the cost in dollars a day and the lease as a UTC timestamp, or NO_LEASE for one that never expires. AS_OF is the moment every "in 11 h" is counted from, so the page never depends on the clock.
How do leases and extensions work?
Each press of Extend 24 h adds a day to that lease in the page. After three extensions the button stays focusable but answers that the lease can't be extended again. A lease ending within 12 hours is marked in words as ending soon.
What does Tear down do?
It opens an alert dialog naming the environment and what stops costing. The dialog doesn't close on an outside click, and focus starts on Cancel. Confirming marks the row as torn down in place, takes its cost out of the header, and moves focus to its Bring back button; Cancel returns focus to Tear down. The dialog's initial focus option puts focus on Cancel.
What stays local in the demo?
Everything. Extending, tearing down and bringing back change the page's state and say so in the polite status line; nothing is created or deleted. In your app call your infrastructure service from extend, confirm and back.