Pricing tables and plan comparison cards for SaaS products.
A three-tier pricing comparison with a highlighted recommended plan.
Choose the plan that fits your needs. All plans include a 14-day free trial with no credit card required.
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
const plans = [
{
name: "Basic",
price: "$9",
description: "For individuals and small projects",
features: [
"Up to 3 projects",
"1 GB storage",
"Basic analytics",
"Email support",
"API access",
],
highlighted: false,
cta: "Get Started",
},
{
name: "Pro",
price: "$29",
description: "For growing teams that need more",
features: [
"Unlimited projects",
"50 GB storage",
"Advanced analytics",
"Priority support",
"API access",
"Custom integrations",
"Team collaboration",
],
highlighted: true,
cta: "Start Free Trial",
},
{
name: "Enterprise",
price: "$99",
description: "For large organizations at scale",
features: [
"Unlimited everything",
"500 GB storage",
"Custom analytics",
"Dedicated support",
"API access",
"Custom integrations",
"SSO & SAML",
"SLA guarantee",
],
highlighted: false,
cta: "Contact Sales",
},
]
function CheckIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="shrink-0 text-primary"
>
<path d="M20 6 9 17l-5-5" />
</svg>
)
}
export default function Pricing01() {
return (
<section className="w-full py-20 md:py-28">
<div className="mx-auto max-w-6xl px-6">
<div className="mx-auto mb-16 flex max-w-2xl flex-col items-center gap-4 text-center">
<Badge variant="secondary">Pricing</Badge>
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Simple, transparent pricing
</h2>
<p className="text-lg text-muted-foreground">
Choose the plan that fits your needs. All plans include a 14-day
free trial with no credit card required.
</p>
</div>
<div className="grid gap-6 md:grid-cols-3">
{plans.map((plan) => (
<Card
key={plan.name}
className={
plan.highlighted
? "relative ring-2 ring-primary"
: ""
}
>
{plan.highlighted && (
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
<Badge>Most Popular</Badge>
</div>
)}
<CardHeader>
<CardTitle>{plan.name}</CardTitle>
<CardDescription>{plan.description}</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-6">
<div className="flex items-baseline gap-1">
<span className="text-4xl font-bold text-foreground">
{plan.price}
</span>
<span className="text-muted-foreground">/month</span>
</div>
<ul className="flex flex-col gap-3">
{plan.features.map((feature) => (
<li key={feature} className="flex items-center gap-2 text-sm">
<CheckIcon />
{feature}
</li>
))}
</ul>
</CardContent>
<CardFooter>
<Button
variant={plan.highlighted ? "default" : "outline"}
className="w-full"
>
{plan.cta}
</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</section>
)
}
npx shadcn add https://toro-ui.com/r/pricing-01.jsonA two-plan pricing layout with monthly and annual toggle.
Start building for free, then upgrade when you're ready.
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
const plans = [
{
name: "Starter",
monthlyPrice: 15,
annualPrice: 12,
description: "Perfect for individuals and freelancers",
features: [
"5 projects",
"10 GB storage",
"Analytics dashboard",
"Email support",
],
},
{
name: "Team",
monthlyPrice: 49,
annualPrice: 39,
description: "For teams that need to collaborate",
features: [
"Unlimited projects",
"100 GB storage",
"Advanced analytics",
"Priority support",
"Team management",
"Custom branding",
],
},
]
function CheckIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="shrink-0 text-primary"
>
<path d="M20 6 9 17l-5-5" />
</svg>
)
}
export default function Pricing02() {
const [annual, setAnnual] = useState(false)
return (
<section className="w-full py-20 md:py-28">
<div className="mx-auto max-w-4xl px-6">
<div className="mx-auto mb-12 flex max-w-xl flex-col items-center gap-4 text-center">
<h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
Pick your plan
</h2>
<p className="text-lg text-muted-foreground">
Start building for free, then upgrade when you're ready.
</p>
<div className="flex items-center gap-3">
<Label
htmlFor="billing-toggle"
className="text-sm text-muted-foreground"
>
Monthly
</Label>
<Switch
id="billing-toggle"
checked={annual}
onCheckedChange={setAnnual}
/>
<Label
htmlFor="billing-toggle"
className="text-sm text-muted-foreground"
>
Annual{" "}
<span className="text-xs font-medium text-primary">
Save 20%
</span>
</Label>
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
{plans.map((plan) => (
<Card key={plan.name}>
<CardHeader>
<CardTitle>{plan.name}</CardTitle>
<CardDescription>{plan.description}</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-6">
<div className="flex items-baseline gap-1">
<span className="text-4xl font-bold text-foreground">
${annual ? plan.annualPrice : plan.monthlyPrice}
</span>
<span className="text-muted-foreground">/month</span>
</div>
<ul className="flex flex-col gap-3">
{plan.features.map((feature) => (
<li key={feature} className="flex items-center gap-2 text-sm">
<CheckIcon />
{feature}
</li>
))}
</ul>
</CardContent>
<CardFooter>
<Button className="w-full">Get Started</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</section>
)
}
npx shadcn add https://toro-ui.com/r/pricing-02.json