Preview

SaaS starter

A DryUI-native product starter for dashboards, settings, and detail views.

This starter packages navigation shell, home screen, settings, and detail page patterns into a reusable base app.

3

page packs

4

starter-kit assets

8

composed blocks

Workspace home

Dashboard-style landing page for the signed-in product.

Settings flow

Fieldset- and detail-list-driven settings surface.

Detail screen

Entity-focused page with metadata and actions.

Ships with: Navigation shell, home screen, settings screen, and detail screen.

Included patterns

• App shell

• Settings screen

• Detail screen

• Starter-kit typography

Variants

Launch workspace

Release- and approval-focused SaaS shell.

Ops console

Operational dashboard starter with denser data patterns.

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">SaaS starter</Badge>
    <Heading level={1}>A DryUI-native product starter for dashboards, settings, and detail views.</Heading>
    <Text as="p">This starter packages navigation shell, home screen, settings, and detail page patterns into a reusable base app.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">page packs</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">starter-kit assets</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>8</Heading>
          <Text as="p">composed blocks</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Workspace home</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Dashboard-style landing page for the signed-in product.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Settings flow</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Fieldset- and detail-list-driven settings surface.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Detail screen</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Entity-focused page with metadata and actions.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Ships with</DescriptionList.Term>
        <DescriptionList.Description>Navigation shell, home screen, settings screen, and detail screen.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• App shell</Text>
        <Text as="p">• Settings screen</Text>
        <Text as="p">• Detail screen</Text>
        <Text as="p">• Starter-kit typography</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">See home screens</Button>
    </Stack>
  </Stack>
</Container>

DRYui

SaaS Starter