Preview

Ecommerce starter

A commerce starter with storefront, PDP, cart, and checkout composition ready to copy.

This starter packages the ecommerce pack into a coherent storefront baseline.

6

page examples

14

commerce blocks

4

conversion stages

Storefront home

Collection previews and promo sections.

Product page

Overview, features, reviews, and incentives.

Cart + checkout

Prebuilt line items, summary, and checkout grouping.

Includes: Storefront, category, product, cart, checkout, and order page examples.

Included patterns

• Store nav

• Collection page

• PDP

• Cart and checkout

Variants

Campaign storefront

Launch-oriented ecommerce starter.

Always-on storefront

General storefront with stronger collection structure.

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">Ecommerce starter</Badge>
    <Heading level={1}>A commerce starter with storefront, PDP, cart, and checkout composition ready to copy.</Heading>
    <Text as="p">This starter packages the ecommerce pack into a coherent storefront baseline.</Text>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">page examples</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>14</Heading>
          <Text as="p">commerce blocks</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">conversion stages</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Storefront home</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Collection previews and promo sections.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Product page</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Overview, features, reviews, and incentives.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Cart + checkout</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Prebuilt line items, summary, and checkout grouping.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Includes</DescriptionList.Term>
        <DescriptionList.Description>Storefront, category, product, cart, checkout, and order page examples.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Store nav</Text>
        <Text as="p">• Collection page</Text>
        <Text as="p">• PDP</Text>
        <Text as="p">• Cart and checkout</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open starter</Button>
        <Button variant="outline">See storefront page</Button>
    </Stack>
  </Stack>
</Container>

DRYui

Ecommerce Starter