---
id: Code block
section: components
cssPrefix: pf-v6-c-code-block
propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode']
---

import { Fragment, useState } from 'react';
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';

**Important note:** to format code exactly as it is, you should use String.raw\`your code here\`.

Using **String.raw\`\`** will keep all the special characters like `\n` or `\t`.

## Examples

### Basic

```ts file="./CodeBlockBasic.tsx"

```

### Expandable

```ts file="./CodeBlockExpandable.tsx"

```