Skip to content

Code block

Syntax-highlighted source code with language labels, line numbers, and a copy action.

Examples

Default

tsx

import { Button } from "@standard-ui/react"

export const SaveButton = () => (
  <Button variant="primary">Save changes</Button>
)

Compact without header

const status = "ready"

Overview

Code block uses Sugar High for lightweight highlighting. It maps common labels such as tsx and jsx to their language grammars and falls back to TypeScript.

tsx

import { CodeBlock } from "@standard-ui/react"

<CodeBlock code={source} lang="tsx" />

API

PropTypeDefaultDescription
codestring—Source text to highlight.
langstring"tsx"Header label and highlighting language.
size"sm" | "md""md"Code text and padding size.
showHeaderbooleantrueShows the language label and copy action.
barebooleanfalseRemoves frame chrome for nested use.

Guidelines

Do

  • Set the language label to match the code users will copy
  • Use the compact size for short inline examples

Don't

  • Don't place prose or editable content in a code block
  • Don't remove the header when copying is important