An asymmetric four-column bento with a revenue chart that switches range, a sprint calendar, working automation toggles, live presence and a typing command bar.
Workspace
Northwind brings revenue, schedules, automations and your whole team into a single surface that updates the moment anything changes.
Explore the platformSprints, reviews and launches on one shared calendar.
Live presence and cursors on every doc.
Jump to any project, run an action or invite a teammate without touching the mouse.
npx shadcn@latest add https://hyperblur.dev/r/bento-product.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bento-product.tsx.
import { BentoProduct } from "@/components/hyperblur/bento-product"
<BentoProduct accent="#8b5cf6" onAutomationChange={(i, on) => console.log(i, on)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Workspace" | Small label above the title. Pass an empty string to hide it. |
| title | string | "Plan, ship and stay in sync from one calm workspace" | Section heading. |
| subtitle | string | "Northwind brings revenue, schedules..." | Supporting paragraph next to the title. |
| cta | { label: string; href: string } | null | { label: "Explore the platform", href: "#" } | Pill link beside the title. Pass null to hide it. |
| automations | { label: string; detail?: string; enabled?: boolean }[] | 3 automations | Rows in the toggle cell. `enabled` sets each switch's initial state. |
| people | { name: string; status: string; color?: string }[] | 4 teammates | People in the presence cell. The first name labels the moving cursor; the last person shows as away. |
| command | string | "Create issue in Q4 Launch" | Text typed into the command bar. |
| onAutomationChange | (index: number, enabled: boolean) => void | Called when a switch is toggled. | |
| accent | string | "#8b5cf6" | Accent color for the chart, switches, calendar and cursor. |
| className | string | Extra classes for the section element. | |
| style | React.CSSProperties | Inline styles merged onto the section element. |