Pricing Table

A 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.

src/registry/ui/pricing-table.tsx/r/pricing-table.json

Installation#

bash

npx shadcn@latest add @minidev/pricing-table

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/pricing-table.json

Usage#

tsx

import { PricingTable } from "@/components/ui/pricing-table"

export function Example() {
  return (
    <PricingTable className="w-full" plans={[
      { name: "Free", price: "$0", features: ["10 components","Community"], cta: "Start" },
      { name: "Pro", price: "$29", features: ["All components","Priority"], highlighted: true },
      { name: "Team", price: "$99", features: ["Seats","SSO","Audit"] },
    ]} />
  )
}

API reference#

PricingTable props
Prop	Type	Default
`plans`	`Plan[]`	`SAMPLE_PLANS`
`className`	`string`	`-`

Dependencies#

npm

React only

Built from

Examples#

BillingPlans & invoices

Add Card FormCompact 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.Billing AddressTailwind billing address fieldset with a multiline street field and a responsive row for city, state and postal code. Drops into checkout forms.Cancel FlowTwo 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.Comparison TablePlan comparison table with features as rows and plans as columns, showing check or dash icons for booleans and text for values. Scrolls on mobile.Credit BalanceCompact 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.Downgrade WarningTailwind plan downgrade warning card with an amber border, a summary of what gets locked on the free plan, and Keep plan or Downgrade buttons.

All pricing and billing components

Learn more

Build a SaaS pricing page in React and TailwindGuide Best Tailwind CSS component libraries, free and paidGuide All pricing sections10 blocks