Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Steps Chain Release Approval Flow Block for Vue

A release sign-off split: a summary of the release at the start, and a vertical approval chain at the end with people, states and times, an Approve button that advances it in the demo, a progress bar and a Deploy button that gives a stated demo result.

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 approval flow for Vue with Ark UI, written for Cosignly, a fictional release sign-off tool. A split behind a divider that runs from the page's top rule: at the start the title and a ruled list of the release (version, changes, deploy window, rollback plan); at the end the approval chain, drawn with the catalog's vertical Steps: Author, Peer review, Security review and Release manager, each with an initials avatar, a person, what they check, a state in words and a time. A bar counts "2 of 4 approved". The current stage has an Approve button; pressing it advances the chain, moves focus to the next action and announces it, and the stage reads "Approved in this demo" because nothing leaves the page. Once the last stage is approved the one Shine Button, "Deploy v4.2.0", appears; pressing it says "Deploy of v4.2.0 queued in this demo. Nothing was shipped." and a ghost button resets the demo. On a phone the summary comes first, ruled from the chain. It's built from Steps, Avatar, Progress, Button and Shine Button, with your theme's tokens for every colour. The people, times and release are example data.

FAQ

How do I change the chain and the people?

Edit STAGES (an id, a title, a person with initials, what the stage checks and the time it was approved, empty until then), START (how many were approved when the page loads) and FACTS (the release summary) at the top of the file. The bar, the states and the sentences are derived from the number approved.

What do Approve and Deploy really do?

Nothing outside the page. Approve changes the block's own state, and the stage then says "Approved in this demo"; Deploy only shows a stated result ("queued in this demo"). Wire approve and deploy to your own API to make them real; keep the same live announcements.

Where does focus go after I press Approve?

Pressing a button removes it, so focus moves to the next action: the following stage's Approve button, then Deploy, then, after Deploy, the Reset button. A polite status line reads the result for screen readers.

How is the chain announced?

It is a list named "Approval chain". Each stage's name is followed by its state in words (Approved, Awaiting approval or Waiting), so nothing depends on the check marks or the filled markers. The button is the catalog Button and takes onClick.

What changes on a phone and in right-to-left?

The summary comes first, then a rule, then the chain. In a right-to-left layout the rail, markers and text mirror, while versions, times and counts keep their own order.

All 200 changelog blocks