ConsoleLog
Monospace console output for displaying system logs, activity feeds, and real-time status updates in ERP dashboards.
Installation
$ npx shadcn@latest add console-logPreview
Live Console Output
> System Initialized.
> Database backup completed successfully.
> API nodes reporting healthy status (99.99%).
> Consolidate Q2 Ledger action executed.
Usage (React/TSX)
"use client"
import { ConsoleLog } from "@/components/ui/console-log"
import { useState } from "react"
export default function SystemMonitor() {
const [logs, setLogs] = useState([
"System Initialized.",
"Database backup completed.",
])
const handleAction = () => {
setLogs(prev => [
"Processing: Consolidate Q2 Ledger...",
...prev,
])
}
return (
<div>
<button onClick={handleAction}>Run Action</button>
<ConsoleLog logs={logs} maxLogs={8} />
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| logs | string[] | — | Array of log messages to display. |
| maxLogs | number | 5 | Maximum number of logs to display. |
| label | string | "Live Console Output" | Section label above the console. |
| className | string | — | Additional CSS classes to apply. |