Preview

Docs starter

A documentation starter with stronger navigation and page framing.

This starter packages header sections, content layouts, side navigation, and CTA / support blocks.

Docs index

Landing page for docs with key categories and routes.

Guide layout

Narrative content section with detail rail.

Support lane

CTA or contact lane for implementation questions.

Built for: Product docs, APIs, and guide-heavy support centers.

Included patterns

• Page headers

• Content sections

• Navigation shells

Variants

API docs

Reference-led docs starter with clear page framing.

Guides docs

Docs starter balanced toward tutorials and narrative guides.

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">Docs starter</Badge>
    <Heading level={1}>A documentation starter with stronger navigation and page framing.</Heading>
    <Text as="p">This starter packages header sections, content layouts, side navigation, and CTA / support blocks.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Docs index</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Landing page for docs with key categories and routes.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Guide layout</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Narrative content section with detail rail.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Support lane</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">CTA or contact lane for implementation questions.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built for</DescriptionList.Term>
        <DescriptionList.Description>Product docs, APIs, and guide-heavy support centers.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Page headers</Text>
        <Text as="p">• Content sections</Text>
        <Text as="p">• Navigation shells</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">Use header sections</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Documentation / API Starter