@k2b/ui

Code

Selectable source with language-aware highlighting and copy.

Install

1bun add @k2b/ui

2bun run build

component.tsx

1export const Status = () => <span data-ready="true">Ready</span>;

TSX

<CodeDisplay title="Install" language="script" code="bun add @k2b/ui" />

<CodeDisplay title="component.tsx" language="tsx" code={componentSource} />

CodeDisplay renders highlighted, selectable source with optional title, line numbers, and copy action. The application owns the source text and its trust boundary.

Use code

Use it for read-only snippets, generated configuration, and diagnostic payloads. Use StructuredDataPreview for data whose structure matters more than its serialized form.

Import

import {
  CodeDisplay,
  type CodeDisplayLanguage,
  type CodeDisplayProps,
} from "@k2b/ui";

CodeDisplayLanguage supports TypeScript, JavaScript, script, Markdown, and plain text modes. Line numbers and copy are enabled by default and can be disabled independently.

Accessibility

Source remains selectable text. Titles and copy controls have text labels. Highlighting must not be the only explanation of an important token.

Runtime

Highlighting renders on the server. Copy requires hydration and the Clipboard API.

Example

<CodeDisplay
  title="health.ts"
  language="ts"
  code={`export const health = () => ({ ok: true });`}
/>