Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Blue Green Swap Zero Downtime Deploy Block for Svelte

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

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 zero-downtime deploy for Svelte with Ark UI, written for Swapwell, a fictional deploy orchestrator. A centred header sits over one framed figure: two environment cells, Blue (v5.4.0, live) and Green (v5.5.0, warming up), split by a divider that meets the frame's top rule at a + mark. Each cell shows its role as an icon and a word, its six instances as dots (a filled dot is up, a ringed one is starting, a dashed one is stopped) and the same facts in text, with its share of traffic as a rolling number. Under them a toggle group (0, 10, 50, 100 percent) chooses how much traffic goes to green, and that one choice redraws everything: the split bar, the dots, the roles (Live, Warming up, Taking traffic, Draining) and the phase list (Provision, Health checks, Shift traffic, Retire blue), whose steps read Done, Now or Next as a shape and a word. "Downtime 0 s" stays on screen throughout. The choice only redraws the figure; nothing is deployed. It's built from Toggle Group, Badge, Sliding Number and Guides, with CSS only for the entrance and the bar's width, and your theme's tokens for every colour. On a phone the cells stack and the four phases list one under another. The versions, counts and instance numbers are example data.

FAQ

How do I change the stages, instances and phases?

Edit the typed lists at the top of the file: STAGES holds, per toggle choice, the percent of traffic on green, the role and how many of the six instances are up in each environment, and which phase is under way; PHASES holds the four steps; INSTANCES is the number of dots. The traffic bar, the dots, the shares and the status line are all derived from the chosen stage, so they always agree. The versions and numbers are example data.

Does it deploy anything?

No. The toggle group only chooses which stage of the swap the figure shows. There is no request and no timer; a polite status line states the choice for screen readers ("Green v5.5 takes 50% of traffic and blue v5.4 50%. Shift traffic is under way. Downtime 0 seconds."). Hook the choice to your own deploy API if you want it to act.

How are states told apart without colour?

Every state is a shape and a word: a role badge with an icon and its label, instance dots that are filled, ringed or dashed beside a sentence such as "4 of 6 instances up, 2 starting", and phase markers that are a checked filled square (Done), a half-filled square (Now) or an empty one (Next), each with its word. The block uses foreground weights only, so it reads the same in any theme.

How does the toggle group work with the keyboard?

It is one tab stop; the arrow keys move between 0, 10, 50 and 100 percent and Space or Enter chooses. The group is a radio group of toggle buttons, so the arrow keys move and the choice follows with Space or Enter.

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

Below md the two cells stack with a rule between them, the toggle group fills the width and the phases list one under another. In a right-to-left layout the cells, labels and phases mirror, while the version numbers, the dots and the traffic bar keep their own left-to-right direction so Blue stays before Green.

All 200 changelog blocks