shadcn.io is not affiliated with official shadcn/ui
Deployment History Carousel Block for React
Deployments in three environment tabs with counts and a last status word, each a ruled ledger of the four latest builds, with a Redeploy on every row that adds a row at the top and drops the oldest.
Installation
Overview
Show where each build stands with this deployment history carousel for React with Base UI. Hullbright, a deploy dashboard, has three environment tabs, Production, Staging and Preview, each with its count and the status of its latest build as a word. Every slide is a ruled ledger of the four latest deployments: a commit hash in mono, a message and branch, a status as a glyph and a word (a solid dot for Ready, a crossed ring for Failed, a dashed ring for Canceled) and a fixed UTC time. A ghost Redeploy on a row adds a fresh Ready row at the top and the oldest slides out of view, so every ledger keeps four rows and the panel never changes height; nothing is deployed, and the page says so. The tabs are a hand-rolled row of native buttons: a press or an arrow key moves the track, and a swipe or the Previous and Next Buttons move the tab. On a phone a row's columns fold into its first cell. The ruled bands come from Guides. It's built from Carousel, Button and Guides, with CSS transitions only. The deployments and the product are made up.
FAQ
How do I use my own deployments?
Edit LINES. Each environment has one string per deployment in the form id|hash|message|branch|status|minute, newest first, where status is ready, failed or canceled and the minute counts from 00:00 UTC on AS_OF. The counts, the last-status words and the rows are all made from those lines.
How does it work with a keyboard?
Tab reaches the tabs, then Previous and Next. Only the open tab is a tab stop; the Left and Right arrow keys (mirrored in a right-to-left layout) move to the next or previous tab and open it, and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled, so focus never disappears. Slides that are out of view are hidden from the tab order and from screen readers.
What does Redeploy do?
In the demo it only changes the page: a new Ready row appears at the top of that environment, the oldest row leaves the four in view, the tab's count goes up by one and focus moves to the new row's button. The foot says "Redeployed in this demo". To make it real, call your deploy API in the handler and add the row when it answers.
What is announced when it moves?
The foot line is the block's one polite live region: after each move a screen reader hears it, for example "Redeployed in this demo". The track itself is silent, so the same slide is not read twice.