shadcn.io is not affiliated with official shadcn/ui
No Deployments Empty State Block for Svelte
A deploy platform's first-deployment page as a split screen: an environment, a Skip tests switch and a dark terminal whose command follows them, one Copy command button, and a sample run that lists a first deployment while a drawn balloon fills.
Installation
Overview
Turn an empty deployment list into the command that fills it, with this no deployments empty state for Svelte with Ark UI. The page is Moorage, a deploy platform: the rails of the page and one band across it are split in two, the drawing first. The drawing is a dock with a hot-air balloon on a dashed tether, an outline until something is moored. At the end the heading, one sentence, a native Select for the environment, a Switch for Skip tests, and a terminal whose command follows both as you change them. The Shine Button, the only colored control, Copy command, puts that command on your clipboard. A Show a sample run button prints typed output in the terminal once and lists a first deployment, and the tether turns solid. The block follows the theme; only the terminal is dark, as terminals are. The frame is ruled by Guides, and everything moves with CSS only. For the first screen of any hosting, CI or release tool.
FAQ
Does anything get deployed, and what stays in the page?
No. The page never runs the command; it prints it for you to run in your own project. The sample run is typed text at fixed times, the deployment it lists is a row in the page's state, and the host in its last line is made up. A reload clears it, and Start over clears it without one. To wire it for real, list the deployments your API returns instead of the typed row.
How does the command follow the controls?
It is built from the environment you pick and the switch: moorage deploy --env staging, with --skip-tests added when the switch is on. The terminal's command is a labelled region that scrolls sideways on a narrow screen, so a long command never makes the page scroll. The Copy command button copies exactly what is shown, and a polite line says it worked or that the clipboard refused it.
Why is the terminal dark in a light theme?
Terminals are dark by nature, so this one carries its own dark scope while everything around it follows the theme (a code comment says so). Its text is real text, its output is a log region you can focus and scroll with the keyboard, and its muted lines pass contrast in the dark scope.
What does Show a sample run do?
It prints six typed lines, each fading in a moment after the last, with the environment and the switch you had at that moment, and lists Deployment 1 under the terminal. The tether in the drawing turns solid and the balloon fills. The entrance is a CSS transition and shows all at once under reduced motion. Start over, which stays quiet until there is a deployment, puts the dashed tether back and focus on Copy command.