Featured
ComparisonsComparison Table
A plan-versus-feature matrix built as a real table, with readable boolean cells.
#comparison#table#pricing
6 frameworksBeginner
Loading…
Plan tiers that state what they inherit in words rather than re-listing every feature.
<!--
Tiers stack into a responsive grid. Each higher tier states what it inherits
in words ("Everything in Team, plus") instead of re-listing every lower
feature - shorter to read and impossible to let the lists drift out of sync.
-->
<div class="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-3">
<section aria-label="Starter" class="flex flex-col rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Starter</h3>
<p class="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-100">$0</p>
<ul class="mt-2 grid gap-2">
<li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
<span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
<span><span class="sr-only">Included: </span>1 project</span>
</li>
</ul>
</section>
<section aria-label="Team" class="flex flex-col rounded-xl border border-blue-600 bg-white p-5 dark:border-blue-400 dark:bg-gray-900">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Team</h3>
<p class="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-100">$29</p>
<p class="mt-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Everything in Starter, plus</p>
<ul class="mt-2 grid gap-2">
<li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
<span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
<span><span class="sr-only">Included: </span>Priority support</span>
</li>
</ul>
</section>
<section aria-label="Enterprise" class="flex flex-col rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-gray-900">
<h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">Enterprise</h3>
<p class="mt-1 text-2xl font-bold text-gray-900 dark:text-gray-100">Custom</p>
<p class="mt-3 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Everything in Team, plus</p>
<ul class="mt-2 grid gap-2">
<li class="grid grid-cols-[1rem_1fr] items-start gap-2 text-sm text-gray-700 dark:text-gray-300">
<span class="font-bold text-emerald-700 dark:text-emerald-400" aria-hidden="true">✓</span>
<span><span class="sr-only">Included: </span>SSO & SAML</span>
</li>
</ul>
</section>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
tiersrequired | Tier[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
Each higher tier sets `inheritsFrom` and lists only what it adds ("Everything in Team, plus"), which is shorter to read and makes it impossible for the lists to drift out of sync. Mark one tier `featured` to accent its border; the grid steps one -> two -> three columns.