# Deployments

> Deployment history with status, branch and commit, live build logs and redeploy.

Block · Pro · https://lodeui.com/blocks/deployments

## When to use

- CI/CD and hosting dashboards.

## When not to use

- Runtime logs: use the log viewer.

## Installation

```bash
npx shadcn@latest add @lode/deployments
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Deployments } from "@/components/blocks/deployments";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <Deployments />
    </main>
  );
}
```

Built from: Badge, Button, Terminal

## API reference

### Deployments

Deployment history with status, branch, commit and author, a streaming build log and failed output. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through deployments and actions |
| Enter / Space | Select a deployment |

## Accessibility

- The selected deployment uses aria-pressed.
- Status is text in a badge.

## Motion

- The build log types out like a terminal.

## Responsive behavior

- The log moves under the list below 1024px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Stream real log lines into the Terminal lines array.

## Related

- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [Log viewer](https://lodeui.com/components/log-viewer) — Live log stream with level filters, search and follow mode.
- [Badge](https://lodeui.com/components/badge) — Tone badges and status dots for states like paid, pending, live and degraded.