shadcn.io is not affiliated with official shadcn/ui
DevOps Platform Sidebar Block for Vue
A deploy platform in a fixed-height window whose slim sidebar has a Dev, Staging and Prod control that asks in an alert dialog before Production, then marks the rail and guards Deploy and Rollback.
Installation
Overview
Guard the dangerous environment with this devops platform sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds a slim Sidebar for Kelpdeck, a deploy platform. A Segment Group in the header picks Dev, Staging or Prod. Choosing Prod opens an Alert Dialog that asks Switch to Production, with Cancel first, and the control only moves when you confirm. In Production a band tops the rail with a dot, the word and a hairline, and the Deploy and Rollback rows say Asks to confirm. On their pages the same dialog asks before a service changes version there. Built from Sidebar, Segment Group, Alert Dialog, Status and Guides, with a CSS entrance only. For deploy tools and admin consoles where one environment is live.
FAQ
What does the confirmation guard?
Switching to Production, and then each Deploy or Rollback while you are in Production. Dev and Staging change at once. Cancel is the first control in the dialog, so Enter on a stray key press never confirms.
How does the rail show that I am in Production?
A band at the top of the rail names the environment with a dot, the word Production and a hairline above and below it, in a heavier weight. It uses no red surface and no colour as the only signal. Folded to icons the dot stays.
Where does focus go after the dialog closes?
Back to the control that opened it: the chosen segment after a switch, or the row's Deploy or Rollback button after an action. The block moves it in a short timeout because the libraries differ in where they leave it.
What stays in the page, and how do I connect it?
Everything. The versions are typed at the top of the file and Deploy and Rollback only change this window's state, with the status line saying nothing ran. Call your deploy API in the confirm handler and keep the environment on the server as well.
What happens when the sidebar folds to icons?
The rail keeps the five pages as icons with tooltips that say which ask to confirm, and the band shrinks to its dot. The segment control is hidden while folded. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a page closes the sheet; the page header badge shows the environment even when the rail is hidden. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.