Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Lanes With Gates Release Train Block for Svelte

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A release-train schedule for Svelte with Ark 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. The trigger takes asChild so the gate stays a native button.

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".

What happens on a phone?

The table keeps its width inside a labelled scroll region you can reach with the keyboard, and the train's name stays pinned at the start while the stations scroll under it.

Does it work in a right-to-left layout?

Yes. The stations run from the right, the hairlines and the pinned name follow the direction, and versions and times are isolated so they keep their order.

All 200 changelog blocks