Helpdesk home
ProWhere an agent's day starts: tickets past their reply time first, ones due within the hour, customers who replied and are waiting on you, the latest ratings and the team's load today.
pnpm dlx shadcn@latest add @caliper/helpdesk-homeGood morning, Maya
3 open tickets are yours
- Yours, open
- 3
- 3 unassigned in the team
- Past reply time
- 1
- reply to these first
- Due within an hour
- 1
- still on time
- Customers waiting on you
- 1
- they replied last
Reply to these first
Customers waiting on you
Latest ratings
Team today
| Agent | Open | Past due | Solved today |
|---|---|---|---|
| Maya Chen (you) | 3 | 1 | 0 |
| Tomás Ferreira | 0 | 0 | 0 |
| Priya Raman | 1 | 0 | 0 |
| Kiara Murayama | 0 | 0 | 0 |
Oldest unassigned: #4818, waiting 2 h 30 min
When to use #
Use it for
- The landing screen of a helpdesk or support tool.
Skip it when
- Team-wide trends; use helpdesk reports.
Installation #
pnpm dlx shadcn@latest add @caliper/helpdesk-home
Adds its 7 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.
import { HelpdeskHome } from "@/components/ui/helpdesk-home"
The worked example comes with Pro
The 112-line example behind the preview opens here with a Pro or Team licence.
API reference #
HelpdeskHome
component
Accessibility #
It is built on native elements and keeps aria-hidden in step with state.
No custom key handling; Tab and the native activation keys do the work.
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.