Blocks / Roadmap

Roadmap beta Pro

Three honest columns — shipped, building, exploring — instead of a Gantt chart of lies.

Preview

Shipped

Registry & CLI

Every part, machine-readable.

MCP server

List, search, get — read-only.

RTL pass

Logical properties throughout.

Building

Pro downloads

Key-gated blocks and templates.

React port

The mold, translated — parts first.

More themes

Later

Community accents, same core.

Exploring

Native wrappers

Idea

Web components around the parts.

Figma kit

Idea

The tokens, drawn.

Print styles

Idea

Docs that survive paper.

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

<div class="k-rm">
  <div class="k-rm-col">
    <h3><span class="k-rm-dot" style="background:var(--k-success)"></span>Shipped</h3>
      <div class="k-rm-i"><div class="k-rm-t"><h4>Registry & CLI</h4><span class="badge">v1</span></div><p>Every part, machine-readable.</p></div>
      <div class="k-rm-i"><div class="k-rm-t"><h4>MCP server</h4><span class="badge">v1</span></div><p>List, search, get — read-only.</p></div>
      <div class="k-rm-i"><div class="k-rm-t"><h4>RTL pass</h4><span class="badge">v1</span></div><p>Logical properties throughout.</p></div>
  </div>
  <div class="k-rm-col">
    <h3><span class="k-rm-dot" style="background:var(--k-accent-ink)"></span>Building</h3>
      <div class="k-rm-i"><div class="k-rm-t"><h4>Pro downloads</h4><span class="badge">Next</span></div><p>Key-gated blocks and templates.</p></div>
      <div class="k-rm-i"><div class="k-rm-t"><h4>React port</h4><span class="badge">Next</span></div><p>The mold, translated — parts first.</p></div>
      <div class="k-rm-i"><div class="k-rm-t"><h4>More themes</h4><span class="badge">Later</span></div><p>Community accents, same core.</p></div>
  </div>
  <div class="k-rm-col">
    <h3><span class="k-rm-dot" style="background:var(--k-ink-3)"></span>Exploring</h3>
      <div class="k-rm-i"><div class="k-rm-t"><h4>Native wrappers</h4><span class="badge">Idea</span></div><p>Web components around the parts.</p></div>
      <div class="k-rm-i"><div class="k-rm-t"><h4>Figma kit</h4><span class="badge">Idea</span></div><p>The tokens, drawn.</p></div>
      <div class="k-rm-i"><div class="k-rm-t"><h4>Print styles</h4><span class="badge">Idea</span></div><p>Docs that survive paper.</p></div>
  </div>
  </div>

/* KATA Block: Roadmap */
.k-rm{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;font-family:var(--k-font);color:var(--k-ink)}
.k-rm-col{background:var(--k-bg-soft);border:1px solid var(--k-line);border-radius:14px;padding:15px}
.k-rm-col h3{font-size:13px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:8px;margin-bottom:12px}
.k-rm-dot{width:8px;height:8px;border-radius:50%}
.k-rm-i{background:var(--k-bg);border:1px solid var(--k-line);border-radius:11px;padding:12px 13px;margin-bottom:9px}
.k-rm-i:last-child{margin-bottom:0}
.k-rm-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.k-rm-t h4{font-size:13.5px;font-weight:600}
.k-rm-i p{font-size:12px;line-height:1.65;color:var(--k-ink-2);margin-top:4px}
@media (max-width:720px){.k-rm{grid-template-columns:1fr}}

Installation

CLI

node kata-ui.mjs add roadmap

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

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

Usage

No dates, because roadmap dates are fiction with a deadline. Each item carries a scope badge (Next / Later / Someday is banned — Exploring is the honest third state). Move items between columns as reality instructs; the block’s job is to make the current truth easy to publish.

Pricing

Settings