React pricing and billing components
Free React pricing and billing components: pricing tables, monthly and yearly toggles, plan cards, checkout, invoices, payment methods, usage meters and cancel flows.
30 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Pricing and billing screens have a direct line to revenue, so they are worth getting right. This set covers the public pricing page and everything after it: plan changes, invoices, payment methods, credits, usage and a respectful cancel flow.
Every component is UI only, so it works with Stripe, Paddle, Lemon Squeezy or your own billing API. The pricing guide shows a full page built from these parts.
Components 22
Add Card FormuiCompact payment form for card number, expiry and CVC with correct autocomplete hints, numeric input mode and a full width save button. Ready for your processor.npx shadcn@latest add ui.minidev.pro/r/add-card-form.jsonBilling AddressuiTailwind billing address fieldset with a multiline street field and a responsive row for city, state and postal code. Drops into checkout forms.npx shadcn@latest add ui.minidev.pro/r/billing-address.jsonCancel FlowuiTwo step subscription cancellation flow: ask for a reason with radio options, then confirm with a destructive button or go back. Tells users what they keep.npx shadcn@latest add ui.minidev.pro/r/cancel-flow.jsonComparison TableuiPlan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.npx shadcn@latest add ui.minidev.pro/r/comparison-table.jsonCredit BalanceuiCompact credit balance pill with a small label and a large tabular figure. Shows remaining credits or usage balance for AI and pay-as-you-go apps.npx shadcn@latest add ui.minidev.pro/r/credit-balance.jsonDowngrade WarninguiTailwind plan downgrade warning card with an amber border, a summary of what gets locked on the free plan, and Keep plan or Downgrade buttons.npx shadcn@latest add ui.minidev.pro/r/downgrade-warning.jsonInvoice DetailuiAn invoice card with the number, date, a paid, open or void status badge, itemized line amounts and a bold total row. Built with React for billing pages.npx shadcn@latest add ui.minidev.pro/r/invoice-detail.jsonInvoice ListuiA bordered list of invoices showing number, date, amount and a paid, open or void status badge on each row. Fits the billing history in account settings.npx shadcn@latest add ui.minidev.pro/r/invoice-list.jsonPayment Method CarduiA saved card row showing the card brand, last four digits and expiry date in monospace, with an Edit button. Fits the payment methods area of billing.npx shadcn@latest add ui.minidev.pro/r/payment-method-card.jsonPlan CarduiA pricing plan card with the plan name, a large price per period, a feature list and a full width call to action. A highlighted prop marks the recommended tier.npx shadcn@latest add ui.minidev.pro/r/plan-card.jsonPlan ComparisonuiA Free versus Pro comparison table with a row per feature and check or dash icons in each plan column. Shows what an upgrade unlocks on Tailwind pricing pages.npx shadcn@latest add ui.minidev.pro/r/plan-comparison.jsonPricing TableuiA three column pricing section that renders a PlanCard for each tier you pass in, stacking on mobile. Mark one plan as highlighted to steer visitors toward it.npx shadcn@latest add ui.minidev.pro/r/pricing-table.jsonPricing ToggleuiA Monthly and Yearly billing period switch built on a segmented control, with a Save 20% with yearly note underneath. Pairs with pricing tables and plan cards.npx shadcn@latest add ui.minidev.pro/r/pricing-toggle.jsonQuota BaruiCompact quota bar showing a label, used over max with locale formatting, and a thin accent progress track exposed as an ARIA progressbar for plan limits.npx shadcn@latest add ui.minidev.pro/r/quota-bar.jsonReceiptuiMonospace payment receipt card with an order id, itemized amounts in tabular numerals and a bold total row. Built with Tailwind for checkout and billing pages.npx shadcn@latest add ui.minidev.pro/r/receipt.jsonSeat ManageruiTeam seat manager card showing seats used out of the plan, an Invite button, and a member list with name, email and role badge. Built in React for billing.npx shadcn@latest add ui.minidev.pro/r/seat-manager.jsonTax FieldsuiCheckout tax fields with country and a monospace VAT or EIN tax ID input in a two-column grid. Drop it into billing address forms for business customers.npx shadcn@latest add ui.minidev.pro/r/tax-fields.jsonTrial BanneruiTrial banner with a days left headline, a short note on what stays unlocked and an Upgrade button, on an accent tinted strip. Built for SaaS billing nudges.npx shadcn@latest add ui.minidev.pro/r/trial-banner.jsonUpgrade PromptuiUpgrade prompt card with a title, a short description of what the paid plan unlocks and an Upgrade button. Place it where a free user hits a gated feature.npx shadcn@latest add ui.minidev.pro/r/upgrade-prompt.jsonUsage BreakdownuiUsage breakdown listing several metered items, each with its label, used over limit and a thin accent bar. Use it on billing pages to show where plan limits go.npx shadcn@latest add ui.minidev.pro/r/usage-breakdown.jsonUsage MeteruiSingle usage meter with a label, used over limit count and a Progress bar linked by aria-labelledby. Handy for API calls, storage or seats on billing pages.npx shadcn@latest add ui.minidev.pro/r/usage-meter.jsonCredit Card InputuiReact credit card input that groups the number by brand, runs a Luhn check, formats expiry as MM / YY and sizes the CVC for Amex. A UI only form, no payment processing.npx shadcn@latest add ui.minidev.pro/r/credit-card-input.json
Blocks and full pages 2
Billing PageblockA Tailwind workspace billing page with three plan cards and a highlighted Pro tier, a seat usage meter, and an invoice list with paid and void statuses.npx shadcn@latest add ui.minidev.pro/r/billing-page.jsonPricing PlansblockA React pricing section with a monthly or yearly switch that rolls prices to the new value, a featured ink plan, and feature rows marked included or not.npx shadcn@latest add ui.minidev.pro/r/pricing-plans.json
Motion 6
Feature ComparisonmotionA free versus premium comparison table with check, dash or text cells whose rows fade in on scroll. Pass an array of rows to compare plan features.npx shadcn@latest add ui.minidev.pro/r/feature-comparison.jsonFree Premium ComparemotionA two column tier comparison with free and premium cards, feature checklists, price blurbs and CTAs, with the featured tier outlined in the accent color.npx shadcn@latest add ui.minidev.pro/r/free-premium-compare.jsonMorph PricemotionA price display with a monthly or yearly toggle where the old amount springs out and the new price springs in. A compact pricing interaction for plan cards.npx shadcn@latest add ui.minidev.pro/r/morph-price.jsonPricing KineticmotionA pricing section pairing a kinetic headline and a typographic marquee with a free versus premium feature comparison table. Built for React launch pages.npx shadcn@latest add ui.minidev.pro/r/pricing-kinetic.jsonPricing MotionmotionPricing plan cards that fade up in sequence on scroll, each with name, price, blurb, feature bullets and a choose button, plus an accent featured plan.npx shadcn@latest add ui.minidev.pro/r/pricing-motion.jsonPricing PagemotionA full Tailwind pricing page with a monthly or yearly toggle, animated plan cards, a feature comparison table, pricing FAQs, a glowing CTA and a mega footer.npx shadcn@latest add ui.minidev.pro/r/pricing-page.json
Frequently asked questions
Does the pricing table support monthly and yearly billing?
Yes. Pair it with the pricing toggle, and the price can animate between values when the period changes.
Do these connect to Stripe?
They render data you pass in, so you can load plans, invoices and payment methods from Stripe and render them with these components.
How do I highlight the recommended plan?
Mark one plan as highlighted. It gets a stronger border, a badge and the primary button, which draws the eye without shouting.