184 Components
Live Log Streamer
CardsDatadog and Cloudflare Workers inspired streaming terminal log viewer with log level filters (INFO, WARN, ERROR, DEBUG), auto-scroll lock, live pause/resume stream, search filtering, and copy logs.
edge-compute-gatewayTAILING
14:32:01.102INFO[worker.runtime]HTTP GET /api/v1/auth/session - 200 OK (22ms)
14:32:01.480DEBUG[db.pool]Releasing acquired client connection #12 to pool
14:32:02.015WARN[redis.cache]Cache miss for key 'sess_usr_94b'. Fetching from primary store.
14:32:02.890INFO[stripe.webhook]Webhook event 'customer.subscription.updated' processed successfully
14:32:03.420ERROR[dns.resolver]ETIMEDOUT connecting to upstream analytics-collector:53
5 events buffered
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/live-log-streamer.json"
Props
TypeScript props supported by <LiveLogStreamer />.
| Prop | Type | Default | Description |
|---|---|---|---|
| serviceName | string | "edge-compute-gateway" | Identifier for the service emitting logs. |
| maxBuffer | number | 100 | Maximum logs preserved in memory buffer before eviction. |
Key Features
- Live event stream with simulated real-time logs.
- Log level toggle buttons for INFO, WARN, ERROR, and DEBUG.
- Instant text filter across log messages and system sources.
- Auto-scroll lock with pause and resume controls.
Keyboard & Accessibility
- Monospace high-contrast developer theme with distinct semantic color badges.
- Keyboard accessible controls and clipboard copy.