# Log viewer

> Live log stream with level filters, search and follow mode.

Component · Pro · https://lodeui.com/components/log-viewer

## When to use

- Streaming build, function or request logs.

## When not to use

- Millions of lines: virtualize or page on the server.

## Installation

```bash
npx shadcn@latest add @lode/log-viewer
```

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

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { LogViewer } from "@/components/ui/log-viewer";

export function BuildLogs({ entries }: { entries: { id: string; time: string; level: "info" | "warn" | "error" | "debug"; message: string }[] }) {
  return <LogViewer entries={entries} live height={400} />;
}
```

## API reference

### LogViewer

Searchable, level-filtered log stream with follow mode.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| entries | `{ id; time; level; message; source? }[]` | – | level: debug, info, warn or error. |
| live | `boolean` | – | New entries scroll into view unless paused. |
| height | `number` | `360` | Viewport height in px. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach search, level filters and Follow |

## Accessibility

- role="log" with aria-live.
- Level filters are toggle buttons with aria-pressed.

## Motion

- No entry animation, so fast streams stay readable.
- Follow mode keeps the newest line in view.

## Responsive behavior

- Lines wrap on phones; the toolbar wraps.

## Performance

- Filtering is in memory; cap the buffer to a few thousand entries.

## Notes for AI

- Append new entries to the end of the array.

## Related

- [Terminal](https://lodeui.com/components/terminal) — A terminal window that types commands and streams output, with replay and copy.
- [Timeline](https://lodeui.com/components/timeline) — Vertical activity timeline with toned icons that stagger in.
- [JSON viewer](https://lodeui.com/components/json-viewer) — Collapsible, syntax-colored JSON tree.