Component

CodeBlock

Display preformatted code with optional contextual descriptions, filename headers, language metadata, and 1-click clipboard copying.

Usage

Import the component entry and start with its smallest complete example.

Import

import { CodeBlock } from "@chitrank2050/monoline-ui/code-block"

Basic usage

<CodeBlock
  description="Configure Tailwind CSS v4 and import Monoline tokens."
  filename="src/app/globals.css"
  language="css"
  code="@import 'tailwindcss';
@import '@chitrank2050/monoline-ui/theme.css';"
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

CodeBlock works for scrollable examples that need a filename or copy button.

Avoid when

You need inline code, an executable editor, or for the component itself to produce syntax highlighting.

Accessibility

CodeBlock combines figure, pre, and code elements. Its scrolling region accepts keyboard focus, and copy buttons have text labels.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

descriptionReactNodeOptional contextual banner or guide text rendered above the filename header

filenamestringOptional label shown in the header bar of the code block

codestringRaw code string to display, format, and copy

languagestringCode language syntax identification for preformatted blocks

Design tokens

Theme variables this component reads for color, spacing, and motion.

--codeCSS varCode block background surface

--code-textCSS varDefault syntax text color inside block

--borderCSS varHairline stroke around container and section dividers

Implementation

The source used by the example above, including any state it needs.

import { CodeBlock } from "@chitrank2050/monoline-ui/code-block"

export function CodeBlockDemo() {
  const code = `import React from "react"
export default function App() {
  return <h1>Hello Monoline</h1>
}`

  return (
    <CodeBlock
      description="Quick start template for React 19 applications."
      filename="src/App.tsx"
      language="tsx"
      code={code}
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentCalloutComponent · ReferenceReference→02ComponentTocComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview