caliper uidocs
DemoSign inGet Pro

Helpdesk queue

Pro

The support queue: views with counts, tickets that are about to miss or have missed their reply time first with the time written out, search by subject, customer or number, and bulk assign and status.

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

Tickets

4 assigned to you · 3 unassigned · 2 past their reply time

TicketReply byAssignee
Email, #4821Marta Silva, Ostra Freight1 h 30 min over
Web form, #4820Hannah Brooks, Kestrel Biodue in 36 min
Phone, #4815Sofía Ortega, Palisade Hotelsdue in 5 h

j k move · x select · Enter open

When to use #

Use it for

  • Any list of requests a team works through by deadline.
  • Support, IT, operations and approvals queues.

Skip it when

  • Messages between people with no owner or deadline; use an inbox.

Installation #

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

Adds its 17 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 { HelpdeskQueue } from "@/components/ui/helpdesk-queue"

The worked example comes with Pro

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

Checking your licence…

API reference #

HelpdeskQueue

component
PropTypeDefaultDescription
tickets *readonly Ticket[]—
customers *readonly HelpdeskCustomer[]—
agents *readonly string[]—
onTicketsChange *(tickets: Ticket[]) => void—
onOpenTicket((id: string, order: string[]) => void)—Opens a ticket; `order` is the list as shown, for previous and next.
viewHelpdeskView—
onViewChange((view: HelpdeskView) => void)—
querystring—
onQueryChange((query: string) => void)—
nowstringnew Date().toISOString()ISO time treated as now, for SLA timers.
you *string—Your name: Mine shows tickets assigned to you.
classNamestring—

Accessibility #

It exposes tablist, tab, region, table, row, columnheader, cell and status semantics, with aria-label, aria-selected, aria-hidden and aria-describedby kept in step with state. Changes that matter are announced through a live region.

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