CodeBlock

Shows a block of code with an optional file name, language tag, line numbers and copy button. Pick Snippet for a single command.

CodeBlock

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, CodeBlock

src/Save.tsxtsx

1import { Button } from '@skribly/ui/actions'23export function Save({ onSave }: { onSave: () => void }) {4  return <Button onPress={onSave}>Save</Button>5}

const message = "A long line that wraps instead of scrolling, because wrap is set on this block, which suits prose-like logs."

Dark theme, CodeBlock

src/Save.tsxtsx

1import { Button } from '@skribly/ui/actions'23export function Save({ onSave }: { onSave: () => void }) {4  return <Button onPress={onSave}>Save</Button>5}

const message = "A long line that wraps instead of scrolling, because wrap is set on this block, which suits prose-like logs."

High contrast theme, CodeBlock

src/Save.tsxtsx

1import { Button } from '@skribly/ui/actions'23export function Save({ onSave }: { onSave: () => void }) {4  return <Button onPress={onSave}>Save</Button>5}

const message = "A long line that wraps instead of scrolling, because wrap is set on this block, which suits prose-like logs."

UsageLink to the section Usage

tsx

import { CodeBlock } from '@skribly/ui/content'

tsx

<CodeBlock
  code={source}
  label="Example: Save button"
  title="Save.tsx"
  language="tsx"
  copyLabel="Copy"
  copiedLabel="Copied"
  copyFailedLabel="Could not copy"
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The code area is a named group in the tab order, so keyboard users can scroll it.
Line numbers are hidden from screen readers and from selection.
The copy result shows as an icon and a word, and a polite status region reads it out.
It stays while the pointer or focus is on the button.

This demo runs through axe in all three themes on every test run. See what the tests check.