Blocks / Plan Compare

Plan Compare beta Pro

The feature matrix under the pricing cards: what each plan really includes, row by honest row.

Preview
FeatureFreePro Most popularTeam
Components124 parts124 parts124 parts
Blocks & templates—AllAll
Themes5 accents5 accentsCustom
MCP server & registry✓✓✓
UpdatesFree partsLifetimeLifetime
Seats1110
SupportCommunityEmailPriority
Source files—IncludedIncluded

Built from: Badge — include their CSS alongside this block.

<div class="k-pc">
  <table>
    <thead><tr><th scope="col">Feature</th><th scope="col">Free</th><th scope="col" class="hot">Pro <span class="badge teal">Most popular</span></th><th scope="col">Team</th></tr></thead>
    <tbody>
      <tr><th scope="row">Components</th><td>124 parts</td><td class="hot">124 parts</td><td>124 parts</td></tr>
      <tr><th scope="row">Blocks & templates</th><td><span class="n">—</span></td><td class="hot">All</td><td>All</td></tr>
      <tr><th scope="row">Themes</th><td>5 accents</td><td class="hot">5 accents</td><td>Custom</td></tr>
      <tr><th scope="row">MCP server & registry</th><td><span class="y">✓</span></td><td class="hot"><span class="y">✓</span></td><td><span class="y">✓</span></td></tr>
      <tr><th scope="row">Updates</th><td>Free parts</td><td class="hot">Lifetime</td><td>Lifetime</td></tr>
      <tr><th scope="row">Seats</th><td>1</td><td class="hot">1</td><td>10</td></tr>
      <tr><th scope="row">Support</th><td>Community</td><td class="hot">Email</td><td>Priority</td></tr>
      <tr><th scope="row">Source files</th><td><span class="n">—</span></td><td class="hot">Included</td><td>Included</td></tr>
    </tbody>
  </table>
</div>
/* KATA Block: Plan Compare */
.k-pc{font-family:var(--k-font);color:var(--k-ink);overflow-x:auto}
.k-pc table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:520px}
.k-pc th,.k-pc td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--k-line)}
.k-pc thead th{font-size:14px;font-weight:650;border-bottom:2px solid var(--k-line)}
.k-pc tbody th{font-weight:550;color:var(--k-ink-2)}
.k-pc td.hot{background:var(--k-accent-bg)}
.k-pc thead th.hot{background:var(--k-accent-bg);border-radius:10px 10px 0 0}
.k-pc .y{color:var(--k-accent-ink);font-weight:700}
.k-pc .n{color:var(--k-zinc-400)}

Installation

CLI

node kata-ui.mjs add plan-compare

Writes the block’s CSS into your project. Everything it is built from comes with it. New to the CLI? See the CLI doc.

Manual

  1. Load tokens.css once, before any part.
  2. Copy the CSS tab into your stylesheet, with the CSS of everything listed under “Built from” above.
  3. Copy the HTML where it belongs.

Usage

Pairs with the Pricing block, below it, for the readers who compare before they buy. The Pro column carries the highlight and the badge; checks are accent, dashes are zinc, and no row is worded to trick anyone — a matrix is a promise in grid form.

Previous
Logo Cloud