Deployment card
A deployment as it happens: the commit, a four-stage pipeline with a live timer, streaming logs that follow the tail until you scroll away, and the right action for every outcome.
Copy below cli npx shadcn add @bjork-ui/deployment-cardHow to use import { DeploymentCard } from "@/components/bjork-ui/cards/deployment-card" ; // Controlled, fed from your build events: <DeploymentCard project = "atlas-web" environment = "Production" commit ={{ sha: "a41f9c2" , message: "Cache route segments" , branch: "main" , author: "Rowan Ellis" }} url = "atlas-web.fieldwork.app" status ={deploy.status} // "queued" | "building" | "ready" | "error" | "canceled" stage ={deploy.stage} // "queued" | "build" | "checks" | "deploy" logs ={deploy.lines} // { t, text, level, stage }[] elapsed ={deploy.seconds} onCancel ={() => api.cancel(deploy.id)} onRedeploy ={() => api.redeploy(deploy.id)} /> // Or the built-in simulation: <DeploymentCard simulateOutcome = "error" defaultLogsOpen />