caliper uidocs
DemoSign inGet Pro

Inbox screen

Pro

Triage by what you owe: Needs reply, Waiting and FYI, product facts beside the thread, keyboard triage and undo.

Installs components/ui/inbox-screen.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/inbox-screen
Inbox
Needs reply3
Ana Reyes09:41Invoice 0923 looks doubledWe were charged twice for the September seats, can you…
Lena Brandt08:02SSO for the Lumen domainFollowing up on the SAML metadata we sent…
Kai BeckerTueSeats for the Gdańsk teamWe'd like to add twelve people from…
Waiting on them1
Hanne LundMonExport of audit logYou: here's the CSV for Q3…
FYI1
Status botMonWeekly uptime: 99.98%No incidents this week.

Invoice 0923 looks doubled

Ana Reyes 09:41

Hi, we were charged twice for the September seats (INV-2041 and INV-2043). Can you refund one of them?

Found in billing: INV-2041 and INV-2043, both $672.00 on 1 Oct. INV-2043 was created by a retry after a timeout.

When to use #

Use it for

  • Support, sales or ops queues answered by a small team.
  • The product knows facts about the customer that answer the question.

Skip it when

  • Personal email.
  • Chat; use the thread components.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/inbox-screen

Adds its 5 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 { InboxScreen } from "@/components/ui/inbox-screen"

The worked example comes with Pro

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

Checking your licence…

API reference #

InboxScreen

component
PropTypeDefault
conversations *readonly InboxConversation[]—
onDone((id: string) => void)—
onSnooze((id: string) => void)—
onSend((id: string, text: string) => void | Promise<void>)—
undoMsnumber6000
classNamestring—

Accessibility #

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

KeyBehaviour
↓Moves to the next item or value.
↑Moves to the previous item or value.
EnterActivates the focused control.

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.