Preview

Account setup

Guide new accounts from signup to go-live with structured onboarding.

Onboarding Wizard compositions use Stepper (horizontal, clickable), Card, FileUpload, Field, Checkbox, Progress, Tour, Alert, and Button.

6

setup steps

12

checklist items

2

upload formats

Best for: SaaS customer onboarding, department setup, and trial-to-paid conversion.
Pairs with: Integration Marketplace, Policy Builder, Settings pages.

Included patterns

• Clickable stepper navigation

• Per-step form validation

• CSV bulk upload with preview

• Go-live readiness summary

Variants

Multi-step wizard

Stepper-guided setup flow with validation per step.

Checklist dashboard

Progress-tracked setup checklist with category grouping.

Bulk user upload

CSV upload with preview table and validation errors.

Go-live summary

Final review card with configuration summary and launch button.

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>Account setup</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="#">Setup</Sidebar.Item>
            <Sidebar.Item href="#">Company</Sidebar.Item>
            <Sidebar.Item href="#">Users</Sidebar.Item>
            <Sidebar.Item href="#">Policies</Sidebar.Item>
            <Sidebar.Item href="#">Go Live</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Guide new accounts from signup to go-live with structured onboarding.</PageHeader.Title>
          <PageHeader.Description>Onboarding Wizard compositions use Stepper (horizontal, clickable), Card, FileUpload, Field, Checkbox, Progress, Tour, Alert, and Button.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">setup steps</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>12</Heading>
          <Text as="p">checklist items</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">upload formats</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>SaaS customer onboarding, department setup, and trial-to-paid conversion.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Integration Marketplace, Policy Builder, Settings pages.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Clickable stepper navigation</Text>
        <Text as="p">• Per-step form validation</Text>
        <Text as="p">• CSV bulk upload with preview</Text>
        <Text as="p">• Go-live readiness summary</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>