Preview

Open in new tab

Order summary

Package totals, line items, and shipping detail in one reusable summary surface.

Order summaries are used across cart, checkout, and confirmation states.

Subtotal: $337
Shipping: Free
Tax estimate: $26
Total: $363

Included patterns

• Line item recap

• Totals detail list

• Promo and shipping notes

Variants

Sticky summary

Sidebar summary for page cart and checkout.

Inline summary

Compact order summary for tighter flows.

Confirmation summary

Summary used after purchase completion.

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">Order summary</Badge>
    <Heading level={1}>Package totals, line items, and shipping detail in one reusable summary surface.</Heading>
    <Text as="p">Order summaries are used across cart, checkout, and confirmation states.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open summaries</Button>
        <Button variant="outline">See order page</Button>
    </Stack>
    <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>Tax estimate</DescriptionList.Term>
        <DescriptionList.Description>$26</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Total</DescriptionList.Term>
        <DescriptionList.Description>$363</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Line item recap</Text>
        <Text as="p">• Totals detail list</Text>
        <Text as="p">• Promo and shipping notes</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui