Theme

Preview

Changelog starter

A finished update hub for release notes and launch recaps.

This starter packages blog sections, stats, testimonial proof, and newsletter capture for changelog sites.

Update feed

Structured release note cards with tags and summaries.

Proof section

Stats or testimonials beneath major launch posts.

Subscribe lane

Newsletter block for product updates.

Included patterns

• Update feed

• Stats strip

• Newsletter opt-in

Variants

Release notes

Feed-driven changelog with tag and version framing.

Launch recap

Larger editorial changelog layout with proof sections.

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">Changelog starter</Badge>
    <Heading level={1}>A finished update hub for release notes and launch recaps.</Heading>
    <Text as="p">This starter packages blog sections, stats, testimonial proof, and newsletter capture for changelog sites.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Update feed</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Structured release note cards with tags and summaries.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Proof section</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Stats or testimonials beneath major launch posts.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Subscribe lane</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Newsletter block for product updates.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Update feed</Text>
        <Text as="p">• Stats strip</Text>
        <Text as="p">• Newsletter opt-in</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">Use newsletter sections</Button>
    </Stack>
  </Stack>
</Container>