caliper uidocs

Crm reports

Pro

How the team sells, from the deals themselves: win rate, deal size and sales cycle for a period, the pipeline by stage, where deals drop out, the next three months' forecast and the same per owner.

Installs components/ui/crm-reports.tsxDepends on d3-shape, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/crm-reports

Reports

5 deals closed in the last 3 months · 7 open today

Win rate
60%
3 won · 2 lost
Average deal won
€45,067
Sales cycle
72 days
Opened to won, on average
Weighted forecast
€80,050
of €203.7k open

Open pipeline by stage

  • Lead2 · €24k10% chance · €2.4k weighted
  • Qualified2 · €96.8k25% chance · €24.2k weighted
  • Proposal2 · €34.9k50% chance · €17.5k weighted
  • Negotiation1 · €48k75% chance · €36k weighted

Where deals drop out

Deals reaching each stage

Deals reaching each stage
StageValueOf firstOf previous
Lead14100.0%—
Qualified964.3%64.3%
Proposal750.0%77.8%
Negotiation535.7%71.4%
Won428.6%80.0%

Forecast, next three months

  • Oct 2026 (and overdue)€53.5k weighted3 deals · €82.9k if all close
  • Nov 2026€2.6k weighted2 deals · €19.2k if all close
  • Dec 2026€24k weighted2 deals · €101.6k if all close

By owner

Pipeline and wins by owner, closed in the last 3 months
OwnerOpenWeightedWonWin rate
Priya Raman€0€0€86k50% of 2
Maya Chen€75.6k€42.8k€49.2k100% of 2
Tomás Ferreira€128.1k€37.2k€00% of 1

When to use #

Use it for

  • Sales leaders and founders reviewing the quarter.
  • Any product that reports on a pipeline.

Skip it when

  • Product analytics; use the metrics dashboard.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/crm-reports

Adds its 9 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 { CrmReports } from "@/components/ui/crm-reports"

The worked example comes with Pro

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

Checking your licence…

API reference #

CrmReports

component
PropTypeDefaultDescription
deals *readonly Deal[]—
stages *readonly DealStage[]—
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today.
currencystring"EUR"
classNamestring—

Accessibility #

It is built on native elements and keeps aria-hidden in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.