Preview

Starter kit

An opinionated DryUI starter kit for account and workspace surfaces.

The starter kit combines auth layout, settings groups, profile summaries, and standalone typography primitives.

New exports: Heading, Text, DescriptionList, and Fieldset.

Included patterns

• Auth layout

• Profile summary

• Settings groups

• Type scale

Auth layout

Branded entrypoint for sign-in, invite, and recovery flows.

Profile summary

DescriptionList-based summary card for account data.

Settings groups

Fieldset-based settings sections with guidance copy.

Variants

Account base kit

Core starter-kit assets for account and workspace flows.

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">Starter kit</Badge>
    <Heading level={1}>An opinionated DryUI starter kit for account and workspace surfaces.</Heading>
    <Text as="p">The starter kit combines auth layout, settings groups, profile summaries, and standalone typography primitives.</Text>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>New exports</DescriptionList.Term>
        <DescriptionList.Description>Heading, Text, DescriptionList, and Fieldset.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Auth layout</Text>
        <Text as="p">• Profile summary</Text>
        <Text as="p">• Settings groups</Text>
        <Text as="p">• Type scale</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Auth layout</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Branded entrypoint for sign-in, invite, and recovery flows.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Profile summary</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">DescriptionList-based summary card for account data.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Settings groups</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Fieldset-based settings sections with guidance copy.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open kit assets</Button>
        <Button variant="outline">Copy auth layout</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Starter Kit Overview