Skip to content
All 6 kits from $99 · Everything Bundle $149

Code Block

DisplayMIT
View in Storybook

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

bun add @otfdashkit/ui

Preview

Code Block
Loading Storybook preview…

Code

import { CodeBlock } from '@otfdashkit/ui'

const TSX_SAMPLE = `import { Button } from '@otfdashkit/ui'

export function Hero() {
  return (
    <section className="flex flex-col items-center gap-6 py-24">
      <h1 className="text-5xl font-semibold tracking-tight">
        Build apps from a forest of templates.
      </h1>
      <Button size="lg" variant="gradient">
        Get started →
      </Button>
    </section>
  )
}`

export function Example() {
  return (
    <div className="max-w-2xl"><CodeBlock code={TSX_SAMPLE} language="tsx" /></div>
  )
}

Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.

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.