caliper uidocs
DemoSign inGet Pro

Approval queue

Pro

Requests waiting for a decision.

Installs components/ui/approval-queue.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/approval-queue
  • Annual design tool licencesIngrid Solberg · Purchase · 2 hours ago$14,400
  • Production database access for contractorTomás Rivera · Access · YesterdayOverdue
  • Conference travel, LisbonMaya Chen · Expense · Yesterday$2,180Due soon
  • Raise the API rate limit for AcmeKofi Mensah · Change · 3 days ago

Annual design tool licences

Ingrid Solberg · Purchase · 2 hours ago

low risk

Renewal for 24 seats at the same rate as last year. Finance has confirmed budget.

Amount $14,400

When to use #

Use it for

  • Reviewing items one by one.

Skip it when

  • Decisions are automatic.

Installation #

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

Adds its 6 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 { ApprovalQueue } from "@/components/ui/approval-queue"

The worked example comes with Pro

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

Checking your licence…

API reference #

ApprovalQueue

component
PropTypeDefault
requests *readonly ApprovalRequest[]—
onDecide *(ids: string[], status: QueueStatus, note?: string | undefined) => void—
classNamestring—

Accessibility #

It exposes tablist, tab, region, status, listbox and option semantics, with aria-label, aria-selected, aria-hidden and aria-activedescendant kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
EscapeCloses or cancels, then returns focus to where it came from.

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.