Code Block React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import CodeBlock from @/components/ui/code-block.

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

• code*
  string

  The source code to render. Leading blank lines and trailing whitespace are trimmed.

• languagedefault "tsx"
  string

  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.

• accentdefault "#F75001"
  string

  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.

• modedefault "auto"
  "auto" | "dark" | "light"

  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.

• filenamedefault ""
  string

  Filename or path shown on the left of the header. Falls back to the language id when empty or omitted.

• sizedefault "md"
  "sm" | "md" | "lg"

  Code at 12 / 13 / 14px on 20 / 24 / 28px lines, with a 36 / 40 / 44px header.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the frame: 0, 12, 16 or 24px; full falls back to 24px.

• backgrounddefault ""
  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.

• showFramedefault true
  boolean

  Toggles the outer frame: background, border, rounded corners, and header. Turn off to render nothing but the highlighted code.

• showHeaderdefault true
  boolean

  Toggles the header bar. When hidden, the copy button floats over the top-right corner instead. Ignored when showFrame is off.

• showLineNumbersdefault true
  boolean

  Toggles the line-number gutter.

• showCopyButtondefault true
  boolean

  Toggles the copy-to-clipboard button.

• wrapdefault false
  boolean

  Wraps long lines inside the block instead of scrolling sideways; line numbers stay on the first row of each line.

• maxHeightdefault 0
  number

  Caps the block's height in pixels and scrolls the code inside it. 0 means no limit.

• copyLabeldefault "Copy code"
  string

  Accessible name of the copy button.

• copiedLabeldefault "Copied"
  string

  Accessible name of the copy button right after copying.

• copyResetMsdefault 1800
  number

  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.

FAQ

Used in

More React data display components