---
id: code-block
title: CodeBlock
---

# CodeBlock

Use the CodeBlock component to display code.

## How to use

<code src="@digigov/ui/src/typography/CodeBlock/__stories__/Default.tsx" />

### Highlighted

<code src="@digigov/ui/src/typography/CodeBlock/__stories__/Highlighted.tsx" />

### With copy to clipboard

<code src="@digigov/ui/src/typography/CodeBlock/__stories__/WithCopyToClipboard.tsx" />

### With phase banner

<code src="@digigov/ui/src/typography/CodeBlock/__stories__/WithPhaseBanner.tsx" />

## API

See below for a complete reference to all of the props available to the components mentioned here.

<ComponentProps componentName={["CodeBlock", "CodeBlockContainer", "CodeBlockContent", "CodeBlockHeader"]} />