Serif Tiers Pricing

Pricing

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Serif Tiers Pricing to your project and fits it to your theme.

Code

How Serif Tiers Pricing is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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",
          ],
        },
      ]}
    />
  );
}