Skip to content
AI chat

CodeBlock

Code, commands, logs and diffs, with copy.

import { CodeBlock } from "@flinbu/seed";

With a title, and floating copy

button.tsxtsx
import { Button } from "@flinbu/seed";

export function Save() {
  return <Button variant="primary">Save changes</Button>;
}

npm i @flinbu/seed @flinbu/seed-tokens

import { Button, CodeBlock } from "@flinbu/seed";

  return (
<div className="flex w-full max-w-xl flex-col gap-base">
  <CodeBlock title="button.tsx" lineNumbers highlightLines={[4]} code={`import { Button } from "@flinbu/seed";

export function Save() {
  return <Button variant="primary">Save changes</Button>;

A token change as a diff

tokens.css · Darkdiff
 --bg-accent-primary: var(--blue-900);
Removed:   --text-accent-primary: var(--blue-400);
Added:   --text-accent-primary: var(--blue-300);
 --border-accent-primary: var(--blue-500);

import { CodeBlock } from "@flinbu/seed";

<CodeBlock className="w-full max-w-xl" title="tokens.css · Dark" language="diff" diffLanguage="css" code={`  --bg-accent-primary: var(--blue-900);
-  --text-accent-primary: var(--blue-400);
+  --text-accent-primary: var(--blue-300);
  --border-accent-primary: var(--blue-500);`} />

Use it for

  • Docs, Pluto's answers and token change proposals.

Use something else for

  • Inline code in a sentence: use code in Typography.

Props

PropTypeDefaultDescription
codestring–The code.
language'tsx''ts''js''jsx''css''json''html''bash''text''diff''tsx'Highlighting.
titleReactNode–Adds the header.
lineNumbers / startLine / highlightLines…–Lines.
maxLinesnumber–Collapse long code.
highlight(line, language) => ReactNode–Your own highlighter.
variant / size'default''error' / 'md''sm'–Look.

Accessibility

  • The code is a focusable region.
  • Added and removed lines say so to screen readers.
  • Copy copies the code only.