Preview

Open in new tab

Pricing page pack

A finished pricing page with plan framing, proof, and FAQs.

This page example turns the pricing blocks into a reusable source-owned page template.

Plan grid

Primary pricing card row with emphasized recommended plan.

Comparison section

Makes tier differences explicit without a giant matrix.

FAQ + CTA

Ends with buyer questions and a contact path.

Built from: Pricing sections, stat strip, FAQ surface, and CTA sections.

Use this page example for both public pricing and in-product upgrade funnels.

Variants

Self-serve first

Plan-grid pricing page with enterprise upsell lane.

Comparison-first

Pricing page that leans harder on plan differences.

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, Grid, Heading, Separator, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Pricing page pack</Badge>
    <Heading level={1}>A finished pricing page with plan framing, proof, and FAQs.</Heading>
    <Text as="p">This page example turns the pricing blocks into a reusable source-owned page template.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open pricing page</Button>
        <Button variant="outline">Inspect pricing blocks</Button>
    </Stack>
    <Separator />
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Plan grid</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Primary pricing card row with emphasized recommended plan.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Comparison section</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Makes tier differences explicit without a giant matrix.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>FAQ + CTA</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Ends with buyer questions and a contact path.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Pricing sections, stat strip, FAQ surface, and CTA sections.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Card.Root>
      <Card.Content>
        <Text as="p">Use this page example for both public pricing and in-product upgrade funnels.</Text>
      </Card.Content>
    </Card.Root>
  </Stack>
</Container>

DRYui

Pricing Page Example