Gradient Tiers

Pricing 71

About

A three-column pricing table with pastel gradient card headers, tier icons, and color-coded "everything in X, plus" inheritance labels.

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

Code

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

Usage.tsx

import GradientTiers from "@/components/ui/gradient-tiers";

const plans = [
  {
    id: "starter",
    name: "Starter",
    tagline: "For individuals getting started with the basics.",
    cta: "Get started",
    features: [
      "Up to 3 projects",
      "1 GB storage",
      "Community support",
      "Basic analytics",
    ],
  },
  {
    id: "growth",
    name: "Growth",
    tagline: "For growing teams that need more power.",
    cta: "Start free trial",
    badge: "Popular",
    inherits: "Starter",
    features: [
      "Unlimited projects",
      "50 GB storage",
      "Priority email support",
      "Advanced analytics",
      "Team roles & permissions",
    ],
  },
  {
    id: "enterprise",
    name: "Enterprise",
    tagline: "For organizations with custom needs.",
    cta: "Contact sales",
    inherits: "Growth",
    features: [
      "Unlimited everything",
      "Dedicated infrastructure",
      "SSO & SAML",
      "24/7 phone support",
      "Custom contracts",
    ],
  },
];

const notes = [
  { price: "$0", priceNote: "forever" },
  { price: "$29", priceNote: "per user / month" },
  {
    priceNote: "talk to sales",
    footnote: "Volume discounts available for annual billing.",
  },
];

export default function GradientTiersDemo() {
  return (
    <div className="w-full bg-white dark:bg-[#0f0f11] p-6">
      <GradientTiers
        eyebrow="Pricing"
        heading="Plans that grow with you"
        subheading="Start free, upgrade when you need more."
        plans={plans}
        notes={notes}
      />
    </div>
  );
}