Preview

Expense capture

From photo to categorized expense in one interaction.

Receipt Capture compositions use FileUpload, Field, Input, Select, Image, Badge, and Card for end-to-end receipt processing.

3

capture methods

6

extracted fields

3

confidence levels

Best for: Expense report submission, receipt digitization, and audit preparation.
Pairs with: Transaction Management, Budget Tracking, Reimbursement Tracker.

Included patterns

• Drag-and-drop file upload

• Confidence indicator per field

• Auto-categorization with override

• Batch receipt processing

Variants

Upload zone

Drag-and-drop file upload with image preview.

OCR preview

Extracted fields with confidence indicators and edit capability.

Receipt gallery

Grid of captured receipts with status and category tags.

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 { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Expense capture</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Upload</Sidebar.Item>
            <Sidebar.Item href="#">Review</Sidebar.Item>
            <Sidebar.Item href="#">Gallery</Sidebar.Item>
            <Sidebar.Item href="#">Reports</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>From photo to categorized expense in one interaction.</PageHeader.Title>
          <PageHeader.Description>Receipt Capture compositions use FileUpload, Field, Input, Select, Image, Badge, and Card for end-to-end receipt processing.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">capture methods</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">extracted fields</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">confidence levels</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Expense report submission, receipt digitization, and audit preparation.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Transaction Management, Budget Tracking, Reimbursement Tracker.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Drag-and-drop file upload</Text>
        <Text as="p">• Confidence indicator per field</Text>
        <Text as="p">• Auto-categorization with override</Text>
        <Text as="p">• Batch receipt processing</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>

DRYui

Receipt Capture & Processing