Preview

Traveler management

Complete traveler profiles with documents, preferences, and loyalty data.

Traveler Profile compositions use Tabs, Card, DescriptionList, Badge, Gauge, Progress, Avatar, Field, Input, Select, and Button for comprehensive profile management.

5

profile tabs

4

document types

6

preference categories

Best for: Traveler self-service portals and admin profile management views.
Completeness: Gauge component shows profile completion percentage.

Included patterns

• Tabbed section navigation

• Profile completeness gauge

• Document expiry alerts

• Loyalty tier badges

Variants

Personal info tab

Name, contact details, and emergency contacts.

Documents tab

Passport, visa, and ID document management.

Preferences tab

Seat, meal, airline, and hotel chain preferences.

Loyalty programs tab

Frequent flyer and hotel rewards program entries.

Payment methods tab

Corporate and personal card management.

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>Traveler management</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="#">Profile</Sidebar.Item>
            <Sidebar.Item href="#">Documents</Sidebar.Item>
            <Sidebar.Item href="#">Preferences</Sidebar.Item>
            <Sidebar.Item href="#">Loyalty</Sidebar.Item>
            <Sidebar.Item href="#">Payment</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Complete traveler profiles with documents, preferences, and loyalty data.</PageHeader.Title>
          <PageHeader.Description>Traveler Profile compositions use Tabs, Card, DescriptionList, Badge, Gauge, Progress, Avatar, Field, Input, Select, and Button for comprehensive profile management.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">profile tabs</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">document types</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">preference categories</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Traveler self-service portals and admin profile management views.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Completeness</DescriptionList.Term>
        <DescriptionList.Description>Gauge component shows profile completion percentage.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Tabbed section navigation</Text>
        <Text as="p">• Profile completeness gauge</Text>
        <Text as="p">• Document expiry alerts</Text>
        <Text as="p">• Loyalty tier badges</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui

Traveler Profile Sections