AIComponentBeta

Code Block.

Code with its language, one click from the clipboard.

A fenced code block with a language label and a copy button. Response uses it for every ``` fence. Pass highlighted markup as children to add syntax colors; the copy action still copies the original code.

Native HTMLKeyboard considered View source

Make it yours

tsx

export function Greeting({ name }: { name: string }) {
  return <p>Hello, {name}</p>;
}

Preparing the example…

PROPERTIES1

Language

Composition

Anatomy

Long lines scroll inside the block, which is focusable for that reason. The copy result is announced politely.

CodeBlock (figure)
├── figcaption — language + IconButton copy
├── pre tabIndex=0 > code
└── span[role=status] — Copied / Copy failed

A place to start

Usage

Import the stylesheet once at your application root. This complete example reflects the properties selected above.

Loading example…

Details that make a difference

Examples & states

The finer details

API reference

Generated from Dixy’s local TypeScript interfaces. Native HTML attributes and refs are forwarded. The table covers Dixy’s own options.

CodeBlock

Prop	Type / description	Default
`code`*	`string` The source text. Copied verbatim.	`—`
`language`	`string` Language name shown in the header, e.g. "tsx".	`—`
`children`	`ReactNode` Pre-highlighted markup to show instead of plain text, e.g. from Shiki. The copy action still copies `code`.	`—`
`copyLabel`	`string` Accessible name of the copy button.	`Copy code`
`copiedLabel`	`string` Announced after a successful copy.	`Copied`
`failedLabel`	`string` Announced when the clipboard is unavailable.	`Copy failed`
`onCopy`	`((code: string) => void)` Called with the code after the clipboard write succeeds.	`—`

Built from the same foundations

Styling tokens

Change Theme settings above to compare appearance, accent, neutral, radius, spacing density, motion and direction. Override component aliases on a Theme root so custom properties follow portaled content too. The wrapper merges className, style, refs and render composition with its owning primitive.

Token	Purpose
`--dixy-font-code-sm`	The component-specific starting point.
`--dixy-font-label-md`	Control label font and line height; body roles remain readable in text inputs.
`--dixy-color-background-selected`	Selected surfaces use semantic color across appearances.
`--dixy-color-border-focus`	Focus indication remains visible independently of shadows.
`--dixy-spacing-inset-sm`	Density-aware component padding.
`--dixy-motion-transition-feedback`	Short state feedback, reduced by the inherited motion setting.

Explore theme customization

Consider everyone

Accessibility

The copy button has a constant name and the result is announced through a status region. The scrollable pre is named after its language.

TabFocus the copy button, then the code.

Arrow Left / RightScroll long lines in the focused code.

Target: WCAG 2.2 AA. Automated tests cover selected behavior; manual screen-reader, contrast, and zoom validation remain part of the release checklist.

THE THINKING BEHIND IT

Build it. Then understand it.

Keep the source of truth separate from its presentation: highlighted markup is for eyes, the code string is for the clipboard.

A token to follow--dixy-font-code-sm

Nothing up our sleeves

Source

UP NEXTPrompt Input