v0.6.0
ComponentsCode Block

Code Block

component

A mono code surface with a header, copy button and language tag.

Quick start
Drop this into your project.
tokens.ts
1import { buildTokens } from "@uicockpit/tokens"2 3const tokens = buildTokens({4  density: "default",5  radius:  "soft",6  motion:  "smooth",7})8 9document.documentElement.style.cssText = 10  Object.entries(tokens.vars)11    .map(([k, v]) => `${k}:${v}`).join(";")

Composes: Code · Button

Recipe CSS

This is the exact CSS your kit ships for Code Block — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === CodeBlock (Tier 4 #18) ==========================================
 * Multi-line code met line numbers + filename header. Geen syntax-
 * highlighting in MVP — monospace + tabular-nums dragen de leesbaarheid.
 * Header is sticky binnen scroll-context. */
.codeblock {
  border: var(--k-hairline, 1px solid var(--k-border));
  border-radius: var(--k-radius-md);
  background: var(--k-surface-2);
  overflow: hidden;
  --k-nest-radius: max(2px, calc(var(--k-radius-md) - 4px));
}
.codeblock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--k-s-6) var(--k-s-10);
  background: var(--k-surface);
  border-bottom: var(--k-divider);
}
.codeblock__file {
  font-size: var(--k-type-eyebrow);
  font-family: var(--k-font-mono);
  color: var(--k-fg-muted);
}
.codeblock__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--k-s-4);
  padding: var(--k-s-2) var(--k-s-8);
  border: 0;
  background: transparent;
  color: var(--k-fg-muted);
  font-size: var(--k-type-eyebrow);
  cursor: pointer;
  border-radius: var(--k-radius-sm);
  font-family: var(--k-font-body);
}
.codeblock__copy:hover { background: var(--k-state-hover); color: var(--k-fg); }
.codeblock__pre {
  margin: 0;
  padding: var(--k-s-8) 0;
  overflow-x: auto;
  font-family: var(--k-font-mono);
  font-size: var(--k-type-eyebrow);
  line-height: 1.5;
  color: var(--k-fg);
}
.codeblock__line {
  display: flex;
  gap: var(--k-s-12);
  padding: 0 var(--k-s-12) 0 0;
  white-space: pre;
}
.codeblock__gutter {
  flex-shrink: 0;
  width: 24px;
  text-align: right;
  color: var(--k-fg-faint);
  user-select: none;
  font-variant-numeric: tabular-nums;
}
.codeblock__text { flex: 1; }