Crm companies

Pro

The accounts you sell to and look after: what each pays, what is open in the pipeline, the people you know there, and health and renewals that need a conversation soon.

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

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

Companies

9 accounts · €159.2k ARR · 1 at risk

Companies
Industry			Health
Manufacturing1,000+ people	€92,0001 deal	None	Not set	None
Logistics201–500 people	€48,0001 deal	None	Healthy	None
Biotech51–200 people	€26,5001 deal	None	Not set	None
Software11–50 people	€14,4001 deal	None	Not set	None
Agency11–50 people	€9,6001 deal	None	Not set	None
Hospitality201–500 people	€8,4001 deal	€42,000	At risk	in 17 days
Healthcare11–50 people	€4,8001 deal	None	Not set	None
Accounting51–200 people	None	€31,200	Healthy	in 111 days
Insurance501–1,000 people	None	€86,000	Watch	in 20 days

When to use #

Use it for

Account lists in sales, success and partner tools.
Any list where money and dates decide what to look at first.

Skip it when

One account's details; use the CRM record.

Installation #

terminal

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

Adds its 15 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 { CrmCompanies } from "@/components/ui/crm-companies"

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 #

CrmCompanies

component

PropTypeDefaultDescription

companies *readonly CrmCompany[]—

people *readonly CrmPerson[]—

deals *readonly Deal[]—

stages *readonly DealStage[]—

onCompaniesChange *(companies: CrmCompany[]) => void—

onOpenRecord *(kind: "person" | "company", id: string) => void—

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

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

currencystring"EUR"

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.