shadcn.io is not affiliated with official shadcn/ui
Environment Setup Onboarding Block for React Aria
A hosting step with three connected cells, Development, Staging and Production, each with an address checked in words and an approval switch that is locked on for Production.
Installation
Overview
Let a new user say where their app will run, with this environments step for React with React Aria. It is a step of Berthwick, an app hosting platform, as a whole screen: the page's rails and one band across it, the step header (“Step 3 of 5” and a hairline), the heading and one framed card. The card is a chain of three cells on shared hairlines, Development, Staging and Production, side by side from the medium breakpoint and one under another on a phone, each with a line saying where code goes next. Each cell has an address Input, checked as you type and said in words with a glyph (“Valid.”, “Check the address: start with https://”), and a Switch for “Require approval to deploy”, which is on and locked for Production. Under the cells a sentence counts the valid addresses. Create environments is the one Shine Button, with a ghost Skip for now.
FAQ
What counts as a valid address?
It has to start with https://, name a host with at least one dot (letters, digits and hyphens), and may have a port and a path. No two environments may share an address. verdictOf returns the verdict and the sentence for one address, given all three, and the line under each field is always reserved so nothing moves when it changes. Replace it with a check against your own rules, or a lookup on your server.
What if an address is missing or wrong?
Create environments stays in the tab order and looks quiet until all three are valid. Pressing it says which one is wrong (“Not created. Production: Add an address.”), marks the fields that need attention and puts focus on the first one. Nothing is cleared.
Why is Production's switch locked?
Because a deploy to the place your customers use is the one that should always be approved. The switch is checked and disabled with the words “On for Production” beside it; Development and Staging start off and can be turned on.
What does a screen reader hear?
One polite status, present from load. Typing does not announce each letter: what the addresses add up to (“2 of 3 addresses valid.”) is spoken once typing has rested for a moment, and results (created, skipped, refused) are spoken at once.
What stays local in the demo, and how do I wire it?
Everything: the addresses are typed here, the host names are .example ones and Create environments only says it was saved in this demo. In your app create the environments where submit says so, store the approval rule with each, and keep Production's rule on the server too.
How does it look on a phone?
The three cells stack as one chain, each with a downward arrow before the next, and the heading's sentence is kept for screen readers only to save room. Create environments pins to the foot of the screen with Skip for now beside it, so the primary is in reach at every scroll position.