Billing & Payment Blocks based on shadcn/ui
Easily manage billing contacts and information associated with different companies within one platform. Built with shadcn/ui Card and Button components for a clean, accessible interface. Perfect for multi-company billing management, enterprise dashboards, and SaaS platforms requiring organized billing contact management.
Billing Information
View and update your billing details quickly and easily.
Company
Company
Company
import BillingInformation01 from "@/components/creative-tim/blocks/billing-information-01"
export default function Page() {
return <BillingInformation01 />
}
Showcases dark and light versions of a card with bank brand logos. Built with shadcn/ui Card component for consistent styling across themes. Ideal for payment forms, checkout processes, wallet sections, financial dashboards, and any interface requiring elegant credit card visualization with theme support.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PRO4562 1122 4594 7852
Card Holder
Jack Peterson
Expires
10/25
4562 1122 4594 8844
Card Holder
Jack Peterson
Expires
10/26
import CardDisplay01 from "@/components/creative-tim/blocks/card-display-01"
export default function Page() {
return <CardDisplay01 />
}
Manage payment methods with a straightforward UI layout featuring shadcn/ui Card, Button, and Tooltip components. Card brands are clearly identified, sensitive information is partially hidden for security, and editing/deleting functions are easily accessible. Includes a call-to-action button for adding new payment methods. Perfect for account settings, billing pages, and checkout flows.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPayment Methods
Manage your preferred payment methods securely and conveniently.
**** **** **** 7852
mastercard Card
**** **** **** 9831
visa Card
**** **** **** 8362
visa Card
**** **** **** 0098
mastercard Card
import PaymentMethod01 from "@/components/creative-tim/blocks/payment-method-01"
export default function Page() {
return <PaymentMethod01 />
}
Provides a detailed record of financial transactions with various service providers, featuring trend arrows indicating whether values are up or down. Built with shadcn/ui Button, Calendar, Card, and Popover components for an interactive filtering experience. Includes date range selection for easy transaction filtering. Ideal for billing dashboards, financial reports, and transaction monitoring interfaces.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROHistory Transactions
Track and monitor your financial activity.
March 2023
Netflix
27 March 2026, at 12:30 PM
- $2,500.00
Apple
27 March 2026, at 04:30 AM
+ $2,000.00
February 2023
Stripe
26 March 2026, at 13:45 PM
- $2,500.00
HubSpot
26 March 2023, at 12:30 PM
+ $750.00
Figma
26 March 2023, at 08:30 AM
+ $1,400.00
Webflow
26 March 2023, at 05:00 AM
Pending
import TransactionHistory01 from "@/components/creative-tim/blocks/transaction-history-01"
export default function Page() {
return <TransactionHistory01 />
}
Provides an overview of invoices with shadcn/ui Badge components indicating payment status (paid, pending, overdue) and Button components for downloading invoice PDFs. Clean, organized layout with visual separators for easy scanning. Perfect for billing portals, accounting dashboards, and financial management systems requiring clear invoice tracking and download capabilities.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROInvoices
Track and monitor your financial activity.
INV-24 #MS-415646
October 15, 2024
$2,500.00
INV-23 #MS-415740
October 10, 2024
$1,750.00
INV-22 #MS-946285
September 15, 2024
$1,500.00
INV-21 #MS-739734
September 10, 2024
$2,990.00
INV-20 #MS-848649
August 15, 2024
$3,500.00
import Invoices01 from "@/components/creative-tim/blocks/invoices-01"
export default function Page() {
return <Invoices01 />
}
Select billing add-ons with checkboxes and see an instant pricing summary. Includes annual billing toggles, add-on badges, and plan safeguards.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROBilling Add-ons
Customize your plan with flexible add-ons and live totals.
Track every admin change with searchable logs.
$19 / mo
per workspace
Dedicated Slack channel and 2-hour response time.
$39 / mo
per workspace
Add 10 more automation workflows per month.
$25 / mo
per workspace
SOC2 reports and data export assistance.
$29 / mo
per workspace
Annual billing
Save 15% when billed yearly.
Order summary
Auto-renew add-ons
Keep add-ons active on renewals.
Invoice to finance
Send a summary invoice to billing.
import BillingAddonsSelector from "@/components/creative-tim/blocks/billing-addons-selector"
export default function Page() {
return <BillingAddonsSelector />
}