Seat Map
A theatre seat map: pick up to N seats, taken seats are struck out, price tiers by row, and a running total.
seat-map.tsxseat-map.css
Checking access…
Overview
Rows are lettered and seats numbered, with an aisle gap. Choose seats up to the ticket limit; the oldest pick drops off when you go over.
Premium rows cost more and are marked with a ring. The footer lists the chosen seats and the total.
When to use
- Cinema, theatre, event and transport seating.
When not to use
- General admission: use a quantity stepper.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/seat-map.json$
npx shadcn@latest add https://sundaeui.dev/r/seat-map.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/seat-map.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/seat-map.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy seat-map.tsx and seat-map.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { SeatMap } from '@/components/sundae/seat-map'
<SeatMap />Props
| Prop | Type | Default |
|---|---|---|
rowsRow letters. | string[] | — |
perRowSeats per row. | number | 10 |
takenUnavailable seats, like “C4”. | string[] | — |
maxTicket limit. | number | 4 |
pricesPrice per row. | Record<string, number> | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The map is a grid; each seat is a toggle button labelled “Row C, seat 4, $18”.
- Arrow keys move between seats; taken seats are disabled.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-stm; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Arrow keys
- Move between seats
- Space / Enter
- Pick a seat
FAQ
- Is Seat Map free?
- Seat Map is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Seat Map?
- Run npx shadcn@latest add https://sundaeui.dev/r/seat-map.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Seat Map support keyboard and screen readers?
- The map is a grid; each seat is a toggle button labelled “Row C, seat 4, $18”. Arrow keys move between seats; taken seats are disabled.
- Does Seat Map respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Seat Pricing
Checkout · Refined - Pro
Tender Checkout
Checkout · Refined - Pro
Currency Swap
Checkout · Refined - Pro
Billing Toggle
Checkout · Refined Coupon Field
Checkout · Refined- Pro
Tip Selector
Checkout · Refined