A pricing section with cream serif plan cards and a black featured plan lit by a crimson glow, including a monthly/yearly billing toggle and animated price digits.
"use client";
import SerifTiers from "@/components/ui/serif-tiers";
export default function SerifTiersDemo() {
return (
<SerifTiers
eyebrow="Pricing"
heading="Simple pricing for every team"
subheading="Choose a plan that scales with you. Cancel anytime."
plans={[
{
id: "starter",
name: "Starter",
tagline: "For individuals getting started",
price: { monthly: 12, annual: 9 },
cta: "Get started",
features: [
"Up to 3 projects",
"Community support",
"Basic analytics",
],
},
{
id: "pro",
name: "Pro",
tagline: "For growing teams that need more",
price: { monthly: 32, annual: 26 },
cta: "Start free trial",
featured: true,
badge: "Popular",
features: [
"Unlimited projects",
"Priority support",
"Advanced analytics",
"Custom integrations",
],
},
{
id: "enterprise",
name: "Enterprise",
tagline: "For organizations at scale",
price: { monthly: 68, annual: 54 },
cta: "Contact sales",
features: [
"Dedicated success manager",
"SSO & SCIM",
"Custom SLAs",
"Audit logs",
],
},
]}
/>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.