Pricing

1
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
2
import { faCheck, faXmark } from "@fortawesome/free-solid-svg-icons";
3
4
type Feature = { label: string; included: boolean };
5
6
type Tier = {
7
  name: string;
8
  price: string;
9
  period: string;
10
  description: string;
11
  cta: string;
12
  popular?: boolean;
13
  features: Feature[];
14
};
15
16
// Your data — swap these for your own plans + features.
17
const tiers: Tier[] = [
18
  {
19
    name: "Starter",
20
    price: "$0",
21
    period: "/mo",
22
    description: "For individuals exploring the platform.",
23
    cta: "Start free",
24
    features: [
25
      { label: "1 project", included: true },
26
      { label: "Community support", included: true },
27
      { label: "10K API requests / mo", included: true },
28
      { label: "Custom domain", included: false },
29
      { label: "Priority support", included: false },
30
      { label: "SSO & audit logs", included: false },
31
    ],
32
  },
33
  {
34
    name: "Pro",
35
    price: "$29",
36
    period: "/mo",
37
    description: "For teams shipping production workloads.",
38
    cta: "Start trial",
39
    popular: true,
40
    features: [
41
      { label: "Unlimited projects", included: true },
42
      { label: "Email support", included: true },
43
      { label: "1M API requests / mo", included: true },
44
      { label: "Custom domain", included: true },
45
      { label: "Priority support", included: true },
46
      { label: "SSO & audit logs", included: false },
47
    ],
48
  },
49
  {
50
    name: "Enterprise",
51
    price: "Custom",
52
    period: "",
53
    description: "For organizations with compliance needs.",
54
    cta: "Talk to sales",
55
    features: [
56
      { label: "Unlimited projects", included: true },
57
      { label: "Dedicated support", included: true },
58
      { label: "Unlimited API requests", included: true },
59
      { label: "Custom domain", included: true },
60
      { label: "24/7 priority support", included: true },
61
      { label: "SSO & audit logs", included: true },
62
    ],
63
  },
64
];
65
66
<div className="grid gap-4 md:grid-cols-3">
67
  {tiers.map((tier) => (
68
    <div
69
      key={tier.name}
70
      className={`relative flex flex-col rounded-lg border p-5 ${
71
        tier.popular ? "border-primary shadow-lg" : ""
72
      }`}
73
    >
74
      {tier.popular && (
75
        <div className="bg-primary text-primary-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-widest">
76
          Popular
77
        </div>
78
      )}
79
      <div className="text-sm font-medium">{tier.name}</div>
80
      <div className="mt-3 flex items-baseline gap-1">
81
        <span className="text-3xl font-bold tracking-tight">{tier.price}</span>
82
        {tier.period && <span className="text-muted-foreground text-sm">{tier.period}</span>}
83
      </div>
84
      <p className="text-muted-foreground mt-2 text-xs">{tier.description}</p>
85
      <ul className="mt-5 flex-1 space-y-2">
86
        {tier.features.map((f) => (
87
          <li key={f.label} className="flex items-start gap-2 text-xs">
88
            <FontAwesomeIcon
89
              icon={f.included ? faCheck : faXmark}
90
              className={`mt-0.5 h-3 w-3 shrink-0 ${
91
                f.included ? "text-primary" : "text-muted-foreground/40"
92
              }`}
93
            />
94
            <span
95
              className={
96
                f.included ? "text-foreground" : "text-muted-foreground/60 line-through"
97
              }
98
            >
99
              {f.label}
100
            </span>
101
          </li>
102
        ))}
103
      </ul>
104
      <button
105
        className={`mt-5 rounded-md px-3 py-2 text-xs font-medium ${
106
          tier.popular
107
            ? "bg-primary text-primary-foreground hover:bg-primary/90"
108
            : "border border-border hover:bg-muted"
109
        }`}
110
      >
111
        {tier.cta}
112
      </button>
113
    </div>
114
  ))}
115
</div>