New: 149+ components, Page Builder, and more
AI App Building Blocks for the Web
Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
Files
"use client"
import { Check } from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
export const description =
"A pricing table with three tiers: Free, Pro, and Enterprise. Each tier displays features and a call-to-action button."
export const iframeHeight = "800px"
export const containerClassName = "w-full"
const tiers = [
{
name: "Free",
price: "$0",
description: "Perfect for getting started",
features: [
"Up to 10 components",
"Basic support",
"Community access",
"1 project",
],
cta: "Get Started",
highlighted: false,
},
{
name: "Pro",
price: "$29",
description: "For professional developers",
features: [
"Unlimited components",
"Priority support",
"Private repository access",
"Unlimited projects",
"Advanced analytics",
"Custom themes",
],
cta: "Start Free Trial",
highlighted: true,
badge: "Popular",
},
{
name: "Enterprise",
price: "Custom",
description: "For large teams and organizations",
features: [
"Everything in Pro",
"Dedicated support",
"SLA guarantee",
"Custom integrations",
"On-premise deployment",
"Training & onboarding",
],
cta: "Contact Sales",
highlighted: false,
},
]
export function Component() {
return (
<div className="w-full py-12">
<div className="container px-4 md:px-6">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
Simple, transparent pricing
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Choose the plan that's right for you
</p>
</div>
<div className="grid gap-8 md:grid-cols-3">
{tiers.map((tier) => (
<Card
key={tier.name}
className={tier.highlighted ? "border-primary shadow-lg" : ""}
>
<CardHeader>
<div className="flex items-center justify-between">
<CardTitle>{tier.name}</CardTitle>
{tier.badge && <Badge variant="default">{tier.badge}</Badge>}
</div>
<CardDescription>{tier.description}</CardDescription>
</CardHeader>
<CardContent>
<div className="mb-6">
<span className="text-4xl font-bold">{tier.price}</span>
{tier.price !== "Custom" && (
<span className="text-muted-foreground">/month</span>
)}
</div>
<ul className="space-y-3">
{tier.features.map((feature) => (
<li key={feature} className="flex items-start">
<Check className="mr-2 h-5 w-5 text-primary flex-shrink-0" />
<span className="text-sm">{feature}</span>
</li>
))}
</ul>
</CardContent>
<CardFooter>
<Button
className="w-full"
variant={tier.highlighted ? "default" : "outline"}
>
{tier.cta}
</Button>
</CardFooter>
</Card>
))}
</div>
</div>
</div>
)
}
pricing-01
