Pricing Comparison Table — Vercel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

<!--
Snippet Name: Pricing Comparison Table — Vercel
Description: Dark comparison matrix with sticky plan header, grouped feature rows, and check/dash/slash glyphs.
Author: DevSnips Contributors
Usage Example: Drop into a pricing/compare section. Swap plan names and feature rows as needed.
-->
<section class="relative w-full px-6 py-16 sm:py-24" data-compare="vc">

  <div class="mx-auto max-w-6xl">
    <div class="mb-10 max-w-xl">
      <p class="vc-mono mb-3 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] text-white/50"><span class="vc-dot"></span> Compare plans</p>
      <h2 class="font-g text-[34px] font-semibold leading-[1.05] tracking-tight sm:text-[44px]">Every feature, side by side.</h2>
    </div>

    <div class="overflow-x-auto rounded-[14px] border border-white/10 bg-[#0a0a0a] shadow-[0_0_0_1px_rgba(255,255,255,0.02),0_20px_60px_-20px_rgba(0,0,0,0.9)]">
      <table class="w-full min-w-[720px] border-collapse text-left">
        <caption class="sr-only">Plan comparison</caption>
        <thead>
          <tr class="border-b border-white/10">
            <th scope="col" class="vc-mono sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[11px] font-medium uppercase tracking-wider text-white/40">Features</th>
            <th scope="col" class="p-5">
              <p class="font-g text-[15px] font-semibold text-white">Starter</p>
              <p class="vc-mono mt-1 text-[12px] text-white/45">$0 /mo</p>
            </th>
            <th scope="col" class="p-5">
              <span class="vc-mono mb-2 inline-flex items-center gap-1.5 rounded-full border border-[#50e3c2]/30 bg-[#50e3c2]/10 px-2 py-0.5 text-[10px] text-[#50e3c2]"><span class="vc-dot"></span> Popular</span>
              <p class="font-g text-[15px] font-semibold text-white">Scale</p>
              <p class="vc-mono mt-1 text-[12px] text-white/45">$49 /mo</p>
            </th>
            <th scope="col" class="p-5">
              <p class="font-g text-[15px] font-semibold text-white">Enterprise</p>
              <p class="vc-mono mt-1 text-[12px] text-white/45">Custom</p>
            </th>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th class="sticky left-0 z-10 bg-[#0a0a0a] p-5"></th>
            <th class="p-5"><a href="#" class="vc-mono inline-flex w-fit rounded-lg border border-white/10 bg-white px-4 py-2 text-[12px] font-medium text-black transition-colors hover:bg-white/90">Start free</a></th>
            <th class="p-5"><a href="#" class="vc-mono inline-flex w-fit rounded-lg bg-[#50e3c2] px-4 py-2 text-[12px] font-medium text-black transition-colors hover:bg-[#50e3c2]/90">Start trial</a></th>
            <th class="p-5"><a href="#" class="vc-mono inline-flex w-fit rounded-lg border border-white/10 bg-white/[0.04] px-4 py-2 text-[12px] font-medium text-white transition-colors hover:border-white/20">Talk to sales</a></th>
          </tr>
        </thead>
        <tbody class="divide-y divide-white/[0.07]">

          <!-- group: Core -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Core</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Events / day</th>
            <td class="vc-mono p-5 text-[13px] text-white/70">1,000</td>
            <td class="vc-mono p-5 text-[13px] text-white">1,000,000</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Seats</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/70" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="vc-mono p-5 text-[13px] text-white">10</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
          </tr>

          <!-- group: Automation -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Automation</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">AI triage</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Workflow automations</th>
            <td class="vc-mono p-5 text-[13px] text-white/70">3</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
            <td class="vc-mono p-5 text-[13px] text-white">Unlimited</td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">SLA engine</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>

          <!-- group: Security -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Security</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">SAML SSO</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">SCIM provisioning</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Audit log export</th>
            <td class="p-5"><svg class="h-4 w-4 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12h14"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
            <td class="p-5"><svg class="h-4 w-4 text-[#50e3c2]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M5 12l5 5L20 6"/></svg></td>
          </tr>

          <!-- group: Support -->
          <tr><th colspan="4" scope="colgroup" class="vc-mono sticky left-0 bg-[#0a0a0a] px-5 py-2.5 text-[11px] font-medium uppercase tracking-wider text-white/40">Support</th></tr>
          <tr class="border-b border-white/[0.07]">
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Support channels</th>
            <td class="vc-mono p-5 text-[13px] text-white/70">Community</td>
            <td class="vc-mono p-5 text-[13px] text-white">Priority email</td>
            <td class="vc-mono p-5 text-[13px] text-white">Dedicated CSM</td>
          </tr>
          <tr>
            <th scope="row" class="font-g sticky left-0 z-10 bg-[#0a0a0a] p-5 text-[13px] font-medium text-white/90">Uptime SLA</th>
            <td class="vc-mono p-5 text-[13px] text-white/40">—</td>
            <td class="vc-mono p-5 text-[13px] text-white">99.9%</td>
            <td class="vc-mono p-5 text-[13px] text-[#50e3c2]">99.99%</td>
          </tr>
        </tbody>
      </table>
    </div>

    <p class="vc-mono mt-4 text-[11px] text-white/35">All plans include unlimited integrations and export to CSV. Prices in USD.</p>
  </div>
</section>