caliper uidocs
DemoSign inGet Pro

Crm home

Pro

Where the day starts: tasks due now, the quarter against quota, deals closing within 30 days, people going quiet and the latest activity, each a click from its record.

Installs components/ui/crm-home.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/crm-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

  • Group close, 4 entitiesOstra Freight · Negotiation · closes 24 Oct€48k
  • Palisade spa add-onPalisade Hotels · Proposal · closes 31 Oct€8.4k

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

  • The landing screen of a CRM or account tool.
  • A personal view that turns records into the next things to do.

Skip it when

  • A company-wide dashboard; use CRM reports.

Installation #

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

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 { CrmHome } from "@/components/ui/crm-home"

The worked example comes with Pro

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

Checking your licence…

API reference #

CrmHome

component
PropTypeDefaultDescription
data *CrmData—
stages *readonly DealStage[]—
onDataChange *(data: CrmData) => void—
onOpenRecord *(kind: "person" | "company", id: string) => void—
onOpenDeal((id: string) => void)—
onShowAll((screen: "tasks" | "pipeline" | "contacts") => void)—Links each panel to its full screen.
quotanumber—This quarter's target.
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today.
you *string—Your name: the day is yours.
currencystring"EUR"
classNamestring—

Accessibility #

It exposes status semantics, with aria-label, aria-hidden and aria-describedby kept in step with state. Changes that matter are announced through a live region.

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.