WorkflowAlea Pro

LogView

Log lines in a fast scroller: time, level as a colored badge, source and message on one line. Thousands of lines render smoothly.

import { LogView } from '@alea/pro';

Examples

Thousands of lines

Only the rows on screen render. Arrow keys move through the lines.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Color

--alea-text-muted…

Space

--alea-space-3…

Type

--alea-font-family-mono…

Props

`LogView` props

Log lines in a fast scroller: time, level as a colored badge, source and message on one line; arrow keys move through them.

Prop	Type	Default	Description
`aria-label`required	`string`	-	Name of the list.
`lines`required	`LogLine[]`	-	The lines, newest first or oldest first, as you want them shown. Thousands are fine: only the visible rows render.
`className`	`string`	-	Extra class names for the root element.
`height`	`number`	`480`	Height of the scroller in px. Default 480.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-log.alea-log-line.alea-log-source.alea-log-message

A listbox with the full count; each line is read as time, level, source and message.
The level is a word as well as a color.

Keyboard

Key	Does
`Tab`	Moves into the list
`Up` or `Down arrow`	Previous or next line
`Home` or `End`	First or last line

Do and don't

Pair it with a FilterBar for level, source and text.

Don't

Don't wrap messages: open the line for the full text.

In Figma

Log line with Level (info, warn, error, debug).