/
1.1k
Sponsor

Log

Scrolling log viewer with severity levels and filtering

Terminal

Installation

$ pnpm dlx shadcn@latest add @termcn/ink/log

Usage

import { Log } from "@/components/ui/log";
<Log
  entries={[
    { level: "info", message: "Server started on port 3000" },
    { level: "warn", message: "Deprecated API call detected" },
    { level: "error", message: "Failed to connect to database" },
  ]}
  height={10}
  showTimestamp
  follow
/>

API Reference

Log

PropTypeDefault
entriesLogEntry[]required
heightnumber10
showTimestampbooleantrue
filterstring-
followbooleanfalse

LogEntry

PropTypeDefault
level"debug" | "info" | "warn" | "error"required
messagestringrequired
timestampDate-

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

  • Keyboard: Arrow keys move the current item or viewport; Home / End move to the boundaries; PageUp / PageDown move by a page; Enter / Space select or expand when supported; Tab / Shift+Tab leave the composite.
  • Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
  • Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.