Code Block

Syntax-highlighted source with an optional title or file path, copy, inline editing, line numbers and collapsing.

src/components/ui/code-block.tsx

Install

npx astralyx-ui add code-block

Usage

import { CodeBlock } from '@/components/ui/code-block'

<CodeBlock
  filePath="src/components/ui/button.tsx"
  language="tsx"
  lineNumbers
  code={source}
/>

Composer

Change the props and the source below follows.

src/components/ui/stack.tsx

tsx

import { cn } from '@/lib/utils'

export function Stack({ className, ...props }) {
  return (
    <div
      className={cn('flex flex-col gap-2', className)}
      {...props}
    />
  )
}

tsx

<CodeBlock
  language="tsx"
  filePath="src/components/ui/stack.tsx"
  code={source}
/>

Examples

Footer controls

tsx

<CodeBlock
  code={snippet}
  language="typescript"
  title="script.ts"
  footer={
    <>
      <Button variant="secondary" size="xs"><Play />Run code</Button>
      <span className="ms-auto text-xs">Ready</span>
    </>
  }
/>

Default

tsx

<CodeBlock language="tsx" code={source} />

Header — title, file path, language chip

tsx

<CodeBlock title="Variants" code={source} />
<CodeBlock filePath="src/components/ui/button.tsx" code={source} />
<CodeBlock showLanguage={false} filePath="components.json" code={source} />

Editable

tsx

<CodeBlock
  editable
  filePath="src/components/ui/stack.tsx"
  code={source}
  onCodeChange={setSource}
/>

Line numbers and highlighted lines

tsx

<CodeBlock lineNumbers highlightLines={[4, 5, 6]} code={source} />

Collapsed past maxLines

tsx

<CodeBlock maxLines={4} code={source} />

Bare — no header, not copyable

tsx

<CodeBlock header={false} language="bash" code="npm install astralyx-ui" />

Other languages

tsx

<CodeBlock language="css" filePath="src/index.css" code={css} />
<CodeBlock language="json" filePath="components.json" code={json} />

Wrapped

tsx

<CodeBlock wrap code={longLine} />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`CodeBlock`

Extends Omit< ComponentProps<'div'>, 'children' | 'onChange' | 'defaultValue' >.

Prop	Type	Default	Description
title	string	—	Free-form header label. Falls back to the language name.
code	string	required	The source to render. Acts as the initial value when editable.
language	Language	'tsx'	Grammar to highlight with. Each one loads as its own chunk.
filePath	string	—	A path in the same header slot as title, with the directory muted and the file emphasized.
showLanguage	boolean	derived	Language chip on the right. On whenever the header has a label.
copyable	boolean	true	Copy button, showing a checkmark for 1.5s.
editable	boolean	false	Type into the block; highlighting follows every keystroke via a transparent overlay.
footer	ReactNode	—	A control bar under the code — a Run button, a language switch, a status line. Rendered below the expand row, so "show more" stays attached to the code it expands.
onCodeChange	(code: string) => void	—	Fires on every edit.
resettable	boolean	editable	Revert button, shown only once the code differs from the prop.
lineNumbers	boolean	false	Counter gutter down the left edge.
wrap	boolean	false	Soft-wrap long lines instead of scrolling horizontally.
highlightLines	number[]	—	1-based lines to emphasize with an accent background and ring bar.
maxLines	number	—	Collapse past this many lines behind an animated Show more toggle.
minLines	number	—	Keep the code surface at least this tall, in lines. Mostly for `editable`: an editor that starts one line high and grows is a fiddly target, and the caret has nowhere to land when the buffer is empty.
header	boolean	derived	Force the header on or off. On whenever it would hold anything.