CodeBlock

data-display

Code display block with line numbers, language header, copy-to-clipboard button, monospace font, and horizontal scroll. Token-driven for all visual elements.

Import

typescript
import { CodeBlock } from "packages/ui/src";

Props

CodeBlockProps

PropTypeRequired
codestringYes
languagestringNo
showLineNumbersbooleanNo
showCopybooleanNo

Examples

Code Block

Code display with line numbers, language header, and copy button.

TypeScript

typescript
import { Button, Card } from "@cms-aichemist/ui";export function Dashboard() {  return (    <Card style={{ padding: "2rem" }}>      <h1>Welcome</h1>      <Button onClick={() => console.log("clicked")}>        Get Started      </Button>    </Card>  );}

JSON (no line numbers)

json
{  "$schema": "https://design-tokens.org/schema.json",  "color": {    "primary": {      "base": { "$value": "#a78bfa", "$type": "color" },      "hover": { "$value": "#8b5cf6", "$type": "color" }    }  }}

Bash

bash
# Build and deploynpm run buildpm2 restart cms-webcurl -s https://cms.chem.dev/ | head -1

Metadata

Component Metadata
Familydata-display
FrameworksNext.js, Astro/EmDash
DescriptionCode display block with line numbers, language header, copy-to-clipboard button, monospace font, and horizontal scroll. Token-driven for all visual elements.
PropsCodeBlockProps (code: string, language?: string, showLineNumbers?: boolean, showCopy?: boolean)
Statesdefault, with-language, no-line-numbers, copied-state
A11y
  • Pre element has role=region with aria-label
  • Line numbers are aria-hidden
  • Copy button has aria-label that updates on copy
Responsive
  • Full-width by default
  • Horizontal scroll on overflow
Motion
  • Copy button color transition on hover
Token Dependencies
  • components.codeBlock.background
  • components.codeBlock.borderColor
  • components.codeBlock.borderRadius
  • components.codeBlock.padding
  • components.codeBlock.fontFamily
  • components.codeBlock.fontSize
  • components.codeBlock.lineHeight
  • components.codeBlock.textColor
  • components.codeBlock.lineNumberColor
  • components.codeBlock.lineNumberWidth
  • components.codeBlock.headerBackground
  • components.codeBlock.headerColor
  • components.codeBlock.headerFontSize
  • components.codeBlock.copyColor
  • components.codeBlock.copyHoverColor
Content Slotscode (string), language (string)
CMS Bindings
  • Code content from CMS field
  • Language from CMS metadata
Test Cases
  • Renders code content
  • Shows language header
  • Has line numbers
  • Copy button present
  • Pre has role=region
  • Line numbers are aria-hidden
  • Hides line numbers when disabled
  • Passes className through