KQ-684 · RECEIPT/DRAWER

Receipt Drawer

A filing drawer for receipts. The front is a disclosure that pulls the drawer open on glide to a height a ResizeObserver measured, each receipt inside is a card that expands where it stands on glide with its lines arriving on a cascade, and searching filters the cards with a FLIP: survivors travel to their new rows on glide while the ones that leave fade on the exit ease. The front and every card are real aria-expanded buttons; Up and Down move between cards, Escape closes an open card and returns focus, and Escape in a non-empty search clears it.

KQ-684 · RECEIPT/DRAWER

- Flat white × 2$9.20
- Seed loaf$5.40
- Client breakfast
- Total$14.60
- Day pass$11.00
- Day pass$11.00
- Total$22.00
- Field notebooks × 5$42.50
- Marker set$31.85
- Shipping$12.00
- Total$86.35
- Studio plan · September$48.00
- Monthly
- Total$48.00
- Cold brew × 2$7.80
- Total$7.80

Drawer open · 5 of 5 · none open

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/receipt-drawer

Props

receipts: Receipt[]; default —; Each receipt carries an id, merchant, a pre-formatted date, its total, its line items and an optional note.
open / defaultOpen: boolean; default false; Controlled or initial drawer state; onOpenChange fires from the press on the front.
query / defaultQuery: string; default ""; Controlled or initial search text; onQueryChange fires from the input event.
expandedId / defaultExpandedId: string | null; default null; Which receipt is open; onExpandedChange fires from the press or Escape that changed it.
format: (value: number) => string; default —; Formats every amount. Defaults to a fixed en-US currency formatter so server and client print the same string.
label: string; default "Receipts"; The drawer's title and accessible name.
searchLabel: string; default "Search receipts"; Label for the search field.
emptyMessage: string; default "No receipts match."; Shown when the search matches nothing.

Prop	Type	Default	Description
receipts	Receipt[]	—	Each receipt carries an id, merchant, a pre-formatted date, its total, its line items and an optional note.
open / defaultOpen	boolean	false	Controlled or initial drawer state; onOpenChange fires from the press on the front.
query / defaultQuery	string	""	Controlled or initial search text; onQueryChange fires from the input event.
expandedId / defaultExpandedId	string \| null	null	Which receipt is open; onExpandedChange fires from the press or Escape that changed it.
format	(value: number) => string	—	Formats every amount. Defaults to a fixed en-US currency formatter so server and client print the same string.
label	string	"Receipts"	The drawer's title and accessible name.
searchLabel	string	"Search receipts"	Label for the search field.
emptyMessage	string	"No receipts match."	Shown when the search matches nothing.