# CRM pipeline

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Blocks](https://beamline.io/components/blocks) category. Live demo: https://beamline.io/components/crm

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](https://beamline.io/components/analytics-dashboard)).
- Fewer than about 50 rows ([table](https://beamline.io/components/table) or [item](https://beamline.io/components/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

- [app-shell](https://beamline.io/components/app-shell)
- [segmented-control](https://beamline.io/components/segmented-control)
- [metric-card](https://beamline.io/components/metric-card)
- [category-bar](https://beamline.io/components/category-bar)
- [data-grid](https://beamline.io/components/data-grid)
- [dropdown-menu](https://beamline.io/components/dropdown-menu)
- [confirm-morph](https://beamline.io/components/confirm-morph)
- button
- sheet
- badge
- stepper
- avatar
- [comment-thread](https://beamline.io/components/comment-thread)

## Dependencies

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

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Blocks

- [AI agent workspace](https://beamline.io/components/agent-workspace): Threads, a conversation with streamed reasoning, cited answers and a plan that waits for approval then runs step by step, and an artifacts panel with…
- [Analytics dashboard](https://beamline.io/components/analytics-dashboard): A SaaS overview in the app shell, fed by your metrics hook: range and segment filters drive KPIs, new and expansion revenue, channels, plan mix, uptime…
- [Auth page](https://beamline.io/components/auth): The whole sign-in / sign-up route: product mark, a quiet dotted field with a light that follows the mouse, an optional notice, the SignIn and SignupForm…
- [Changelog feed](https://beamline.io/components/changelog-feed): An in-app What's new page: release notes grouped by month with tags, versions, pictures and details, a tag filter with counts, entries since your last…
- [Empty states](https://beamline.io/components/empty-states): The five empty moments every product has, written and wired: first use with a first step, no results with the filters to clear, an error with retry and a…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…
- [Plan comparison](https://beamline.io/components/plan-comparison): Plans side by side against every feature: prices that roll between monthly and yearly, the current and recommended plan marked, a header that stays in…
- [Settings](https://beamline.io/components/settings): Profile and workspace settings with one draft and real save handler. Personal mode omits workspace data; optional profile fields share validation…
- [Sign in](https://beamline.io/components/sign-in): The sign-in card: email and password, a one-time code or a magic link, passkeys and single sign-on, with validation, progress, errors and a signed-in…
- [Sign up form](https://beamline.io/components/signup-form): The account creation card: single sign-on, name, work email and a password with strength and Caps Lock hints, terms consent, inline validation, your…
- [Step form](https://beamline.io/components/step-form): The finished frame for any multi-step form you compose — onboarding, intake brief, questionnaire, booking, application: a wide card with progress, the…
- [Trading terminal](https://beamline.io/components/trading-terminal): A perpetuals terminal on your feed and your account: ticker tape, market header with funding, candles, book / trades / depth, order ticket, account…
- [Voice agent](https://beamline.io/components/voice-agent): A voice agent in three layouts on one session: a support panel that mixes typing and talking, a call screen with the agent's orb and one call button, and…