Banner Tiers Pricing Table

Pricing 7

About

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.

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

Code

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

Usage.tsx

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