127 Components

Deployment Timeline

Motion

Vercel-inspired deployment pipeline stepper with multi-phase statuses, elapsed timers, commit SHA metadata, and an interactive streaming build stdout log console.

This item is a full-section Block · View in Dedicated Block Showcase

▲

pulseui.dev

Deploying...

main

PHASE 01

Queued

Assigned to build runner-west-04

DONE

PHASE 02

Building

Running turbo build & asset optimization

IN PROGRESS3.4s

PHASE 03

Assigning Domains

Propagating DNS & edge worker routes

PENDING

PHASE 04

Ready

Deployment live globally in 310 regions

PENDING

Build Stdout Logs•Streaming live

6 events logged

1[runner] Initializing isolated microVM container...

2[git] Fetching origin/main @ commit a89e4c1...

3[cache] Restoring Turborepo lockfile hash (98.2% cache hit)...

4[pnpm] Resolving dependencies with frozen-lockfile...

5[next] Creating optimized production build...

6[next] ✓ Compiled client and server bundles in 842ms

ELAPSED TOTAL: 3.4s

EDGE WORKERS: 310 REGIONS ROUTED

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge

$npx shadcn@latest add "https://boseui.site/r/deployment-timeline.json"

Props

TypeScript props supported by <DeploymentTimeline />.

4 props

Prop	Type	Default	Description
commitSha	`string`	`"a89e4c1"`	Git commit hash associated with the pipeline run.
branch	`string`	`"main"`	Repository branch triggered for continuous deployment.
autoPlay	`boolean`	`true`	Whether the deployment simulation advances through stages automatically.
className	`string`	—	Optional custom classes applied to the root container.

Key Features

Four-phase deployment workflow: Queued, Building, Assigning Domains, and Production Ready.
Animated spinners, real-time elapsed timer clocks, and automated state transitions.
Live simulated stdout log terminal with ANSI-styled build step outputs and auto-scroll.
Interactive simulation toolbar to restart deployments, simulate failures, copy commit SHAs, and toggle log streams.

Keyboard & Accessibility

Pipeline status steps provide aria-current and status badges with high contrast text.
Live terminal console exposes an accessible aria-live region for screen reader progress announcements.
Log viewer is scrollable and supports standard keyboard navigation.

Cursor Follower

Diff Viewer