Pricing Card

npx shadcn@latest add https://ui.saasflare.io/r/pricing-card.json

pnpm add @saasflare/ui

"use client"import { Button, PricingCard } from "@saasflare/ui"/** A single pricing plan with features and a call-to-action. */export function Demo() {    return (        <PricingCard            className="w-full max-w-sm"            name="Pro"            price="$29"            period="month"            description="For growing teams that ship fast."            features={[                "Unlimited projects",                "Priority support",                "Advanced analytics",                "5 team seats",            ]}            cta={<Button fullWidth>Start free trial</Button>}        />    )}

"use client"import { Button, PricingCard } from "@saasflare/ui"/** * Feature rows carrying more than a label: a tooltip that explains a limit, * and an excluded row that shows what the tier does *not* include. Plain * strings and descriptors can be mixed freely in the same list. */export function Demo() {    return (        <div className="grid w-full gap-6 pt-3 md:grid-cols-2">            <PricingCard                name="Free"                price="$0"                description="Everything you need to validate the idea."                features={[                    "100 credits per month",                    "Up to 3 projects",                    { label: "1 seat", tooltip: "Invite teammates by upgrading to Pro." },                    { label: "API access", excluded: true },                    { label: "SSO & audit log", excluded: true },                ]}                cta={                    <Button variant="outline" fullWidth>                        Start free                    </Button>                }            />            <PricingCard                featured                badge="Most popular"                name="Pro"                price="$29"                period="month"                description="For the product that already has customers."                features={[                    "1,000 credits per month",                    "Up to 20 projects",                    { label: "5 seats", tooltip: "Add more seats at $9/month each from Settings → Team." },                    "API access",                    { label: "SSO & audit log", excluded: true },                ]}                cta={<Button fullWidth>Start 14-day trial</Button>}            />        </div>    )}

"use client"import { Button, PricingCard } from "@saasflare/ui"/** Three plan tiers with the recommended plan highlighted via `featured`. */export function Demo() {    return (        <div className="grid w-full gap-6 pt-3 md:grid-cols-3">            <PricingCard                name="Starter"                price="$0"                period="month"                description="For solo builders."                features={["1 project", "Community support", "1 GB storage"]}                cta={                    <Button variant="outline" fullWidth>                        Get started                    </Button>                }            />            <PricingCard                featured                name="Pro"                price="$29"                period="month"                description="For growing teams."                features={["Unlimited projects", "Priority support", "5 seats"]}                cta={<Button fullWidth>Start free trial</Button>}            />            <PricingCard                name="Enterprise"                price="$99"                period="month"                description="For large organizations."                features={["Everything in Pro", "SSO & SAML", "Custom SLAs"]}                cta={                    <Button variant="outline" fullWidth>                        Contact sales                    </Button>                }            />        </div>    )}