Code Block

pnpm add @zynactra/ui @zynactra/tokens

Usage

import {
  CodeBlock,
  CodeBlockActions,
  CodeBlockContent,
  CodeBlockCopyButton,
  CodeBlockHeader,
  CodeBlockTitle,
} from "@zynactra/ui/code-block"

<CodeBlock>
  <CodeBlockHeader>
    <CodeBlockTitle>Terminal</CodeBlockTitle>
    <CodeBlockActions>
      <CodeBlockCopyButton value={code} />
    </CodeBlockActions>
  </CodeBlockHeader>
  <CodeBlockContent>{code}</CodeBlockContent>
</CodeBlock>

CodeBlockContent takes lineNumbers, startLine and wrap. CodeBlock takes size="sm" and variant="destructive" (for error output).

Examples

Diff

Render each line as a CodeBlockLine with variant added, removed or highlighted.

@import "@zynactra/ui/core.css";@import "@zynactra/ui/themes/zynactra.css";@import "@zynactra/ui/themes/harbor.css";
/* Your app's own styles */

Guidelines

• It renders plain text. For syntax colors, highlight with Shiki and pass one CodeBlockLine per highlighted line.
• Always offer copy for anything the user will paste (commands, keys, config).
• The title is the file path or the shell, not a description.