shadcn.io is not affiliated with official shadcn/ui
Instance Provisioned Success Block for Radix UI
A confirmation window for a new server: a list of its facts beside three connect tabs (SSH, SFTP and Docker context) with copyable commands, and the 48 seconds it took as four steps on a time axis.
Installation
Overview
Hand over a new server with its connection details with this confirmation window for React with Radix UI. It is the Hostlark console, a VPS host, just after an instance came online, in a fixed-height window with no title bar: a top bar with a success mark, the heading and the one action, the Shine Button that opens the console. The page side has two panes. The first is a list of the server's facts: its region, size, disk, image, hostname, two addresses and how people sign in. The second is Connect, with three Tabs for SSH, SFTP and Docker context, each holding two commands in code boxes that follow the theme, every one with a Copy Button. Under the tabs the time it took is drawn as four steps on a 0 to 48 second axis. For hosting, VPS and any server you hand to its owner.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was provisioned and no credential exists. The server, its hostname (under .example), its addresses (from the documentation blocks) and the four steps with their seconds are typed sample data. What the browser really does is real: the copy buttons write to the clipboard. To wire it, fill SPECS and HOST from the instance record, WAYS with the commands your service supports and STEPS from the provisioning events; the total, each bar's start and its length are worked out from the seconds.
How do the connect tabs and the copy buttons work?
The three tabs hold the same shape: two commands, each in a code box that scrolls sideways when it is long, with its own copy button, and a one-line hint. The arrow keys move between the tabs. Choosing a tab or copying a command updates the window's one live line at the foot (for example Copied the SSH command), and the window never changes height because every tab holds the same number of rows. A copy button writes exactly the text in its box and says what it copied.
Where is the password?
There is none. The server signs people in with a key only, and the list says so, so no password or secret appears anywhere in the window. If your service hands one out, show it as a masked placeholder with a Reveal button that you control; this demo never shows one.
How is the 48 seconds drawn?
As four steps (queued, disk built, booted, joined the network) on a shared axis from 0 to the total. Each bar starts where the step before it ended and is as long as its own seconds, in percent of the total, and the seconds are also written beside each bar, so the drawing is never the only way to read it. The total in the heading is the sum of the four numbers.
How does the window behave on a phone?
It keeps its height (36rem on a phone, 46rem from the medium breakpoint) and scrolls inside itself. The list of facts comes first and the tabs under it; the Image and IPv6 rows fold away below the small breakpoint so the tabs come closer, the command boxes scroll sideways, and the top bar's action reads Console.
Where does the link go?
Open the console is the Shine Button in the top bar. It is a link to your own route. It is a Shine Button with asChild around an a element.