Log Stream

ProNew

A live log viewer with level filters, text search, pause and follow-tail scrolling.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/log-stream

Prop	Type	Default	Description
`lines`	`LogLine[]`	-	All lines so far, oldest first. Each has `id`, `time`, `level`, `message` and optional `source`.
`title`	`string`	`Logs`	Heading in the toolbar.
`maxLines`	`number`	`1000`	Most lines kept on screen.
`follow`	`boolean`	`true`	Stick to the newest line while scrolled to the bottom.
`height`	`string`	`20rem`	Height of the log area.
`wrap`	`boolean`	`false`	Initial wrap state for long messages.
`hideSource`	`boolean`	`false`	Hide the source column.
`onClear`	`() => void`	-	Adds a Clear button that calls this.
`emptyText`	`string`	`Waiting for output…`	Shown when there are no lines yet.

Also accepts all <div> props except title.

Pausing freezes the view; new lines are counted and shown in a jump button.
The log area has role="log" with aria-live="off", so fast streams do not flood screen readers.
Times are shown as HH:MM:SS.mmm in UTC.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/log-stream

Prop	Type	Default	Description
`lines`	`LogLine[]`	-	All lines so far, oldest first. Each has `id`, `time`, `level`, `message` and optional `source`.
`title`	`string`	`Logs`	Heading in the toolbar.
`maxLines`	`number`	`1000`	Most lines kept on screen.
`follow`	`boolean`	`true`	Stick to the newest line while scrolled to the bottom.
`height`	`string`	`20rem`	Height of the log area.
`wrap`	`boolean`	`false`	Initial wrap state for long messages.
`hideSource`	`boolean`	`false`	Hide the source column.
`onClear`	`() => void`	-	Adds a Clear button that calls this.
`emptyText`	`string`	`Waiting for output…`	Shown when there are no lines yet.

Also accepts all <div> props except title.

Pausing freezes the view; new lines are counted and shown in a jump button.
The log area has role="log" with aria-live="off", so fast streams do not flood screen readers.
Times are shown as HH:MM:SS.mmm in UTC.