Skip to content

Code block usage guidelines

Usage guidelines API Resources

Code block displays preformatted code or command snippets in a dedicated container with overflow scrolling when needed.

When to use

To show multi-line code examples in documentation.
To display terminal commands, configuration snippets, or JSON payloads.
To preserve exact whitespace and line breaks in technical content.

When not to use

For inline code formatting; use code instead.
For rich text content that does not require preserved whitespace.

Usage

Preview
Code

{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com"
}

import { CodeBlock } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <CodeBlock
      code={`{
  "name": "John Doe",
  "age": 30,
  "email": "john.doe@example.com"
}`}
    />
  );
}