Blocks / Cookie Consent

Cookie Consent beta Pro

The banner every site owes its visitors: what is stored, two real choices, no dark patterns.

Preview

Cookies, briefly

We store one cookie to remember your theme and anonymous counts to see which parts get used. Nothing follows you to other sites. Details

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

<div class="k-cc-stage">
  <div class="k-cc" role="region" aria-label="Cookie consent">
    <h3>Cookies, briefly</h3>
    <p>We store one cookie to remember your theme and anonymous counts to see which parts get used. Nothing follows you to other sites. <a href="/docs/">Details</a></p>
    <div class="k-cc-btns">
      <button class="btn btn-pri" type="button">Accept</button>
      <button class="btn" type="button">Decline</button>
      <button class="btn btn-ghost" type="button">Settings</button>
    </div>
  </div>
</div>

/* KATA Block: Cookie Consent */
.k-cc-stage{position:relative;border:1px dashed var(--k-zinc-300);border-radius:14px;min-height:218px;background:var(--k-bg-soft);font-family:var(--k-font)}
.k-cc{position:absolute;left:14px;bottom:14px;max-width:380px;background:var(--k-bg);border:1px solid var(--k-line);border-radius:13px;box-shadow:0 14px 34px -12px rgba(16,24,40,.25);padding:17px}
.k-cc h3{font-size:14px;font-weight:650;color:var(--k-ink)}
.k-cc p{font-size:12.5px;line-height:1.7;color:var(--k-ink-2);margin:6px 0 13px}
.k-cc p a{color:var(--k-accent-ink);font-weight:550}
.k-cc-btns{display:flex;gap:8px;flex-wrap:wrap}
@media (max-width:480px){.k-cc{right:14px}}

Installation

CLI

node kata-ui.mjs add cookie-consent

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

Accept and Decline are the same size and the same visual weight — anything else is a dark pattern with a stylesheet. The copy says what is actually stored, the settings link goes to a real preferences page, and the banner does not return after either choice. Shown here docked inside a stage; on a real page it fixes to the viewport corner.

CTA Band

FAQ