caliper uidocs
DemoSign inGet Pro

Crm suite

Pro

A complete CRM in one frame: a home for the day, pipeline, contacts, companies, tasks and reports, a page for every person and company, and ⌘K to jump to any of them. One data value drives it all.

Installs components/ui/crm-suite.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, d3-shape, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/crm-suite
Home

Today

Tuesday 13 October · 4 tasks due · 2 deals close within 30 days

Your open pipeline
€75,600
Weighted forecast
€42,840
Won this quarter
€7,200
Against quota

Due now

  • Call Sofía about the renewal4 days ago
  • Send the security review to MartaYesterday
  • Book the Tide Physio demoToday
  • Price the second Palisade propertyToday

Closing within 30 days

Going quiet

Recent activity

  1. Noor replied to the agency bundle offer: interested, wants a call next week. · Tomás Ferreira · Yesterday
  2. Inês runs three clinics; wants a starter plan to try it with one. · Maya Chen · 3 days ago
  3. Quarterly review: happy with close times, wants SSO before renewal. · Priya Raman · 4 days ago
  4. Sent the SOC 2 report and the data processing terms. · Maya Chen · 4 days ago
  5. Marta wants intercompany in scope for Q1. Security review is the last blocker. · Maya Chen · 5 days ago
  6. Moved from Proposal to NegotiationGroup close, 4 entities · Maya Chen · 6 days ago
Newest first

When to use #

Use it for

  • A sales, partnerships or account management product.
  • An internal tool where a team tracks the people and money it works with.

Skip it when

  • Only a deal board; use the CRM pipeline on its own.

Installation #

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

Adds its 33 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 { CrmSuite } from "@/components/ui/crm-suite"

The worked example comes with Pro

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

Checking your licence…

API reference #

CrmSuite

component
PropTypeDefaultDescription
data *CrmData—
onDataChange *(data: CrmData) => void—
stages *readonly DealStage[]—
quotanumber—This quarter's target, for the forecast meters.
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today.
you *string—Your name: your tasks, your pipeline, and the author of what you log.
workspace{ name: string; mark?: ReactNode; }{ name: "Sales" }
currencystring"EUR"
initialScreenCrmScreen"home"
classNamestring—

Accessibility #

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

Keyboard and focus handling comes from Radix dialog and popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

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.