Preview

Auth asset

A starter-kit auth layout with strong hierarchy and room for trust context.

This asset packages typography, summary copy, and grouped actions for account entry flows.

Best for: Sign-in, invite acceptance, reset, and account recovery pages.

Included patterns

• Heading + Text hierarchy

• Account detail summary

• Grouped actions

Hero copy

Uses Heading and Text for stronger auth page hierarchy.

Support summary

DescriptionList-based account and workspace context.

Recovery actions

Places secondary actions without flattening the page.

Variants

Sign-in shell

Default auth layout with support copy and trust note.

Invite acceptance

Invite and recovery flows with more secondary context.

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 { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Auth asset</Badge>
    <Heading level={1}>A starter-kit auth layout with strong hierarchy and room for trust context.</Heading>
    <Text as="p">This asset packages typography, summary copy, and grouped actions for account entry flows.</Text>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Sign-in, invite acceptance, reset, and account recovery pages.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Heading + Text hierarchy</Text>
        <Text as="p">• Account detail summary</Text>
        <Text as="p">• Grouped actions</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Hero copy</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Uses Heading and Text for stronger auth page hierarchy.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Support summary</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">DescriptionList-based account and workspace context.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Recovery actions</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Places secondary actions without flattening the page.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Copy auth layout</Button>
        <Button variant="outline">Pair with SaaS starter</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Auth Layout