shadcn.io is not affiliated with official shadcn/ui
Lanes With Gates Release Train Block for React
A release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.
Installation
Overview
A release-train schedule for React with Base UI, written for Trainyard, a fictional release scheduler. A centred header says which train leaves next, counted from the data. Under a band rule that meets the rails, one table runs rail to rail: a lane per train (v9.1, v9.2, v9.3) and a column per station (Dev, Staging, Canary, Production). Each cell is a gate on a hairline that turns solid up to the station a train has reached; a gate is a shape and a word (a checked filled square for Passed, a half-filled one for Running, an empty one for Waiting). Each gate is a button that opens a hover card listing its checks, each with its own state, and says "2 of 3 checks passed" to screen readers. The lane ends with the departure day and time in UTC. The block ends on the last lane. On a phone the table scrolls sideways in a labelled region and the train's name stays pinned. It's built from Hover Card, Guides and a native table, with your theme's tokens for every colour. The trains, checks and times are example data.
FAQ
How do I change the trains, stations and checks?
Edit STATIONS (each with its list of checks) and TRAINS (a version, a kind, a change count, a departure as an ISO date and time, how many stations it has passed and how many checks of the running station have passed) at the top of the file. Every gate's state, the checks in its card, the header's "leaves on" line and the screen-reader sentences come from those two lists.
How do I see a gate's checks, and does it work on touch?
Hover a gate or focus it with the keyboard and a card lists the station's checks with Passed, Running or Waiting beside each. The card is for extra detail only: the gate's own button already says its station, its state and "N of M checks passed" in text for screen readers, and touch devices read that same state from the shape and the word under the gate.
Base UI's preview card trigger renders the native button with render.
How are gates told apart without colour?
Each gate is a shape and a word, and the hairline between gates is solid up to the gate a train has reached and light after it. The train that has already departed shows four checked squares and "Departed".
Related
- Pro
Blue Green Swap Zero Downtime Deploy
Deploys and rolloutsA blue-green swap for a deploy tool: two environment cells with instance dots, a 0, 10, 50 and 100 percent traffic toggle that redraws the split bar, the dots and the phase list, and a fixed Downtime 0 s.
- Pro
Percentage Fill Region Rollout
Deploys and rolloutsSix regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.
- Pro
Environment Promotion Ladder Changelog
Deploys and rolloutsA promotion ladder of four stages as rows with a rollout bar, time in stage and a Collapsible that lists each stage's gates.
- Pro
Canary Release Ramp Changelog
Deploys and rolloutsA split with a five-step canary ramp as buttons at the start and, at the end, the chosen step as canary against stable in two cells with a guard-rail bar.
- Pro
Release Countdown Changelog
Spotlights and mediaA countdown to the next release of a launch scheduler, in a split: a framed live countdown, the three scheduled changes as a numbered list with type tags, and a Remind me button that turns to Reminder set and back.
- Pro
Release Blockers Changelog
Deploys and rolloutsA verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.