CodeBlock

CodeBlock

<CodeBlock
  language="ts"
  filename="App.tsx"
  code={`import { Button } from '@helixui/core';

export function App() {
  return <Button>Save</Button>;
}`}
/>

With your own highlighter

import { highlight as prism } from 'prism-react-renderer';

<CodeBlock language="rust" code={src} highlight={(code) => prism({ code, language: 'rust' }).html} />

Install: @helixui/core

import { CodeBlock } from '@helixui/core'

status: stable · since: 0.3.0

Tags: code, mono, snippet, copy

Anatomy

┌─ tsx ─────────────────────────── [📋] ┐
│  const x = 1;                         │
│  console.log(x);                       │
└────────────────────────────────────────┘

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, scrolls horizontally on overflow
• stackable — true
• fullBleed — false

Visual

A surface with a small language label in the top-left, a copy button in the top-right, and monospace content (font.family.mono) on a subtle surface (surface.subtle). Tokenized highlighting for ts/js/py/json/bash; falls back to plain text otherwise.

Props

Name	Type	Default	Description
code	string	—	Source text. Required.
language	string	ts	Language tag for highlighter and label.
filename	string	—	Optional filename — replaces the language label.
noCopy	boolean	false	Hide the copy button.
highlight	(code, language?) => string	—	Override the built-in highlighter. Returns HTML string.

Tokens used

color.bg.surface.inverse, color.text.inverse, color.border.default, radius.md, radius.sm, space.2, space.3, space.4, font.family.sans, font.family.mono, font.size.xs, font.size.sm, font.weight.medium

Accessibility

Notes

• Copy button announces ‘Copied’ via its aria-label after a successful copy.
• Built-in highlighter is regex-based (small) — for richer highlighting pass highlight (e.g. wrap Prism / Shiki).

Composes with

Component	Relation	Note
CodeEditor	alternative	CodeBlock is read-only display; CodeEditor is editable.
Card	parent	Often inside a Card or doc body.
ChatMessage	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

show a tsx snippet

“render a code block with copy button”

<CodeBlock language="tsx">{`const x = 1;`}</CodeBlock>

Related

• ChatMessage