Skip to main content

​
Overview

The @kuzenbo/code package provides comprehensive code display and editing components powered by Shiki syntax highlighting and CodeMirror. Perfect for documentation sites, playgrounds, and developer tools.
This package is currently in preview and not yet published to npm. The API may change before the stable release.

​
Installation

Once published, install with: 
npm install @kuzenbo/code @kuzenbo/core @kuzenbo/theme react react-dom

​
Components

CodeBlock

Syntax-highlighted code display

CodeDiffBlock

Show code differences

CodePreview

Live preview with code

CodeTabs

Tabbed code examples

CodeWindow

Code in a window frame

TerminalBlock

Terminal-style output

FileTree

Interactive file browser

Playground

Interactive code playground

PackageManagerTabs

npm/yarn/pnpm/bun install tabs

InlineCodeHighlight

Inline syntax highlighting

​
Basic Usage

​
Code Block

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

const code = `
function hello(name: string) {
  console.log(\`Hello, \${name}!\`);
}
`;

export function Example() {
  return (
    <CodeBlock
      code={code}
      language="typescript"
      showLineNumbers
      highlightLines={[2]}
    />
  );
}

​
Code Diff

import { CodeDiffBlock } from '@kuzenbo/code/ui/code-diff-block';

const oldCode = `const name = 'World';`;
const newCode = `const name = 'Kuzenbo';`;

export function DiffExample() {
  return (
    <CodeDiffBlock
      oldCode={oldCode}
      newCode={newCode}
      language="typescript"
    />
  );
}

​
Code Preview

import { CodePreview } from '@kuzenbo/code/ui/code-preview';
import { Button } from '@kuzenbo/core/ui/button';

const code = `<Button>Click me</Button>`;

export function PreviewExample() {
  return (
    <CodePreview code={code} language="tsx">
      <Button>Click me</Button>
    </CodePreview>
  );
}

​
Code Tabs

import { CodeTabs } from '@kuzenbo/code/ui/code-tabs';

const files = [
  {
    name: 'App.tsx',
    language: 'tsx',
    code: `export function App() { return <div>Hello</div>; }`,
  },
  {
    name: 'styles.css',
    language: 'css',
    code: `.container { padding: 1rem; }`,
  },
];

export function TabsExample() {
  return <CodeTabs files={files} />;
}

​
Package Manager Tabs

import { PackageManagerTabs } from '@kuzenbo/code/ui/package-manager-tabs';

export function InstallExample() {
  return (
    <PackageManagerTabs
      npm="npm install @kuzenbo/core"
      yarn="yarn add @kuzenbo/core"
      pnpm="pnpm add @kuzenbo/core"
      bun="bun add @kuzenbo/core"
    />
  );
}

​
Terminal Block

import { TerminalBlock } from '@kuzenbo/code/ui/terminal-block';

const output = `
$ npm run build
✓ Built in 1.2s
✓ 127 modules transformed
`;

export function TerminalExample() {
  return <TerminalBlock output={output} />;
}

​
File Tree

import { FileTree } from '@kuzenbo/code/ui/file-tree';

const files = [
  {
    id: '1',
    name: 'src',
    type: 'folder',
    children: [
      { id: '2', name: 'App.tsx', type: 'file' },
      { id: '3', name: 'index.ts', type: 'file' },
    ],
  },
  { id: '4', name: 'package.json', type: 'file' },
];

export function TreeExample() {
  return <FileTree files={files} onFileClick={(file) => console.log(file)} />;
}

​
Playground

​
Interactive Playground

import { Playground } from '@kuzenbo/code/ui/playground';
import { Button } from '@kuzenbo/core/ui/button';

const initialCode = `
import { Button } from '@kuzenbo/core/ui/button';

export function Demo() {
  return <Button>Click me</Button>;
}
`;

export function PlaygroundExample() {
  return (
    <Playground
      code={initialCode}
      scope={{ Button }}
      showEditor
      showPreview
    />
  );
}

​
Playground with Controls

import { usePlaygroundState } from '@kuzenbo/code/playground/use-playground-state';
import { Button } from '@kuzenbo/core/ui/button';

const controls = [
  {
    name: 'variant',
    type: 'select',
    options: ['solid', 'outline', 'ghost'],
    defaultValue: 'solid',
  },
  {
    name: 'size',
    type: 'select',
    options: ['sm', 'md', 'lg'],
    defaultValue: 'md',
  },
];

export function ControlledPlayground() {
  const playground = usePlaygroundState({
    component: Button,
    controls,
  });

  return <Playground {...playground} />;
}

​
Syntax Highlighting

​
Shiki Highlighter

import { highlightCode } from '@kuzenbo/code/shiki/highlight-code';

const highlighted = await highlightCode({
  code: 'const x = 42;',
  language: 'typescript',
  theme: 'github-dark',
});

​
Custom Transformers

import { shikiTransformers } from '@kuzenbo/code/shiki/shiki-transformers';

const highlighted = await highlightCode({
  code,
  language: 'typescript',
  transformers: [
    shikiTransformers.highlightLines([1, 3, 5]),
    shikiTransformers.focusLines([2, 4]),
  ],
});

​
Line Highlighting

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

<CodeBlock
  code={code}
  language="typescript"
  highlightLines={[1, 3, 5]}
  focusLines={[2, 4]}
  showLineNumbers
/>

​
Code Window

import { CodeWindow } from '@kuzenbo/code/ui/code-window';

<CodeWindow
  title="App.tsx"
  code={code}
  language="tsx"
  showControls
  theme="dark"
/>

​
Inline Code

import { InlineCodeHighlight } from '@kuzenbo/code/ui/inline-code-highlight';

export function InlineExample() {
  return (
    <p>
      Use the <InlineCodeHighlight code="useState" language="tsx" /> hook.
    </p>
  );
}

​
Theming

Code blocks automatically adapt to your theme: 
import { CodeBlock } from '@kuzenbo/code/ui/code-block';

// Automatically uses light/dark theme
<CodeBlock code={code} language="typescript" />

// Force specific theme
<CodeBlock code={code} language="typescript" theme="github-dark" />

​
Dependencies

  • shiki - Syntax highlighting
  • @shikijs/transformers - Code transformers
  • @uiw/react-codemirror - Code editor
  • react-diff-viewer-continued - Diff viewer
  • diff - Diff algorithm
  • react-arborist - File tree
  • anser - ANSI to HTML
  • @kuzenbo/core - Core components

​
Peer Dependencies

{
  "@kuzenbo/core": "^0.0.7",
  "@kuzenbo/theme": "^0.0.7",
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

​
TypeScript

Fully typed code components: 
import { CodeBlock } from '@kuzenbo/code/ui/code-block';
import type { CodeBlockProps } from '@kuzenbo/code/ui/code-block';

const MyCodeBlock: React.FC<{ code: string }> = ({ code }) => {
  const props: CodeBlockProps = {
    code,
    language: 'typescript',
    showLineNumbers: true,
  };
  return <CodeBlock {...props} />;
};

​
Next Steps

Core Components

Explore other UI components

Build docs developers (and LLMs) love

Get started for freeTalk to us