Skip to content

Latest on the changelog, Oct 8, 2026: “Pages carry their content without JavaScript, and each deploy pings IndexNow”

OTF Kit logoOTF Kit

Code Block

Display

Syntax-highlighted code preview powered by Shiki, with copy button, line numbers, and line highlights.

View in Storybook
Code Block
Loading Storybook preview…

Installation

bun add @otfdashkit/ui

Usage

Import Code Block from @otfdashkit/ui.

Code
// Code Block — Syntax-highlighted code preview powered by Shiki, with copy button, line numbers, and line highlights.
//
// Install:
//   bun add @otfdashkit/ui

import { CodeBlock } from '@otfdashkit/ui'

export function Example() {
  return (
    <CodeBlock>
      {/* your content */}
    </CodeBlock>
  )
}

Props

Props declared in the CodeBlock source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
coderequiredstringSource code to render.
filenamestringOptional caption rendered above the code (e.g. file name).
highlightLinesnumber[][]1-indexed line numbers to highlight (subtle row tint). Default [].
language'tsx' | 'ts' | 'jsx' | 'js' | 'bash' | 'css' | 'json' | 'yaml' | 'markdown''tsx'Highlight grammar. Must be in the bundled set. Default 'tsx'.
showLineNumbersbooleanfalseShow 1-indexed line numbers in a gutter. Default false.
theme'light' | 'dark' | 'auto''auto'Theme override. 'auto' (default) follows the closest `dark`/`light` ancestor class.

Related