PatternFly · @patternfly/react-core

CodeBlock

Read-only code — the catalogue’s copyable examples and the report BibTeX block. Add ClipboardCopy as an island only if copy-to-clipboard is needed.

Import: import { CodeBlock, CodeBlockCode } from '@patternfly/react-core'
Use on: design · reports · docs
Upstream docs: www.patternfly.org/components/code-block

Read-only code with PatternFly’s container styling. Every example on these pages and the BibTeX block on report pages use it. Copy-to-clipboard (ClipboardCopy) needs an island; add it only where copying is the point.

Code block

@techreport{csdr_atmospheric_co2_2026,
  title = {Atmospheric CO₂ at Mauna Loa},
  year = {2026}
}

Code

import { CodeBlock, CodeBlockCode } from '@patternfly/react-core';
<CodeBlock><CodeBlockCode>{'@techreport{csdr_2026, title = {…}}'}</CodeBlockCode></CodeBlock>