Preview

Group coordination

Manage group bookings from event creation to budget reconciliation.

Group Travel compositions use Card, DataGrid (with bulk select), AvatarGroup, Progress, Badge, StatCard, Field, and DateRangePicker.

4

management views

3

bulk actions

5

budget categories

Best for: Conference planning, team offsites, and corporate event booking.
Pairs with: Trip Search Forms, Approval Workflows, Analytics Dashboards.

Included patterns

• DataGrid with bulk selection

• AvatarGroup for attendee preview

• Segmented budget progress

• Date range event scheduling

Variants

Event creation form

Multi-field form for event details, dates, and location.

Attendee management grid

DataGrid with bulk select for managing attendee list.

Booking status dashboard

Overview of booking progress across attendees.

Budget tracker

Budget allocation and spend tracking with progress segments.

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>Group coordination</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="#">Events</Sidebar.Item>
            <Sidebar.Item href="#">Attendees</Sidebar.Item>
            <Sidebar.Item href="#">Bookings</Sidebar.Item>
            <Sidebar.Item href="#">Budget</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Manage group bookings from event creation to budget reconciliation.</PageHeader.Title>
          <PageHeader.Description>Group Travel compositions use Card, DataGrid (with bulk select), AvatarGroup, Progress, Badge, StatCard, Field, and DateRangePicker.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">management views</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">bulk actions</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">budget categories</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Conference planning, team offsites, and corporate event booking.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Trip Search Forms, Approval Workflows, Analytics Dashboards.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• DataGrid with bulk selection</Text>
        <Text as="p">• AvatarGroup for attendee preview</Text>
        <Text as="p">• Segmented budget progress</Text>
        <Text as="p">• Date range event scheduling</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui

Group Travel & Events