Shadcn UI Settings Billing Block
SettingsBilling1 is a comprehensive billing settings page with three sections. The usage section shows cards with progress bars for user licenses and API credits, using color-coded bars that shift from green to orange based on consumption. The account information section displays billing contact, organization, address, and tax ID with edit and payment management buttons. The payment history section shows an invoice table with status badges and download actions.
Light background with bordered usage cards on a subtle muted background. Progress bars use dynamic color mixing based on usage percentage. Status badges use green for Paid and yellow for Pending. The table includes download icon buttons for each invoice. An end subscription button with destructive styling appears at the bottom.
This is a complete billing dashboard suitable for SaaS applications. The usage visualization with color-coded progress bars provides clear at-a-glance status. Moderate complexity with data-driven components for usage, details, and invoices.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
badge @shadcn | Registry |
button @shadcn | Registry |
table @shadcn | Registry |