Pricing 1
import { Pricing1 } from "@/components/blocks/pricing-1"
export default function Pricing1Demo() {
return (
<>
<Pricing1
title="Simple, transparent pricing"
description="Choose the plan that fits your workflow. Upgrade or downgrade at any time."
featuredLabel="Popular"
plans={[
{
name: "Starter",
description: "For individuals and small projects getting started.",
price: {
value: 19,
currency: "USD",
unit: "month",
},
features: [
"Up to 3 projects",
"Basic analytics",
"Community support",
"1 GB storage",
],
button: { label: "Get started", href: "/docs/" },
},
{
name: "Team",
description:
"For growing teams that need more power and collaboration.",
price: {
value: 49,
currency: "USD",
unit: "month",
},
featured: true,
features: [
"Unlimited projects",
"Advanced analytics",
"Priority support",
"10 GB storage",
"Team collaboration",
],
button: { label: "Get started", href: "/docs/" },
},
{
name: "Studio",
description: "For agencies and large teams with advanced needs.",
price: {
value: 99,
currency: "USD",
unit: "month",
},
features: [
"Everything in Team",
"Custom integrations",
"Dedicated support",
"Unlimited storage",
"SSO and audit logs",
],
button: { label: "Contact sales", href: "/docs/" },
},
]}
/>
</>
)
}Pricing 2
import { Pricing2 } from "@/components/blocks/pricing-2"
export default function Pricing2Demo() {
return (
<>
<Pricing2
locale="en-US"
discountLabel="Save"
title="Pick the plan that matches your needs"
description="Start small and scale as you grow. All plans include a 14-day free trial."
plans={[
{
name: "Basic",
description: "Essential tools for personal use and small projects.",
price: {
value: 29,
currency: "USD",
unit: "month",
},
features: [
"5 projects",
"Basic analytics",
"Email support",
"2 GB storage",
],
button: { label: "Start free trial", href: "/docs/" },
},
{
name: "Pro",
description:
"Advanced features for professionals and growing teams.",
price: {
value: 79,
compareAt: 99,
currency: "USD",
unit: "month",
},
featured: true,
features: [
"Unlimited projects",
"Advanced analytics",
"Priority support",
"50 GB storage",
"Custom domains",
"API access",
],
button: { label: "Start free trial", href: "/docs/" },
},
]}
/>
</>
)
}Pricing 3
import { Pricing3 } from "@/components/blocks/pricing-3"
export default function Pricing3Demo() {
return (
<>
<Pricing3
badge="Limited offer"
title="Everything you need in one plan"
description="No complex tiers. One plan with everything included for your entire team."
offer={{
name: "Studio bundle",
description:
"Full access for teams managing content, product, and marketing.",
price: {
value: 249,
currency: "USD",
unit: "month",
},
features: [
"Unlimited projects and users",
"Advanced analytics and reporting",
"Dedicated account manager",
"Custom integrations and API",
"SSO and enterprise security",
"99.9% uptime SLA",
],
button: { label: "Get started today", href: "/docs/" },
}}
/>
</>
)
}