A deal board where dragging cards between stages recalculates stage totals, weighted values and a quota meter that stacks closed revenue with the weighted forecast. Owner avatars filter the board and stale deals are flagged.
Drag a card to change its stage, or focus it and press Shift + ← →.
npx shadcn@latest add https://hyperblur.dev/r/dashboard-pipeline.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/dashboard-pipeline.tsx.
import { DashboardPipeline } from "@/components/hyperblur/dashboard-pipeline"
<DashboardPipeline quota={500000} onChange={(deals) => console.log(deals)} />| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | "Dealflow" | Name used in the heading. |
| stages | { id: string; label: string; probability: number; color: string }[] | Lead to Closed won | Stages in order. probability (0 to 1) drives weighted values; 1 counts as closed won. |
| deals | PipelineDeal[] | Controlled deals. Pair with onChange. | |
| defaultDeals | PipelineDeal[] | 11 sample deals | Initial deals when uncontrolled: id, company, title, value, stage, owner, days in stage and close date. |
| onChange | (deals: PipelineDeal[]) => void | Called after a deal changes stage. | |
| quota | number | 420000 | Quarter quota used by the meter and attainment. |
| quarter | string | "Q4 2026" | Period label in the heading. |
| currency | string | "$" | Currency symbol. |
| accent | string | "#2f7bff" | Accent for the forecast hatch, attainment and focus. |
| staleAfter | number | 14 | Days in stage after which an open deal is flagged as stale. |