Theme

SeatMap

display @dryui/ui Compound

Interactive seat selection grid with rows, seats, and legend

seatmapbookingvenueselectionticket

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { SeatMap } from '@dryui/ui';
</script>

<SeatMap.Root selectedSeats={selected} onSelectionChange={(s) => selected = s}>
  <SeatMap.Row label="A">
    <SeatMap.Seat id="A1" status="available" />
    <SeatMap.Seat id="A2" status="occupied" />
    <SeatMap.Seat id="A3" status="available" />
  </SeatMap.Row>
  <SeatMap.Legend>Legend content</SeatMap.Legend>
</SeatMap.Root>

Import options

Root package

ts
import { SeatMap } from '@dryui/ui'

Per-component subpath

ts
import { SeatMap } from '@dryui/ui/seat-map'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Basic seat map

svelte
<SeatMap.Root>
  <SeatMap.Row label="A">
    <SeatMap.Seat id="A1" status="available" />
    <SeatMap.Seat id="A2" status="available" />
    <SeatMap.Seat id="A3" status="occupied" />
    <SeatMap.Seat id="A4" status="available" />
    <SeatMap.Seat id="A5" status="available" />
  </SeatMap.Row>
  <SeatMap.Row label="B">
    <SeatMap.Seat id="B1" status="available" />
    <SeatMap.Seat id="B2" status="occupied" />
    <SeatMap.Seat id="B3" status="occupied" />
    <SeatMap.Seat id="B4" status="available" />
    <SeatMap.Seat id="B5" status="blocked" />
  </SeatMap.Row>
  <SeatMap.Row label="C">
    <SeatMap.Seat id="C1" status="available" />
    <SeatMap.Seat id="C2" status="available" />
    <SeatMap.Seat id="C3" status="available" />
    <SeatMap.Seat id="C4" status="occupied" />
    <SeatMap.Seat id="C5" status="available" />
  </SeatMap.Row>
</SeatMap.Root>

Tiered pricing with legend

svelte
<SeatMap.Root maxSelections={4}>
  <SeatMap.Row label="1">
    <SeatMap.Seat id="1A" status="available" tier="premium" price={85} />
    <SeatMap.Seat id="1B" status="available" tier="premium" price={85} />
    <SeatMap.Seat id="1C" status="occupied" tier="premium" price={85} />
    <SeatMap.Seat id="1D" status="available" tier="premium" price={85} />
  </SeatMap.Row>
  <SeatMap.Row label="2">
    <SeatMap.Seat id="2A" status="available" tier="standard" price={45} />
    <SeatMap.Seat id="2B" status="blocked" tier="standard" price={45} />
    <SeatMap.Seat id="2C" status="available" tier="standard" price={45} />
    <SeatMap.Seat id="2D" status="available" tier="standard" price={45} />
  </SeatMap.Row>
  <SeatMap.Row label="3">
    <SeatMap.Seat id="3A" status="available" tier="economy" price={25} />
    <SeatMap.Seat id="3B" status="available" tier="economy" price={25} />
    <SeatMap.Seat id="3C" status="occupied" tier="economy" price={25} />
    <SeatMap.Seat id="3D" status="available" tier="economy" price={25} />
  </SeatMap.Row>
  <SeatMap.Legend>
    <span>Available</span>
    <span>Occupied</span>
    <span>Blocked</span>
    <span>Selected</span>
  </SeatMap.Legend>
</SeatMap.Root>

Pre-selected seats

svelte
<SeatMap.Root selectedSeats={['D2', 'D3']}>
  <SeatMap.Row label="D">
    <SeatMap.Seat id="D1" status="available" />
    <SeatMap.Seat id="D2" status="selected" />
    <SeatMap.Seat id="D3" status="selected" />
    <SeatMap.Seat id="D4" status="available" />
    <SeatMap.Seat id="D5" status="occupied" />
    <SeatMap.Seat id="D6" status="available" />
  </SeatMap.Row>
  <SeatMap.Row label="E">
    <SeatMap.Seat id="E1" status="available" />
    <SeatMap.Seat id="E2" status="available" />
    <SeatMap.Seat id="E3" status="occupied" />
    <SeatMap.Seat id="E4" status="occupied" />
    <SeatMap.Seat id="E5" status="available" />
    <SeatMap.Seat id="E6" status="available" />
  </SeatMap.Row>
</SeatMap.Root>

Structure

Compound components always start with SeatMap.Root. Use this structure block to understand required wrappers before you wire state or styling.

SeatMap.Root
  SeatMap.Row
    SeatMap.Seat
  SeatMap.Legend
SeatMap.Root SeatMap.RowSeatMap.SeatSeatMap.Legend

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with SeatMap.Root, then add only the parts you need.

SeatMap.RowSeatMap.SeatSeatMap.Legend

SeatMap.Root

Prop Type Default Required Bindable
selectedSeats
string[]
— — —
maxSelections
number
— — —
onSelectionChange
(seats: string[]) => void
— — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

SeatMap.Row

Prop Type Default Required Bindable
label
string
— ✓ —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

SeatMap.Seat

Prop Type Default Required Bindable
id
string
— ✓ —
status
availableoccupiedselectedblocked
 — ✓ —
tier
string
— — —
price
number
— — —
children
Snippet
— — —

Forwards <button> attributes via rest props. Common examples: type, disabled, name.

SeatMap.Legend

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.