Preview

Seat booking

Visual seat maps with tier pricing and instant selection feedback.

Seat Selection compositions use SeatMap, Tooltip, Badge, and Card for interactive seat picking with pricing tiers and availability states.

4

seat states

2

layout types

3

tier levels

Best for: Flight and train booking flows with seat preference selection.
Accessibility: Full keyboard navigation, grid role, and screen reader labels.

Included patterns

• Interactive seat grid with keyboard nav

• Tier-based color coding

• Max selection enforcement

• Price breakdown in summary card

Variants

Aircraft layout

Airplane cabin seat map with class sections and aisle.

Train layout

Train car seat arrangement with table and window indicators.

Selection summary

Side panel showing selected seats with pricing breakdown.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Seat booking</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Search</Sidebar.Item>
            <Sidebar.Item href="#">Results</Sidebar.Item>
            <Sidebar.Item href="#">Seats</Sidebar.Item>
            <Sidebar.Item href="#">Checkout</Sidebar.Item>
            <Sidebar.Item href="#">Confirmation</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Visual seat maps with tier pricing and instant selection feedback.</PageHeader.Title>
          <PageHeader.Description>Seat Selection compositions use SeatMap, Tooltip, Badge, and Card for interactive seat picking with pricing tiers and availability states.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">seat states</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">layout types</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">tier levels</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Flight and train booking flows with seat preference selection.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Accessibility</DescriptionList.Term>
        <DescriptionList.Description>Full keyboard navigation, grid role, and screen reader labels.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Interactive seat grid with keyboard nav</Text>
        <Text as="p">• Tier-based color coding</Text>
        <Text as="p">• Max selection enforcement</Text>
        <Text as="p">• Price breakdown in summary card</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>