Featured
PricingThree-Tier Pricing
The canonical Starter / Pro / Enterprise grid, with the middle tier promoted.
#pricing#tiers#saas
6 frameworksBeginner
Loading…
A real table comparing features across plans, scrollable inside its own wrapper.
<!-- The WRAPPER scrolls (overflow-x-auto + tabindex + role=region), not the
table; the table keeps a min-width so columns never crush, and the page
itself never overflows at 320px. Booleans render as icon PLUS text. -->
<section class="mx-auto w-full max-w-4xl px-4" aria-labelledby="feature-table-heading">
<h2 class="text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100" id="feature-table-heading">
Compare every plan
</h2>
<div class="mt-6 overflow-x-auto rounded-2xl border border-gray-200 dark:border-gray-800" tabindex="0" role="region" aria-label="Plan comparison, scrollable">
<table class="w-full min-w-[34rem] border-collapse text-left text-sm">
<thead>
<tr class="border-b border-gray-200 dark:border-gray-800">
<th scope="col" class="p-4 font-semibold text-gray-900 dark:text-gray-100">Feature</th>
<th scope="col" class="p-4 font-semibold text-gray-900 dark:text-gray-100">Starter</th>
<th scope="col" class="p-4 font-semibold text-gray-900 dark:text-gray-100">Team</th>
<th scope="col" class="p-4 font-semibold text-gray-900 dark:text-gray-100">Business</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100 dark:border-gray-800/60">
<th scope="row" class="p-4 font-medium text-gray-700 dark:text-gray-300">Projects</th>
<td class="p-4"><span class="text-gray-700 dark:text-gray-300">3</span></td>
<td class="p-4"><span class="text-gray-700 dark:text-gray-300">25</span></td>
<td class="p-4"><span class="text-gray-700 dark:text-gray-300">Unlimited</span></td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800/60">
<th scope="row" class="p-4 font-medium text-gray-700 dark:text-gray-300">Priority support</th>
<td class="p-4"><span class="inline-flex items-center gap-1.5 text-gray-400 dark:text-gray-500"><svg class="h-4 w-4 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.4 5A1 1 0 0 0 5 6.4L8.6 10 5 13.6A1 1 0 0 0 6.4 15L10 11.4 13.6 15a1 1 0 0 0 1.4-1.4L11.4 10 15 6.4A1 1 0 0 0 13.6 5L10 8.6 6.4 5Z" /></svg>Not included</span></td>
<td class="p-4"><span class="inline-flex items-center gap-1.5 text-green-700 dark:text-green-400"><svg class="h-4 w-4 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Included</span></td>
<td class="p-4"><span class="inline-flex items-center gap-1.5 text-green-700 dark:text-green-400"><svg class="h-4 w-4 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Included</span></td>
</tr>
<tr class="border-b border-gray-100 last:border-0 dark:border-gray-800/60">
<th scope="row" class="p-4 font-medium text-gray-700 dark:text-gray-300">SSO / SAML</th>
<td class="p-4"><span class="inline-flex items-center gap-1.5 text-gray-400 dark:text-gray-500"><svg class="h-4 w-4 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.4 5A1 1 0 0 0 5 6.4L8.6 10 5 13.6A1 1 0 0 0 6.4 15L10 11.4 13.6 15a1 1 0 0 0 1.4-1.4L11.4 10 15 6.4A1 1 0 0 0 13.6 5L10 8.6 6.4 5Z" /></svg>Not included</span></td>
<td class="p-4"><span class="inline-flex items-center gap-1.5 text-gray-400 dark:text-gray-500"><svg class="h-4 w-4 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M6.4 5A1 1 0 0 0 5 6.4L8.6 10 5 13.6A1 1 0 0 0 6.4 15L10 11.4 13.6 15a1 1 0 0 0 1.4-1.4L11.4 10 15 6.4A1 1 0 0 0 13.6 5L10 8.6 6.4 5Z" /></svg>Not included</span></td>
<td class="p-4"><span class="inline-flex items-center gap-1.5 text-green-700 dark:text-green-400"><svg class="h-4 w-4 flex-none" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.7a1 1 0 1 1 1.4-1.4l3.8 3.8 6.8-6.8a1 1 0 0 1 1.4 0Z" /></svg>Included</span></td>
</tr>
</tbody>
</table>
</div>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
plans | string[] | PLANS | Plans |
rows | FeatureRow[] | ROWS | The alternating image-and-copy rows, in order. |
className | string | - | Additional classes merged onto the root element. |
The wrapper (not the table) carries `overflow-x-auto` and a focusable `role="region"`, and the table keeps a `min-w-[34rem]`, so on a phone the table scrolls inside its card while the page never overflows. Boolean cells render an icon *and* text ("Included" / "Not included"), and ✓ and ✗ differ in shape, so the answer never depends on colour.