Seat Map
A seat picker with drawn rows and aisles, available, taken, selected and accessible seats, colour price tiers with a legend, a selection limit, grid keyboard navigation and a summary bar with total and Continue.
Preview
The Lantern Room · Fri 14 Nov, 7:30 pm
Arrow keys move, Space picks a seat.
Front$64.00Stalls$42.00Rear$28.00TakenAccessible
A
B
C
D
E
F
G
H
2 of 4 seats
- C6
- C7
Total
$84.00
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | { label, seats: ({ number, tier, taken?, accessible? } | null | "aisle")[] }[] | — | Rows left to right; null is a blank seat space, "aisle" a narrow gap. Required. |
| tiers | { id, label, price, tone: "ember" | "blue" | "gold" | "ink" }[] | — | Price tiers by colour, shown in the legend. Required. |
| selected / defaultSelected / onSelectedChange | string[] / string[] / (ids) => void | — / [] / — | Selected seat ids like "C4". |
| maxSelect | number | 6 | Most seats one person can pick. |
| currency / locale | string | "USD" / "en-US" | Price formatting. |
| stageLabel | string | "Stage" | The stage or screen edge; empty hides it. |
| continueLabel / onContinue | string / (ids, total) => void | "Continue" / — | The summary bar action. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.