Receipt Card

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add receipt-card

Usage#

Anatomy#

A header that names the merchant and the date, and the content under it: the hero total, the line items, the sums and a footer with the card and the actions. Every part under the header is droppable: a subscription charge needs only the total and the card.

import {
  ReceiptCardGroup,
  ReceiptCardGroupTotal,
  ReceiptCard,
  ReceiptCardHeader,
  ReceiptCardMark,
  ReceiptCardTitle,
  ReceiptCardDate,
  ReceiptCardAmount,
  ReceiptCardStatus,
  ReceiptCardContent,
  ReceiptCardTotal,
  ReceiptCardItems,
  ReceiptCardItem,
  ReceiptCardTotals,
  ReceiptCardRow,
  ReceiptCardFooter,
  ReceiptCardPayment,
  ReceiptCardActions,
} from "@/components/ui/receipt-card"

<ReceiptCardGroup>
  <ReceiptCard>
    <ReceiptCardHeader>
      <ReceiptCardMark />
      <ReceiptCardTitle />
      <ReceiptCardDate />
      <ReceiptCardAmount />
      <ReceiptCardStatus />
    </ReceiptCardHeader>
    <ReceiptCardContent>
      <ReceiptCardTotal />
      <ReceiptCardItems>
        <ReceiptCardItem />
      </ReceiptCardItems>
      <ReceiptCardTotals>
        <ReceiptCardRow />
      </ReceiptCardTotals>
      <ReceiptCardFooter>
        <ReceiptCardPayment />
        <ReceiptCardActions />
      </ReceiptCardFooter>
    </ReceiptCardContent>
  </ReceiptCard>
  <ReceiptCardGroupTotal />
</ReceiptCardGroup>

Statuses#

Four, set once on the root with status. The status chip words and tones itself from it, so the label and the state can never drift apart. A refund strikes the total through rather than hiding it: the money moved and came back, and the receipt still says how much. A failed charge mutes the total, since nothing was taken.

Line items#

A chat reply is not the place for a seven-line till roll. ReceiptCardItems shows the first three and folds the rest behind a toggle that counts them; opening it grows the list in place and the toggle's label rolls to “Show fewer”. Set max for a different cut, defaultOpen to start unfolded. The quantity column only appears when an item has a quantity.

Compact#

layout="compact" turns the header into one line you can click: the mark, the merchant over the date, the amount over the status. The card itself grows to show the rest, the same object getting taller rather than a panel swapping in. Put the amount in the header with ReceiptCardAmount and leave out the hero total.

Several receipts#

When the assistant finds more than one, stack compact cards in a ReceiptCardGroup. They share one frame and part with hairlines, each opens on its own, and ReceiptCardGroupTotal sums them underneath.

API reference#