Invoice Dashboard

A complete, fully functional, and editable Invoice dashboard component featuring 3 distinct design variants: Default, Corporate Executive, and Neo-Brutalist.

The component is fully encapsulated — hand it an invoiceData object and it owns the rest. Click Edit in the right sidebar of any preview to add items, change quantities and download the resulting JSON.

Default Dashboard Invoice

Editing, totals, printing and JSON export are all handled internally.

Pass oneinvoiceData: object holding the dates, addresses, billing details, line items, totals and notes.
color: themes the primary buttons, focus rings and heart icon.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Invoice

npx shadcn@latest add @algorize-ui/invoice

components/custom/blocks/Invoice.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Invoice needs only the cn helper and lucide-react, which the installation guide already put in place.

Variations

Corporate Executive

High-contrast solid header banner layout for formal B2B billing and corporate accounts.

Neo-Brutalist

Bold 2px hard black borders, offset hard drop shadows, and high-contrast typography.

Features

Explore the Invoice component's structured layout for displaying billing information, line items, and dynamic total calculations.

3 Design Variants

Choose from Default, Corporate Executive, and Neo-Brutalist layout variants.

Interactive Edit & Export

Inline editing for item prices, descriptions, quantities, with instant recalculations and JSON export.

Print & PDF Ready

Built-in browser print triggers that automatically hide control sidebars and format clean PDF pages.

Theme Integration

Seamless support for custom color themes across primary buttons, focus rings, and badges.

Props Reference

Prop	Type	Default	Description
`invoiceData`	`InvoiceData`	Required	The core data object containing all fields (dates, addresses, billing details, array of items, totals, and notes).
`variant`	`"default" \| "corporate" \| "brutalist"`	`"default"`	Applies overarching structural layouts, including borders, backdrop blurs, and shadows.
`color`	`"primary" \| "indigo" \| "rose" \| "emerald" \| "zinc"`	`"primary"`	Applies global color themes to buttons, focus rings, and highlights.