CRM pipeline

A React block (a whole screen) in Beamline's Blocks category.

A pipeline screen: KPIs and stage mix derived from a virtualised deals grid with inline edit, bulk moves and delete with undo; a row opens the deal in a side sheet with stage stepper, fields and notes. Every change goes to your onDealsChange.

Use it for

Record-heavy B2B screens: deals, accounts, tickets, orders — a filterable grid with a detail panel that keeps the list in view.

Not for

A read-only report (analytics-dashboard).
Fewer than about 50 rows (table or item list).

Anatomy

app shell (your navigation, product mark, signed-in rep)
scope filter and deal count
KPI row (open pipeline, weighted, win rate, average won deal)
stage mix bar
deals grid (toolbar: move, delete, export; footer aggregates) — never shorter than 22rem: on short or phone screens the page scrolls past the KPIs to a usable grid instead of squeezing it
deal sheet (stage badge, stepper or lost note, fields, move and reassign menus, notes)

States

all deals / my deals
rows selected (move, delete with undo, export selected)
deal open
deal lost (stepper replaced by a note)
pipeline value not set (hatched)
no deals (KPIs unmeasured, grid empty label)
loading

Keyboard

grid: arrows move between cells, Enter edits, Space selects
Enter on a row opens the deal; Esc closes the sheet and focus returns
stepper: completed steps are buttons
delete: the question takes focus; Esc backs out

Motion

The sheet opens on --motion-in and closes on --motion-out; KPI values roll; the delete control morphs between asking, working and done. A stage move (row menu, Move N to…, the deal sheet or its stepper) sends a consequence trace (ui/lib/trace.ts) from where it was made to each metric it changed; the values change at once. Reduced motion: each changed metric holds a ring instead.

Props

Prop	Type	Default	Description
`deals / defaultDeals / onDealsChange`	`Deal[]`	—	The deals, controlled or not; every edit, move, delete and undo arrives as the whole new list.
`owners`	`CrmOwner[]`	—	Reps with photos; defaults to the owners in the deals.
`me`	`string`	—	The signed-in rep, for My deals and notes.
`scope / defaultScope / onScopeChange`	`"all" \| "mine"`	—
`openDeal / defaultOpenDeal / onOpenDealChange`	`string \| null`	—	The deal in the sheet.
`notes / defaultNotes / onNotesChange`	`Record<string, ThreadComment[]>`	—
`nav`	`AppShellNavGroup[]`	—	Your app's navigation; default the pipeline alone.
`product`	`string`	`"CRM"`
`onCreateDeal`	`() => void`	—	Shows New deal.
`onExport`	`(deals: Deal[]) => void`	—	Shows Export: the selected deals, or every deal in view.
`loading`	`boolean`	—
`className`	`string`	—
`classNames`	`CrmClassNames`	—
`style / ref`	`CSSProperties / Ref<HTMLDivElement>`	—

Built from

Dependencies

@tanstack/react-virtual, lucide-react, motion

Import

import { Crm, STAGES, STAGE_TONES } from "@/blocks/crm/crm";

Get it

CRM pipeline is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent