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.
acme-web
main · 4f2a91c
Install: pending
npm ci
Build: pending
next build
Test: pending
vitest run
Deploy: pending
edge · 18 regions
Customize
Usage
import { DeployPipeline } from "@/components/motionkit/deploy-pipeline";
<DeployPipeline
steps={[
{ name: "Install", detail: "npm ci", duration: 1.4 },
{ name: "Build", detail: "next build", duration: 2.6 },
{ name: "Test", detail: "vitest run", duration: 1.8 },
{ name: "Deploy", detail: "edge · 18 regions", duration: 1.2 },
]}
/>
// to show real status, give each step one: { name: "Build", duration: 42, status: "running" }Motion
The exact curves this component runs, plotted with Motion's own maths.
Running spinner
A step is running
Line fill
A step finishes
Hosting, CI and DevOps landing pages, internal dashboards showing real build status, and product tours explaining what happens when you push.
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.
| 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. |
How we audit: the WCAG 2.2 animation checklist and respecting reduced motion in React.
Yes. The file starts with "use client", so you can import it straight into a Server Component page or layout. It works in Vite as is, and in Astro as a React island.
Only the motion package, beside React and Tailwind CSS v4. There is no MotionKit package and no Tailwind config to add.
Yes, with MotionKit Plus. Add the @motionkit registry and your personal token to components.json (the snippet is on your account page), then run npx shadcn@latest add @motionkit/deploy-pipeline. It saves the file to components/motionkit and installs its dependencies.
Deploy Pipeline is part of MotionKit Plus (£12 a month or £96 a year). The live preview and playground are free to explore; Plus unlocks its source code, every customisation control and commercial use.
With reduced motion on, a simulation shows its outcome straight away and nothing spins or pings.
Yes. Give each step a status (pending, running, done or failed) and a duration, update them from your CI webhooks or polling, and the component renders that state instead of simulating.
Status Dot
A live status indicator for services and deploys: the dot blends between colours and pulses softly only when something needs attention.
Toast
Stacking notifications with swipe-to-dismiss, hover-to-pause and variants.
Stepper
Progress through steps: the line fills, and each finished step draws its own tick.
acme-web
main · 4f2a91c
Install: pending
npm ci
Build: pending
next build
Test: pending
vitest run
Deploy: pending
edge · 18 regions
Customize
Usage
import { DeployPipeline } from "@/components/motionkit/deploy-pipeline";
<DeployPipeline
steps={[
{ name: "Install", detail: "npm ci", duration: 1.4 },
{ name: "Build", detail: "next build", duration: 2.6 },
{ name: "Test", detail: "vitest run", duration: 1.8 },
{ name: "Deploy", detail: "edge · 18 regions", duration: 1.2 },
]}
/>
// to show real status, give each step one: { name: "Build", duration: 42, status: "running" }Motion
The exact curves this component runs, plotted with Motion's own maths.
Running spinner
A step is running
Line fill
A step finishes
The live preview is free to explore. Plus unlocks the source for Deploy Pipeline and every other premium component.