Receipt

Stable

Collapse a card the person already answered into one line. It opens again to show the full card.

Also known as confirmation, order summary, summary

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

<div className="w-full max-w-md">
  <Receipt title="Confirmed the facts" meta="₹2,340">
    <p className="text-body leading-5 text-fg-muted">Order #48213, kettle, arrived damaged, paid ₹2,340.</p>
  </Receipt>
</div>

The default is one line. The check is decorative; the title says what happened.

Usage Code Design Accessibility

When to use it

The pattern: every decision card in a thread becomes a Receipt after the person acts. The thread then reads as a short list of what happened, and the detail is still one press away.

Made of: Check icon · Title · Meta · Chevron · Opened card

Use it for

A question card, approval or form that the person has finished.
A step the agent finished that the person may want to check later.
Any card that matters while it is open and only for reference afterwards.

Not for

A section that opens and closes as part of the page: use Collapsible.
A card the person still has to act on: use ApprovalPrompt.
A history of events over time: use Timeline.

Do and avoid

Do. A settled step folds to one line, with the detail one press away.

Avoid. The send failed, but the folded line looks done, so nobody fixes it.

Do

Turn a decision card into a Receipt as soon as the person acts.
Name the receipt for what happened, not for the card.
Put the one fact people look for in meta, such as the amount.

Avoid

Do not use a Receipt for something the person still has to do.
Do not hide a failure inside a closed Receipt. Show it.
Do not nest Receipts.

On a phone

The header row is at least 44px tall on touch screens and spans the full width.
The title wraps, while the meta text on the right keeps its size and does not wrap.
It opens with a tap, and whatever you put inside needs to fit a phone width.

Properties

Prop	Type	Default	Description
titlerequired	string	none	What was settled, such as "Confirmed the facts".
childrenrequired	ReactNode	none	The full card, shown when opened.
meta	ReactNode	none	Short note on the right, such as a date or an amount.
icon	ReactNode	none	Replaces the default check. It is decorative and hidden from screen readers.
defaultOpen	boolean	false	Start open. Ignored when open is passed.
open	boolean	none	Controlled open state.
onOpenChange	(open: boolean) => void	none	Called when the person opens or closes the receipt.
keepMounted	boolean	none	Keep children mounted, hidden, while closed. Use it to keep state inside the card.
className	string	none	Extra classes for the outer box.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one Receipt switches all of this from its properties panel, across 8 variants. Each property sets the React prop beside it, so design and code use the same names.

Receipt in Figma: each property and the React prop it sets
Figma property	React	Values
Open	`open`	On or off
State	Hover, Pressed and Focus come from the browser.	Default, Hover, Pressed, Focus
Title	`title`	Any text
Meta	`meta`	Any text

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

open: The children show under the row, the chevron turns down and aria-expanded is true.
closed: Only the row shows. The children are not mounted unless keepMounted is set.
hover: The row gets a soft background under the pointer.
focus: A visible focus ring appears on the row when reached with the keyboard.

Tokens

Change one of these and every part that uses it follows.

--surface
--border
--surface-hover
--success-fg
--fg-muted
--fg-subtle
--dur-fast
--radius-card

Closed