caliper uidocs
DemoSign inGet Pro

Seat picker

Pro

Choosing seats on a map: chosen seats spring into place, the total follows, arrow keys move like a grid, and a limit explains itself.

Installs components/ui/seat-picker.tsxDepends on none beyond ReactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/seat-picker
1 seat: 4C€18

When to use #

Use it for

  • Flights, events, cinemas and venues.
  • Desk and room booking.

Skip it when

  • Choosing a quantity only; use a number field.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/seat-picker

Adds its 4 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 { SeatPicker } from "@/components/ui/seat-picker"

The worked example comes with Pro

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

Checking your licence…

API reference #

SeatPicker

component
PropTypeDefaultDescription
map *SeatMap—
selected *readonly string[]—Seat ids like "12C".
onSelectedChange *(seats: string[]) => void—
maxnumber4
price *(seat: string, premium: boolean) => number—Price of one seat.
currencystring"EUR"
classNamestring—

Accessibility #

It exposes grid, row, gridcell and status semantics, with aria-label, aria-hidden, aria-pressed and aria-disabled kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

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.