Preview

Open in new tab

Cart system

Package line items, promos, and totals into a reusable cart surface.

Cart blocks balance editable line items with summary, promo, and shipping context.

$249

Carry-on shell

Graphite / 40L / Qty 1

$88

Packing cube set

Sand / Set of 4 / Qty 2

Subtotal: $337
Shipping: Free
Estimated total: $337

Included patterns

• Line item list

• Promo entry area

• Summary detail list

Variants

Page cart

Full-page cart with editable quantities and summary.

Slide cart

Drawer-friendly cart summary surface.

Quick add cart

Tighter confirmation cart for smaller baskets.

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, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Cart system</Badge>
    <Heading level={1}>Package line items, promos, and totals into a reusable cart surface.</Heading>
    <Text as="p">Cart blocks balance editable line items with summary, promo, and shipping context.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open cart blocks</Button>
        <Button variant="outline">See cart page</Button>
    </Stack>
    <Grid columns={2} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$249</Badge>
            <Heading level={3}>Carry-on shell</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Graphite / 40L / Qty 1</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$88</Badge>
            <Heading level={3}>Packing cube set</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Sand / Set of 4 / Qty 2</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Subtotal</DescriptionList.Term>
        <DescriptionList.Description>$337</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Shipping</DescriptionList.Term>
        <DescriptionList.Description>Free</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Estimated total</DescriptionList.Term>
        <DescriptionList.Description>$337</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Line item list</Text>
        <Text as="p">• Promo entry area</Text>
        <Text as="p">• Summary detail list</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Shopping Carts