caliper uidocs
DemoSign inGet Pro

Crm tasks

Pro

The follow-ups that keep deals moving: overdue first, then today, the next seven days and later, each tied to a person or company, ticked off with an undo and added in one line.

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

Tasks

2 due today · 2 overdue

Overdue2

  • Call Sofía about the renewalCall, 4 days ago
  • Send the security review to MartaEmail, Yesterday

Today2

  • Book the Tide Physio demoMeeting, Today
  • Price the second Palisade propertyTo-do, Today

Next 7 days2

  • Check in with João on timingCall, in 3 days
  • Send Lumen Labs the annual quoteEmail, in 6 days

Later1

  • Quarterly review with AoifeMeeting, in 15 days
Done 1
  • Send Ostra the order formEmail, 6 Oct

When to use #

Use it for

  • Sales and success follow-ups.
  • Any list of dated to-dos about records.

Skip it when

  • Project work with stages; use the kanban board.

Installation #

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

Adds its 12 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 { CrmTasks } from "@/components/ui/crm-tasks"

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 #

CrmTasks

component
PropTypeDefaultDescription
tasks *readonly CrmTask[]—
people *readonly CrmPerson[]—
companies *readonly CrmCompany[]—
onTasksChange *(tasks: CrmTask[]) => void—
onOpenRecord((kind: "person" | "company", id: string) => void)—
todaystringnew Date().toISOString().slice(0, 10)ISO date treated as today.
you *string—Your name: "Mine" shows your tasks, and new tasks are yours.
classNamestring—

Accessibility #

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

Keyboard and focus handling comes from Radix 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.