Pricing Plans
A 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.
src/registry/blocks/pricing-plans.tsx/r/pricing-plans.json
Installation#
bash
npx shadcn@latest add https://ui.minidev.pro/r/pricing-plans.json
Usage#
tsx
import { PricingPlans } from "@/components/ui/pricing-plans"
export function Example() {
return <PricingPlans />
}
API reference#
| Prop | Type | Default |
|---|---|---|
eyebrow | string | "Pricing" |
title | React.ReactNode | "Priced like a tool, not a hire." |
description | React.ReactNode | "Per seat, per month. Change plans an... |
plans | Plan[] | DEFAULT_PLANS |
currency | string | "USD" |
yearlyBadge | string | "-20%" |
onSelect | (plan: string, period: "monthly" | "yearly") => void | - |
unit | string | "/ seat / mo" |
per | string | "per seat" |
className | string | - |
Dependencies#
npm
lucide-react
Built from
Related billing components#
Billing PageA 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.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.
All pricing and billing components