# CRM pipeline

> Drag deals across stages; open, weighted forecast and won totals update live.

Block · Pro · https://lodeui.com/blocks/crm-pipeline

## When to use

- Sales and deal tracking.

## When not to use

- Task boards: use the kanban board.

## Installation

```bash
npx shadcn@latest add @lode/crm-pipeline
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { CrmPipeline } from "@/components/blocks/crm-pipeline";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <CrmPipeline />
    </main>
  );
}
```

Built from: Avatar group, Number ticker

## API reference

### CrmPipeline

A sales pipeline: drag deals between stages or move them with a menu, with a weighted forecast and stale-deal highlights. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Reach each deal's stage menu |
| ↑ / ↓ | Pick a stage in the menu |

## Accessibility

- Every deal has a stage select, so moving deals never needs a mouse.
- Columns are labelled with their deal count.

## Motion

- Deals glide to their new column; totals roll.

## Responsive behavior

- Columns scroll horizontally on phones.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Probability per stage sets the weighted forecast; edit it in the stages array.

## Related

- [Kanban board](https://lodeui.com/blocks/kanban-board) — Sprint board with drag between columns, WIP limits, quick add and points.
- [CRM contacts](https://lodeui.com/blocks/crm-contacts) — Contacts on the data table with filters, expandable details, bulk email, tag and delete.
- [Number ticker](https://lodeui.com/components/number-ticker) — Every digit rolls on its own wheel, odometer style.