Featured
ComparisonsComparison Table
A plan-versus-feature matrix built as a real table, with readable boolean cells.
#comparison#table#pricing
6 frameworksBeginner
Loading…
A compact support grid of pure ✓/✗ cells inside a table that scrolls, not the page.
<!--
A pure support grid: every cell is a boolean, so each is an aria-hidden ✓/✗
plus a visually-hidden "Supported"/"Not supported". It is a real table (scoped
headers) and its wrapper scrolls, keeping the capability column on screen at 320px.
-->
<div class="w-full overflow-x-auto">
<table class="w-full min-w-[32rem] border-collapse text-left text-sm">
<thead>
<tr>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 font-medium text-gray-700 dark:border-gray-800 dark:text-gray-300">Capability</th>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 text-center font-semibold text-gray-900 dark:border-gray-800 dark:text-gray-100">Free</th>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 text-center font-semibold text-gray-900 dark:border-gray-800 dark:text-gray-100">Pro</th>
<th scope="col" class="border-b border-gray-200 px-3 py-2.5 text-center font-semibold text-gray-900 dark:border-gray-800 dark:text-gray-100">Team</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="border-b border-gray-100 px-3 py-2.5 font-medium text-gray-700 dark:border-gray-800 dark:text-gray-300">Webhooks</th>
<td class="border-b border-gray-100 px-3 py-2.5 text-center dark:border-gray-800">
<span class="font-bold text-gray-400 dark:text-gray-600" aria-hidden="true">✗</span><span class="sr-only">Not supported</span>
</td>
<td class="border-b border-gray-100 px-3 py-2.5 text-center dark:border-gray-800">
<span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span><span class="sr-only">Supported</span>
</td>
<td class="border-b border-gray-100 px-3 py-2.5 text-center dark:border-gray-800">
<span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span><span class="sr-only">Supported</span>
</td>
</tr>
</tbody>
</table>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | string[] | - | The columns being compared, in display order. |
rowsrequired | CheckGridRow[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
A pure boolean grid: every cell is an `aria-hidden` ✓/✗ paired with a visually-hidden "Supported" / "Not supported", inside a real table with scoped headers. The wrapper scrolls and the table holds a `min-w`, so the capability column stays on screen at 320px. Positional `support[i]` maps to `options[i]`.