SaaS billing UI kit for Tailwind CSS

Billing screens for your SaaS, from plan change to past-due invoice.

Billing is where a SaaS app has the most states and the least design. Flightdeck covers the whole flow: the billing overview, usage-based billing, changing plans, invoices and quotes, a pricing page and checkout, with the edge cases designed in.

About Flightdeck Buy for €79

Part of Flightdeck · One-time payment

Billing overview. What a workspace owner pays, uses and owes: current plan with seats and renewal, usage against plan limits, default payment method, billing contact and the last five invoices, with a page alert when an invoice is overdue.

The awkward states

Past due, payment failed, downgrade and cancel confirmations, refunded and overdue invoices: each is a designed state, not an afterthought.

A working list

The invoices screen filters, sorts, selects, bulk-acts and paginates in the browser, with notes on swapping in server-side data.

Numbers in mono

Amounts line up. Money is formatted by shared helpers, so every screen shows totals, taxes and dates the same way.

A clickable walkthrough

The billing flow is also a clickable walkthrough, so you can see how the screens connect before you build them.

The screens

What each one is for, from its manifest. Click a screen to see it large.

Billing overviewScreenWhat a workspace owner pays, uses and owes: current plan with seats and renewal, usage against plan limits, default payment method, billing contact and the last five invoices, with a page alert when an invoice is overdue.

Usage billingScreenUsage-based billing for one period: a meter per resource (API calls, storage, seats) with used against included, the projection and overage cost, daily API calls against the previous period, the estimated charges with VAT, usage alert rules with switches, and a CSV export.

Change planScreenSwitch plan, billing cycle and seat count with the exact cost in view: plans as option cards, a seat stepper that cannot go below the seats in use, and a summary with proration credit, VAT, amount due today and next renewal, behind a confirm dialog.

InvoicesScreenA filterable invoice list: outstanding, overdue and paid totals, search with status, workspace and date filters, and a sortable, selectable table with bulk actions and pagination. The reference for every list screen.

Invoice detailScreenOne customer invoice: number, status and actions in the header, line items with subtotal, tax and total, payment attempts, activity (sent, viewed, reminders) and a side column with bill-to, from and the invoice facts. Void asks for the invoice number.

New invoiceScreenCreate an invoice: a customer select with billing contact, issue and due dates with payment terms and currency, the line-items editor with discount and tax, notes and payment instructions, a live summary and an Edit / Preview switch. Save draft is outline, Send invoice is the one primary.

QuotesScreenA filterable quote list: awaiting an answer, accepted and acceptance rate, search with status and customer filters, and a sortable table of number, customer, status (draft, sent, accepted, declined, expired), issue and valid-until dates and amount.

PricingScreenThe in-app Plans page (the plan comparison; the Change plan screen does the switching): the plans as columns with a monthly/yearly toggle (or a comparison matrix, or a single plan), questions people ask before switching, a seat calculator that shows the monthly total with VAT, and how a change is prorated.

Checkout paymentScreenStep 2 of the store checkout: card, SEPA direct debit or invoice as radio cards, the fields of the chosen method, a billing-address toggle and the order summary. The card fields are a UI demo; real apps use hosted fields.

Questions

Is it connected to Stripe or another payment provider?

No. These are interface screens with demo data. You connect them to your own billing backend.

Which billing models does it cover?

Seat-based plans and usage-based billing, with plan changes, invoices, quotes and a checkout.

What else is in Flightdeck?

204 screens, 62 blocks, 44 components, 6 app shells and 18 clickable walkthroughs for admin and SaaS apps, in light and dark. These screens are one part of it.

What does it cost?

€79 once for one person, €499 for your whole company, with Team and Studio licenses in between. All include lifetime updates and unlimited projects. Free for everyone who bought AirControl.

Get these screens and the rest of Flightdeck.

€79 once for one person, €499 for your whole company. Lifetime updates included.

Buy for €79 See everything inside