Crm contacts

Pro

Everyone you sell to in one list: filter by relationship and owner, see who is going cold, select several to reassign or move on, and add people with a checked form.

Installs components/ui/crm-contacts.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source

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

Contacts

13 people · 3 going cold

People
Company	Stage	Owner
	Lead	Tomás Ferreira	Never
	Customer	Maya Chen	53 days ago, going cold
	Customer	Maya Chen	18 days ago
	Customer	Priya Raman	4 days ago
None	Churned	Maya Chen	152 days ago
	Prospect	Tomás Ferreira	12 days ago
	Lead	Maya Chen	3 days ago
	Prospect	Maya Chen	41 days ago, going cold
	Lead	Maya Chen	13 days ago
	Prospect	Maya Chen	5 days ago
	Lead	Tomás Ferreira	Yesterday
	Prospect	Tomás Ferreira	7 days ago
	Customer	Maya Chen	44 days ago, going cold

When to use #

Use it for

A people list in a CRM, recruiting or community tool.
Lists you work through and act on in bulk.

Skip it when

A team's own members; use team members.

Installation #

terminal

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

Adds its 18 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 { CrmContacts } from "@/components/ui/crm-contacts"

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 #

CrmContacts

component

PropTypeDefaultDescription

people *readonly CrmPerson[]—

companies *readonly CrmCompany[]—

onPeopleChange *(people: CrmPerson[]) => void—

onOpenRecord *(kind: "person" | "company", id: string) => void—Opens a person's or a company's record.

todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today, for "going cold".

you *string—Your name: new people are yours.

classNamestring—

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.