Receipt tile, invoice number and date, plan, amount, status Badge and a download action.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/invoice-rowPlayground
INV-2026-0142Due Oct 12, 19 days lateTeam plan · 8 seats$1,280.00Overdue
States
INV-2026-0142Issued Oct 12Team plan · 8 seats$1,280.00Paid
INV-2026-0142Due Nov 12Team plan · 8 seats$1,280.00Due
INV-2026-0142Due Oct 12, 19 days lateTeam plan · 8 seats$1,280.00Overdue
INV-2026-0142Issued Oct 12Team plan · 8 seats−$480.00Refunded
State
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/invoice-row
Accessibility
- Status is a label and a mark.
- Download names the invoice.
Motion
- The row fades in over 240 ms.
- Controls press to 0.98.
- With reduced motion, the row appears in place.
Responsive behavior
- 640 wide on Web and 358 on Mobile.
- Mobile drops the plan column and stacks the Badge under the amount.
Performance
- Holds no state, and the fade in is CSS that reduced motion turns off.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import InvoiceRow from @/components/fetaui/invoice-row. It composes Button and Icon Button with Tag from data-kit.
- state sets the badge. overdue swaps Download for Pay now, so wire both onDownload and onPay.
- date and amount are preformatted strings, so the overdue wording is yours. Write the days late into date.
Related
Invoice EditorProBlockEditable line items with quantity, rate and amount, live totals and draft actions.Billing OverviewProBlockBilling settings: current plan, card on file, usage meters and invoices.TableComponentNative table parts on one cell component, in Compact or Comfortable density and Plain or Grid style.Payment MethodComponentA saved card: brand tile, label and expiry, status and a menu. Add is a dashed row.