Blueprint Tiers

Pricing 13

About

A three-tier pricing table with a Swiss-blueprint look (crop marks, mono labels, royal-blue accent) and a monthly/yearly billing toggle per plan.

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

Code

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

Usage.tsx

import BlueprintTiers from "@/components/ui/blueprint-tiers";
import type { Plan } from "@/components/ui/blueprint-tiers-utils/types";

const plans: Plan[] = [
  {
    id: "starter",
    name: "Starter",
    tagline: "For solo builders shipping a first project.",
    price: { monthly: 0, annual: 0 },
    cta: "Get started",
    features: ["1 workspace", "Community support", "Basic analytics"],
  },
  {
    id: "pro",
    name: "Pro",
    tagline: "For growing teams that need more room to build.",
    price: { monthly: 29, annual: 24 },
    cta: "Start free trial",
    featured: true,
    badge: "Popular",
    features: [
      "5 workspaces",
      "Priority support",
      "Advanced analytics",
      "Custom domains",
    ],
  },
  {
    id: "scale",
    name: "Scale",
    tagline: "For organizations running at production scale.",
    price: { monthly: 79, annual: 65 },
    cta: "Talk to sales",
    features: [
      "Unlimited workspaces",
      "Dedicated support",
      "SSO & audit logs",
      "Custom SLAs",
    ],
  },
];

export default function BlueprintTiersDemo() {
  return (
    <BlueprintTiers
      eyebrow="Simple and transparent"
      heading="Pricing that scales with your build"
      subheading="Start free, upgrade when you need more power."
      plans={plans}
    />
  );
}