caliper uidocs
DemoSign inGet Pro

Helpdesk customers

Pro

Everyone who asks for help: search, filter by plan, who has open tickets, what they pay and how they rated you; each person's page has every ticket, team notes and a ticket opened on their behalf.

Installs components/ui/helpdesk-customers.tsxDepends on @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/helpdesk-customers

Customers

10 people · 7 with open tickets

CustomerPlanPaysOpenSatisfactionLast contact
Enterprise€4,0002 open20%1 h 30 min ago
Enterprise€7,1702 open100%4 h ago
Team€2,6002 open100%1 d 5 h ago
Starter€491 open100%48 min ago
Enterprise€7,6001 open100%2 h 30 min ago
Team€3,5001 open100%3 h ago
Team€5901 open50%6 h ago
Starter€995 solved100%1 d 1 h ago
Team€4906 solved100%2 d 12 h ago
Starter€295 solved60%3 d 8 h ago

When to use #

Use it for

  • The people side of a support tool.
  • Account context agents need before they reply.

Skip it when

  • Sales contacts and deals; use the CRM suite.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/helpdesk-customers

Adds its 14 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. It is built from HelpdeskCustomers and HelpdeskCustomerPage.

example.tsx
import { HelpdeskCustomers, HelpdeskCustomerPage } from "@/components/ui/helpdesk-customers"

The worked example comes with Pro

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

Checking your licence…

API reference #

HelpdeskCustomers

component
PropTypeDefaultDescription
customers *readonly HelpdeskCustomer[]—
tickets *readonly Ticket[]—
onOpenCustomer((id: string) => void)—
nowstringnew Date().toISOString()ISO time treated as now.
classNamestring—

HelpdeskCustomerPage

component
PropTypeDefaultDescription
customer *HelpdeskCustomer—
tickets *readonly Ticket[]—
onTicketsChange *(tickets: Ticket[]) => void—
onCustomerChange *(customer: HelpdeskCustomer) => void—
onOpenTicket((id: string) => void)—
onBack{ label: string; onSelect: () => void; }—
nowstringnew Date().toISOString()ISO time treated as now.
you *string—Your name: new tickets are yours.
classNamestring—

Accessibility #

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

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 #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.