# Deploy Pipeline

> Build, test and deploy steps run in turn with live timers and a filling line, ending on a pulsing Live badge or a clear failure with a retry.

Category: Feedback · MotionKit Plus · Updated 2026-10-23 · Live demo: https://motionkitui.com/components/deploy-pipeline

## When to use it

Hosting, CI and DevOps landing pages, internal dashboards showing real build status, and product tours explaining what happens when you push.

## How it works

Without statuses it's a simulation: once in view, one interval advances a small state machine (which step, when it started, the times so far), using performance.now for timers that stay accurate. Each finished step draws a tick and fills the line to the next one with a scaleY animation. A failing step stops the run, and the footer swaps between Building, Live with a pinging dot and the URL, or the failure with a Retry button. Pass a status on each step and it simply displays your real CI state instead.

## Installation

Part of MotionKit Plus (https://motionkitui.com/pricing). Subscribers install it with `npx shadcn@latest add @motionkit/deploy-pipeline` after adding their registry token from https://motionkitui.com/account.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `steps` | `PipelineStep[]` |  | Each step's name, detail, duration and, to drive it from CI, status. |
| `title` | `string` | `"web"` | Project name in the header. |
| `meta` | `string` | `"main · 4f2a91c"` | Branch, commit or similar. |
| `url` | `string` |  | Where it went live, shown when every step is done. |
| `failAt` | `number` |  | In a simulation, the step that fails. |

## Accessibility

- **Keyboard: Pass.** The only control, Retry or Redeploy, is a native button; the live URL is a real link.
- **Screen readers: Pass.** Steps are an ordered list with each status spelt out, and the outcome (deployed or failed) is announced.
- **Reduced motion: Pass.** With reduced motion on, a simulation shows its outcome straight away and nothing spins or pings.
- **Colour contrast: Pass.** Step names measure 17:1, details and timers 7.7:1, Live 9.4:1 and failures 8:1.