When to use
- A deployment or build detail page that streams logs as they arrive.
- Job output in a CI or agent product, where stages and a pass/fail state matter.
When not to use
- Scripted, illustrative commands: use Terminal.
- Searching or filtering a large log: a virtualised log explorer fits better.
- A dependency graph of jobs: use CI Pipeline.
Installation
pnpm dlx shadcn add @eased-pro/deploy-lognpx shadcn add @eased-pro/deploy-logyarn dlx shadcn add @eased-pro/deploy-logbunx --bun shadcn add @eased-pro/deploy-logNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
Install the dependencies
pnpm add motionnpm install motionyarn add motionbun add motionAdd the Eased pieces it builds on
Copy each item’s files the same way, or install them with the CLI:
Add the files
- components/eased/deploy-log/deploy-log.tsx
Source is included with Eased Pro. Members download the files with the CLI command above, or through the MCP server.
Keep the folder layout
The files import each other by relative path (
../lib/motion), so keep each one at the path shown, undercomponents/eased/.
Usage
import { DeployLog } from "@/components/eased/deploy-log/deploy-log";<DeployLog className="h-96" status="building" startedAt={startedAt} environment="Production" source="main · 4f9c2ab" lines={[ { id: "1", at: t0, kind: "install", title: "pnpm install --frozen-lockfile" }, { id: "2", at: t1, kind: "build", title: "Type error: Property 'currency' does not exist", tone: "danger" }, ]}/>API reference
DeployLog
| Prop | Type | Default | Description |
|---|---|---|---|
lines | TimelineEvent[] | Lines so far, oldest first. title is the text, kind the stage, tone the level (warning, danger), at when it printed. | |
status | "queued" | "building" | "ready" | "error" | "canceled" | Drives the pill, the counter and the stage marks. | |
startedAt / endedAt | number | Epoch ms; the counter rolls while building and freezes at endedAt. | |
environment | string | Shown beside the status, e.g. "Production". | |
source | ReactNode | A muted line under it: branch, commit, message. | |
stageLabels | Record<string, string> | Display names per stage id. Default: the id, capitalised. | |
label | string | "Build log" | Accessible name of the log. |
logRef | RefObject<HTMLDivElement> | The scrolling log, e.g. to scrub it to the top before a replay. Remount (key) to start a new run stuck to the bottom. | |
className | string | "" | Give it a height; the log scrolls inside. |
Accessibility
- The status pill is a
role="status"region; the log isrole="log"(polite, additions only) and keyboard-scrollable. - Each stage is a named
sectionwith anh3; line numbers are hidden from assistive tech. - The elapsed counter is read as "41 seconds", not digit by digit.
Motion
Lines arrive with no per-line animation (rule 84) and the log follows the newest on a smooth spring until you scroll up. Stage headers are sticky, so the current stage pins while its lines scroll past. A stage's spinner swaps (y + blur) to a check or cross that draws on the snappy spring. The first error line shakes once, 5px, over 400ms; the pill re-tints in 150ms and its label swaps. Reduced motion: no shake, marks cross-fade, scrolling jumps.
Notes for AI
Append lines as they stream and set status from your deploy API; the component works out stage boundaries, stage times and which line to shake. Keep kind stable per stage.
Don't animate lines yourself and don't wrap it in a scroll container: it scrolls and follows on its own.
Related components
- CI Pipeline: the jobs around this log.
- Code Block with Syntax Highlighting
- Package Manager Code Tabs