Solid billing blocks.

167 billing screens for inside a SaaS app, shown to a customer who already has an account: current plan, usage and limits, upgrades and downgrades, invoices, payment methods, credits, seats, tax details and cancellation. A pricing table sells plans to visitors; these manage the plan after the sale. The gallery sorts them into 14 groups: Plan and usage, Payment and invoices, Upgrade and downgrade, Upsell and retention, Credits and prepaid balance, Usage and limits, Cards and payment methods, Invoices and receipts, Team and contacts, Tax and verification, Checkout and pricing, Offers and discounts, Referrals and rewards, Payouts.

For invoices use Invoice History Billing. For cancelling use Cancel Retention Billing, or Pause Subscription Billing to offer a pause. For a plan change use Upgrade Proration Billing and Downgrade Confirmation Billing. For quotas use Usage Meters Billing, for team seats Seat Management Billing, and for a card on file Payment Method Billing.

No. They are the interface only. Amounts, plans and invoices are typed into each file, a few blocks name Stripe in text, and none calls a payment API. The comments in the files mark where your billing provider call goes, and card fields should be your provider's hosted fields.

They work them out from the typed figures. Upgrade Proration Billing computes the credit for the days left on the old plan, the new plan's cost for the same days and what is due today. Cancel Retention Billing computes the discounted price and the saving. Your server remains the source of truth for what is actually charged.

Invoice History Billing reads an INVOICES array of objects (id, date, description, amount, status of paid, due or failed, and optionally dueOn and a note). Map your provider's invoice list into that shape, note that the amount is a number of dollars there, and link the PDF button to the invoice's hosted or PDF address. The status filter and the counts follow from the data.

The buttons only change the page's state. In Cancel Retention Billing the three steps (reason, offer, confirm) end on a confirmation with Undo, so call your server when the last step is confirmed and when the offer is accepted. In Invoice History Billing the Retry payment button settles the failed invoice in the tab: replace that with a retry call and show its result.

Edit the ACCOUNT and PLANS constants in Upgrade Proration Billing: the billing period's start and end, today, the seats and the current plan's seat price, plus each plan in PLANS. Replace the fixed today with the current date and the credit, the new cost and the amount due today are recalculated. Mind the unit, since some billing blocks keep money in whole cents and others in dollars.

In Usage Meters Billing each meter is an object with a label, a limit, a used value, a unit and a sentence on what happens next. Fill them from your metering data. The bar turns to a warning tone from 80% (WARN_AT) and to an over-limit tone past 100%, and a tick marks the 80% line.

Payment Method Billing checks the card fields in the page and never stores them, and its comment says to wire the form to your payment provider's hosted fields. Replace the number, expiry and CVC inputs with your provider's elements so card digits never reach your own code, and keep the expiry warning and the make-default buttons.

This page lists 167 of the category's 167 billing blocks for Solid. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Solid billing blocks are the React ones ported to Solid, on Ark UI's Solid primitives. They keep the layout, the copy and the theme tokens, and install with shadcn (/r/solid/billing-cancel-retention.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Solid needs solid-js @ark-ui/solid lucide-solid installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn@latest add` with the block's registry URL, such as /r/solid/billing-cancel-retention.json for Cancel Retention Billing. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of billing block, led by checkout and pricing (21), invoices and receipts (20), usage and limits (19) and upsell and retention (14), and sort by popular or name. A good first look: Cancel Retention Billing, Checkout Plan Picker Billing and Credit Top Up Billing. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a billing block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the the account, changing plan and checkout and tax kinds.

Open its page and use the full-screen viewer (/view/billing/solid/cancel-retention) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each billing block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the billing blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 167 billing blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a billing block, read it with get_block and install it on your Solid stack.

Pass `category: "billing"` to search_blocks to search only the 167 billing blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "billing", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.