Skip to content

README.md

Latest commit

 

History

History
44 lines (31 loc) · 1.59 KB

README.md

File metadata and controls

44 lines (31 loc) · 1.59 KB

CodeBlock

A code display block with an optional title and a built-in copy-to-clipboard button. Render children for syntax-highlighted markup, or pass a plain code string.

Import

import { CodeBlock } from '@bgunnarsson/react-primitives'

Props

Extends React.HTMLAttributes<HTMLDivElement>.

Prop Type Default Description
code string (required) — The text copied to the clipboard when the copy button is clicked. Also rendered when no children are supplied.
title string — Optional label shown in the header (usually the filename or language).
children ReactNode — Pre-rendered code, e.g. highlighted output from Shiki or Prism. When provided, overrides the plain-text display of code.

Usage

<CodeBlock title="Button.tsx" code="<Button>Click</Button>">
  <Button>Click</Button>
</CodeBlock>

Slots

The component exposes these data-slot attributes for styling:

Slot Element
data-slot="header" The top row containing title and copy button.
data-slot="title" The title label, if provided.
data-slot="copy" The copy button (exposes data-copied while the "copied" confirmation is active).
data-slot="pre" The <pre> wrapper.
data-slot="code" The inner <code> element.

Notes

  • The copy button writes code to the clipboard and flips data-copied for 2 seconds so you can style the confirmation state.
  • For real syntax highlighting, generate the highlighted markup at build time (Shiki, Starry Night, etc.) and pass it as children.