Preview

Open in new tab

Pricing blocks

Show the plans, the trade-offs, and the upgrade path.

Pricing sections include headline, plan cards, and the detail list teams usually forget to add.

3

plan layouts

2

comparison styles

2

contract paths

$29

Core

Best for small teams.

$79

Growth

Adds approvals, analytics, and workflows.

Contact

Enterprise

Includes SSO, governance, and support.

Supports: Monthly/yearly framing, plan badges, comparison copy, and enterprise notes.

Variants

Plan grid

Three-up pricing cards with badge treatment.

Comparison ladder

Table-adjacent layout for tier-by-tier differences.

Enterprise split

Self-serve plans plus sales-assisted contract lane.

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">Marketing</Badge>
    <Heading level={1}>Show the plans, the trade-offs, and the upgrade path.</Heading>
    <Text as="p">Pricing sections include headline, plan cards, and the detail list teams usually forget to add.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open pricing blocks</Button>
        <Button variant="outline">See pricing page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">plan layouts</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">comparison styles</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">contract paths</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$29</Badge>
            <Heading level={3}>Core</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Best for small teams.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$79</Badge>
            <Heading level={3}>Growth</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Adds approvals, analytics, and workflows.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Contact</Badge>
            <Heading level={3}>Enterprise</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Includes SSO, governance, and support.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Supports</DescriptionList.Term>
        <DescriptionList.Description>Monthly/yearly framing, plan badges, comparison copy, and enterprise notes.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
  </Stack>
</Container>

DRYui

Pricing Sections