Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Environment Promotion Ladder Changelog Block for Vue

A promotion ladder of four stages as rows with a rollout bar, time in stage and a Collapsible that lists each stage's gates.

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

An environment-rollout changelog for Vue with Ark UI, written for Ladderline, a fictional delivery platform. Four stages (Dev, Staging, Canary, Production) run as rows rail to rail under a band rule, joined by a hairline from rung to rung. A header counts from the data how many stages have passed v7.3.0 ("v7.3.0 has climbed 2 of 4 stages"). Each row names its stage with a shape (a filled square with a check once promoted, a half one while rolling out, an empty one while it waits) and a sentence that comes from the data ("Promoted", "25% of traffic", "v7.3.0 waits on 2 checks"), the version in mono, a rollout bar with its percentage and the time it has spent in the stage. A trigger says how many gates passed and opens that stage's gates in a Collapsible: each gate is a check or a clock and a word. The Canary row is open on load and any row can be open together. It's built from Guides, Collapsible and Progress, with CSS transitions for the entrance and your theme's tokens for every colour. For release dashboards and delivery pages. The stages are example data.

FAQ

How do I change the stages and gates?

Edit STAGES at the top of the file. A stage has a name, the version it runs, its rollout percentage, the minutes it has run that version and a list of gates, each a name, a note and whether it passed. The headline, the "3 of 4 gates passed" triggers, the sentences under the names and the times ("1 d 4 h") are computed from that data.

Why does Production show an older version?

Because v7.3.0 has not been promoted there yet. Production keeps running v7.2.4 at 100%, and its gates are the checks that v7.3.0 still has to pass, so its sentence reads "v7.3.0 waits on 2 checks". A stage is called promoted only when it runs the newest version at 100% with every gate passed.

How do the gate lists open?

Each row's trigger is a button with the count of passed gates; Enter or Space opens its list, and any number of rows can be open together. A closed list is inert, so its contents are out of reach of the keyboard on every library. Nothing is promoted: the block only shows state.

How are the states told apart without colour?

By shape and word: a filled square with a check for a promoted stage, a half-filled square for one rolling out, an empty square for one that waits; a check or a clock and the word "Passed" or "Waiting" for each gate. All of it is in the foreground colour.

How does it fit on a phone and in a right-to-left layout?

On a phone the version and the time share a line under the name, the bar and the trigger follow, and the gates open under the row. In a right-to-left layout the rung line, the half-filled square and the bars mirror while versions and times keep their reading order.

What moves, and what happens with reduced motion?

The header and the ladder fade up once on load, with CSS transitions; the chevron turns when a row opens. With reduced motion they are off.

All 200 changelog blocks