Preview

Open in new tab

Order history

Make post-purchase account surfaces feel productized too.

Order history surfaces package repeatable order rows, status states, and receipt detail.

$337

Order #48211

2 items · Delivered · March 12

$189

Order #47803

1 item · In transit · March 2

$412

Order #47288

3 items · Delivered · February 18

Included patterns

• Status treatment

• Order rows

• Receipt summary and reorder action

Variants

Account order list

Chronological purchase history for account pages.

Receipt detail

Single order detail and receipt framing.

Reorder history

Order history with quick repurchase actions.

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 history</Badge>
    <Heading level={1}>Make post-purchase account surfaces feel productized too.</Heading>
    <Text as="p">Order history surfaces package repeatable order rows, status states, and receipt detail.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Open order history</Button>
        <Button variant="outline">See order page</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$337</Badge>
            <Heading level={3}>Order #48211</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">2 items · Delivered · March 12</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$189</Badge>
            <Heading level={3}>Order #47803</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">1 item · In transit · March 2</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">$412</Badge>
            <Heading level={3}>Order #47288</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">3 items · Delivered · February 18</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Status treatment</Text>
        <Text as="p">• Order rows</Text>
        <Text as="p">• Receipt summary and reorder action</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>

DRYui

Order History