An operations bento where every tile streams: a scrolling request chart with a rolling counter, a deploy log that writes itself, edge regions with routes drawing across a dotted map, an on-call chat and a day calendar with a moving now line.
Live right now
Metrics, logs, regions, people and the calendar, all streaming. No refresh button anywhere.
npx shadcn@latest add https://hyperblur.dev/r/bento-live-widgets.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-live-widgets.tsx.
import { BentoLiveWidgets } from "@/components/hyperblur/bento-live-widgets"
<BentoLiveWidgets speed={1} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Live right now" | Label with a recording dot. |
| title | string | "Your whole operation, breathing on one screen" | Section heading. |
| subtitle | string | "Metrics, logs, regions..." | Paragraph under the heading. |
| cta | { label: string; href: string } | null | { label: "Open the live demo", href: "#" } | Button beside the heading. |
| accent | string | "#3b82f6" | Accent for the chart, routes, chat and calendar. |
| speed | number | 1 | Multiplier for every loop. 2 runs twice as fast. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |