Crm pipeline

Pro

A pipeline that says what the quarter will bring: totals and weighted values per stage, a forecast against quota, overdue dates flagged, drag or Alt-arrows between stages and a record for each deal.

Installs components/ui/crm-pipeline.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens

pnpm dlx shadcn@latest add @caliper/crm-pipeline

Pipeline

Pipeline

6 open deals

Open pipeline: €195,300
Weighted forecast: €75,850
Won: €7,200
Against quota

Drag a deal, or Alt + ← → to move it

Lead2

€24k · 10% · €2.4k weighted

Qualified2

€96.8k · 25% · €24.2k weighted

Proposal1

€26.5k · 50% · €13.3k weighted

Negotiation1

€48k · 75% · €36k weighted

Won1

€7.2k

Lost1

€3.6k

When to use #

Use it for

Sales, partnerships or fundraising pipelines.
Any board where items carry money and a probability.

Skip it when

Tasks without value; use the kanban board.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/crm-pipeline

Adds its 19 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { CrmPipeline } from "@/components/ui/crm-pipeline"

The worked example comes with Pro

The 53-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

CrmPipeline

component

PropTypeDefaultDescription

deals *readonly Deal[]—

stages *readonly DealStage[]—

onDealsChange *(deals: Deal[]) => void—

quotanumber—This period's target, for the forecast meter.

todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today, for overdue dates.

currencystring"EUR"

you *string—Your name, for activity you log.

openDealstring | null—The deal whose record is open, when another screen opens it. Leave out to let the pipeline manage it.

onOpenDealChange((id: string | null) => void)—

onOpenCompany((company: string) => void)—Makes the company in a deal's record a link, e.g. to the company's page.

classNamestring—

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.