Skip to content
Tattva

CodeBlock

Stable

A dark box for code, with the language name and a Copy button.

Also known as code snippet, syntax highlighter, pre, code viewer

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

With a language

ts
function total(items) {
  return items.reduce((sum, i) => sum + i.price, 0);
}

The language is only a name shown on top.

UsageCodeDesignAccessibility

When to use it

Shows code exactly as written, on a dark panel so it stands apart from the words around it. Long lines scroll sideways instead of wrapping, so nothing is broken up.

Made of: Language name · Copy button · Code area

Use it for

  • Code, commands or settings inside a reply.
  • Any text that people must copy exactly.

Not for

  • A short name or value inside a sentence.
  • Changes between two versions of a file: use DiffView.
  • Formatted text with headings and lists: use Markdown.

Do and avoid

json
{
  "invoice": "INV-2041",
  "status": "paid"
}
Do. A few lines of code stand apart, exactly as written.
Set the
text
status
field to paid.
Avoid. A single word in a dark panel breaks the sentence apart.

Do

  • Set the language so people know what they are copying.
  • Use it for multi-line code and commands in replies.
  • Remove blank lines at the end of the code.

Avoid

  • Do not use it for a single word in a sentence. Use inline code styling.
  • Do not expect long lines to wrap. They scroll sideways.
  • Do not paste in secrets like passwords. Anything shown can be copied.

On a phone

  • Long lines scroll sideways inside the block and do not wrap, so the page itself does not scroll sideways.
  • The Copy button keeps its size and has a 44px tap area on touch screens, so the header row does not get taller.
  • If the browser blocks clipboard access, Copy does nothing and shows no error.

Build your next AI screen with Tattva.

Free and open, with the code. Start in one line.

Get started