Back to components
Invoice Status Card React component

What is this?

A white invoice tile: the customer, invoice number, amount due, date, and a status pill for Open, Paid, or Overdue. In the demo the pill eases from Open to Paid, the amount turns green, the payment bar fills, and the due date gives way to “Paid by card”. It holds on Paid under reduced motion. Swap the figures and status labels, then drop it into a billing or finance feature block.

Component

Invoice Status Card

A white invoice tile: the customer, invoice number, amount due, date, and a status pill for Open, Paid, or Overdue. In the demo the pill eases from Open to Paid, the amount turns green, the payment bar fills, and the due date gives way to “Paid by card”. It holds on Paid under reduced motion. Swap the figures and status labels, then drop it into a billing or finance feature block.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Not detected in source
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0