# Code Block

> A React code block with syntax highlighting, line numbers, highlighted lines and a copy button, themed from a single accent color.

- Type: React component (Data Display)
- Access: Free (the source is open to everyone)
- Version: 1.0.1
- Install: `npx wingo-ui@latest add code-block`
- Docs: https://wingo-ui.com/components/code-block

## Interaction

Pick an accent to re-shade the whole block from that one color: keywords, strings, comments, selection and the highlighted-line wash are all tints of it. Hit the copy button to put the code on the clipboard and watch the icon spring into a check. Long lines scroll sideways inside the block, and the code area is focusable so arrow keys scroll it too.

## Installation

```bash
npx wingo-ui@latest add code-block
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/code-block.json`

Files:

- `components/ui/code-block.tsx`

npm dependencies: `npm i lucide-react motion prism-react-renderer`

Wingo UI dependencies (installed automatically):

- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

```tsx
import CodeBlock from "@/components/ui/code-block"

export function Demo() {
  return (
    <CodeBlock
      code={`const greet = (name: string) => \`Hello, \${name}!\``}
      language="ts"
      accent="#F75001"
      filename="greet.ts"
      highlightLines={[1]}
      className="max-h-96 w-full max-w-xl"
    />
  )
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `code` | `string` |  | The source code to render. Leading blank lines and trailing whitespace are trimmed. |
| `language?` | `string` | `"tsx"` | Prism language id, e.g. "tsx", "css", "json", "python". Also shown in the header when there is no filename. Bundled: markup, jsx, tsx, js, ts, css, json, python, go, rust, sql, yaml, graphql, swift, kotlin, cpp, markdown. |
| `accent?` | `string` | `"#F75001"` | Any hex color. The whole theme is shades of it: keywords take the accent itself, strings, numbers and functions are lighter or darker tints, and selection and highlighted lines get a soft wash of it. |
| `mode?` | `"auto" \| "dark" \| "light"` | `"auto"` | Color scheme. Auto follows the page theme (html dark/light class, data-theme, or OS preference). Pass dark or light to pin a palette: dark puts light tints of the accent on a dark surface, light flips the ramp. |
| `filename?` | `string` | `""` | Filename or path shown on the left of the header. Falls back to the language id when empty or omitted. |
| `size?` | `"sm" \| "md" \| "lg"` | `"md"` | Code at 12 / 13 / 14px on 20 / 24 / 28px lines, with a 36 / 40 / 44px header. |
| `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | Corner radius of the frame: 0, 12, 16 or 24px; full falls back to 24px. |
| `background?` | `string` | `""` | Any CSS color for the framed surface. Empty uses the neutral surface of the mode (near black or near white). Token colors are tuned for 4.5:1 on those defaults, so pair a dark background with mode dark and a light one with mode light. |
| `showFrame?` | `boolean` | `true` | Toggles the outer frame: background, border, rounded corners, and header. Turn off to render nothing but the highlighted code. |
| `showHeader?` | `boolean` | `true` | Toggles the header bar. When hidden, the copy button floats over the top-right corner instead. Ignored when showFrame is off. |
| `showLineNumbers?` | `boolean` | `true` | Toggles the line-number gutter. |
| `showCopyButton?` | `boolean` | `true` | Toggles the copy-to-clipboard button. |
| `wrap?` | `boolean` | `false` | Wraps long lines inside the block instead of scrolling sideways; line numbers stay on the first row of each line. |
| `maxHeight?` | `number` | `0` | Caps the block's height in pixels and scrolls the code inside it. 0 means no limit. |
| `copyLabel?` | `string` | `"Copy code"` | Accessible name of the copy button. |
| `copiedLabel?` | `string` | `"Copied"` | Accessible name of the copy button right after copying. |
| `copyResetMs?` | `number` | `1800` | How long the check stays on the copy button, in milliseconds. |
| `highlightLines?` | `number[]` |  | Optional 1-based line numbers to highlight with a soft accent wash. Off when omitted. |
| `className?` | `string` |  | Extra classes merged onto the root element (data-slot="code-block"). Use it for width and max-height; the code area scrolls inside. |

## Examples

- **Highlighted lines**: Pass highlightLines to wash a few lines in the accent, here the request and its error path.
- **Long file with line numbers**: maxHeight caps the block at 260px and scrolls the code inside; line numbers help when you point at a line.
- **API response in light mode**: mode light pins the light palette whatever the page theme, here with a green accent and the small size.
- **Wrapped query**: wrap breaks a long line inside the block instead of scrolling it sideways.
- **Inside a docs paragraph**: size sm without line numbers, wrapped to fit: a short snippet that sits in running text.

## See also

- [Copy Button](https://wingo-ui.com/components/copy-button) ([Markdown](https://wingo-ui.com/components/copy-button.md))
- [Diff Viewer](https://wingo-ui.com/components/diff-viewer) ([Markdown](https://wingo-ui.com/components/diff-viewer.md))
- [JSON Viewer](https://wingo-ui.com/components/json-viewer) ([Markdown](https://wingo-ui.com/components/json-viewer.md))
- [Markdown](https://wingo-ui.com/components/markdown) ([Markdown](https://wingo-ui.com/components/markdown.md))
- [Log Viewer](https://wingo-ui.com/components/log-viewer) ([Markdown](https://wingo-ui.com/components/log-viewer.md))

---

Canonical: https://wingo-ui.com/components/code-block
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt