A brutalist pricing table with a monthly/yearly toggle and animated digit rollers, where the featured plan is highlighted with a blue banner across the top.
import { BannerTiers } from "@/components/ui/banner-tiers";
import type { Plan } from "@/components/ui/banner-tiers-utils/types";
const plans: Plan[] = [
{
id: "starter",
name: "Starter",
tagline: "For individuals trying things out.",
price: { monthly: 9, annual: 7 },
cta: "Get started",
features: ["1 project", "Community support", "Basic analytics"],
},
{
id: "pro",
name: "Pro",
tagline: "For teams shipping every week.",
price: { monthly: 29, annual: 24 },
cta: "Start free trial",
featured: true,
features: [
"Unlimited projects",
"Priority support",
"Advanced analytics",
"Team collaboration",
],
},
{
id: "enterprise",
name: "Enterprise",
tagline: "For organizations that need more control.",
price: null,
cta: "Contact sales",
features: ["SSO & SAML", "Dedicated support", "Custom contracts"],
},
];
export default function BannerTiersDemo() {
return (
<BannerTiers
eyebrow="Pricing"
heading="Simple pricing for teams of every size"
plans={plans}
/>
);
}
Part of Spectrum UI — browse the full library on 21st.dev.