Preview Updated 2026-05-10

Code

InlineCode for inline snippets + CodeBlock for multi-line blocks — with optional title, language tag, line numbers, copy button, and max scroll height.

Basic usage

<CfInlineCode> embeds small inline snippets (package names, commands). <CfCodeBlock> takes a code string and renders a multi-line block, with optional title / language / showLineNumbers / copyable.

It includes lightweight syntax highlighting, line numbers, copy, dedent, and a dark code surface. You can also pass highlightedHtml from shiki / highlight.js / prism.

背景视口

用 npm i @chufix-design/vue 安装。

      
      import { CfButton } from '@chufix-design/vue';

export function Hello() {
  return <CfButton>Click me</CfButton>;
}

src/App.vue

<script setup lang="ts">
import { CfInlineCode, CfCodeBlock } from '@chufix-design/vue';

const code = `import { CfButton } from '@chufix-design/vue';

export function Hello() {
  return <CfButton>Click me</CfButton>;
}`;
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <p>用 <CfInlineCode>npm i @chufix-design/vue</CfInlineCode> 安装。</p>
    <CfCodeBlock :code="code" language="tsx" title="hello.tsx" />
  </div>
</template>

<script setup>
import { CfInlineCode, CfCodeBlock } from '@chufix-design/vue';

const code = `import { CfButton } from '@chufix-design/vue';

export function Hello() {
  return <CfButton>Click me</CfButton>;
}`;
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <p>用 <CfInlineCode>npm i @chufix-design/vue</CfInlineCode> 安装。</p>
    <CfCodeBlock :code="code" language="tsx" title="hello.tsx" />
  </div>
</template>

import { CfCodeBlock, CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  const code = `import { CfButton } from '@chufix-design/vue';

  export function Hello() {
    return <CfButton>Click me</CfButton>;
  }`;
  return (
    <>
      <p>Install with <CfInlineCode>npm i @chufix-design/react</CfInlineCode>.</p>
      <CfCodeBlock code={code} language="tsx" title="hello.tsx" />
    </>
  );
}

import { CfCodeBlock, CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  const code = `import { CfButton } from '@chufix-design/vue';

  export function Hello() {
    return <CfButton>Click me</CfButton>;
  }`;
  return (
    <>
      <p>Install with <CfInlineCode>npm i @chufix-design/react</CfInlineCode>.</p>
      <CfCodeBlock code={code} language="tsx" title="hello.tsx" />
    </>
  );
}

Inline code

<CfInlineCode> on its own — wraps <code> as a monospace pill with a tinted background and rounded corners. size="sm" gives a smaller variant for dense docs.

背景视口

常用包：@chufix-design/vue、@chufix-design/react、@chufix-design/tokens。

命令：pnpm dev 启动开发服务器。

小号：--config 是命令行参数。

src/App.vue

<script setup lang="ts">
import { CfInlineCode } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>、<CfInlineCode>@chufix-design/tokens</CfInlineCode>。</p>
    <p>命令：<CfInlineCode>pnpm dev</CfInlineCode> 启动开发服务器。</p>
    <p>小号：<CfInlineCode size="sm">--config</CfInlineCode> 是命令行参数。</p>
  </div>
</template>

<script setup>
import { CfInlineCode } from '@chufix-design/vue';
</script>
<template>
  <div style="display:flex; flex-direction:column; gap: 8px;">
    <p>常用包：<CfInlineCode>@chufix-design/vue</CfInlineCode>、<CfInlineCode>@chufix-design/react</CfInlineCode>、<CfInlineCode>@chufix-design/tokens</CfInlineCode>。</p>
    <p>命令：<CfInlineCode>pnpm dev</CfInlineCode> 启动开发服务器。</p>
    <p>小号：<CfInlineCode size="sm">--config</CfInlineCode> 是命令行参数。</p>
  </div>
</template>

import { CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <p>Common packages: <CfInlineCode>@chufix-design/vue</CfInlineCode>, <CfInlineCode>@chufix-design/react</CfInlineCode>.</p>
      <p>Command: <CfInlineCode>pnpm dev</CfInlineCode>.</p>
      <p>Small: <CfInlineCode size="sm">--config</CfInlineCode>.</p>
    </>
  );
}

import { CfInlineCode } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <p>Common packages: <CfInlineCode>@chufix-design/vue</CfInlineCode>, <CfInlineCode>@chufix-design/react</CfInlineCode>.</p>
      <p>Command: <CfInlineCode>pnpm dev</CfInlineCode>.</p>
      <p>Small: <CfInlineCode size="sm">--config</CfInlineCode>.</p>
    </>
  );
}

Line numbers

showLineNumbers shows line numbers on the left — handy for tutorials and walkthroughs.

背景视口

      
        
          12345678
        
      
      function fib(n) {
  if (n <= 1) return n;
  let [a, b] = [0, 1];
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}

src/App.vue

<script setup lang="ts">
import { CfCodeBlock } from '@chufix-design/vue';

const code = `function fib(n) {
  if (n <= 1) return n;
  let [a, b] = [0, 1];
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}`;
</script>
<template>
  <CfCodeBlock :code="code" language="js" title="fib.js" show-line-numbers />
</template>

<script setup>
import { CfCodeBlock } from '@chufix-design/vue';

const code = `function fib(n) {
  if (n <= 1) return n;
  let [a, b] = [0, 1];
  for (let i = 2; i <= n; i++) {
    [a, b] = [b, a + b];
  }
  return b;
}`;
</script>
<template>
  <CfCodeBlock :code="code" language="js" title="fib.js" show-line-numbers />
</template>

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  const code = `function fib(n) {
    if (n <= 1) return n;
    let [a, b] = [0, 1];
    for (let i = 2; i <= n; i++) {
      [a, b] = [b, a + b];
    }
    return b;
  }`;
  return (
    <>
      <CfCodeBlock code={code} language="js" title="fib.js" showLineNumbers />
    </>
  );
}

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  const code = `function fib(n) {
    if (n <= 1) return n;
    let [a, b] = [0, 1];
    for (let i = 2; i <= n; i++) {
      [a, b] = [b, a + b];
    }
    return b;
  }`;
  return (
    <>
      <CfCodeBlock code={code} language="js" title="fib.js" showLineNumbers />
    </>
  );
}

Limit max height

maxHeight enables vertical scrolling so long blocks don’t take over the page.

背景视口

      
        
          123456789101112131415161718192021222324252627282930
        
      
      console.log('行 1');
console.log('行 2');
console.log('行 3');
console.log('行 4');
console.log('行 5');
console.log('行 6');
console.log('行 7');
console.log('行 8');
console.log('行 9');
console.log('行 10');
console.log('行 11');
console.log('行 12');
console.log('行 13');
console.log('行 14');
console.log('行 15');
console.log('行 16');
console.log('行 17');
console.log('行 18');
console.log('行 19');
console.log('行 20');
console.log('行 21');
console.log('行 22');
console.log('行 23');
console.log('行 24');
console.log('行 25');
console.log('行 26');
console.log('行 27');
console.log('行 28');
console.log('行 29');
console.log('行 30');

src/App.vue

<script setup lang="ts">
import { CfCodeBlock } from '@chufix-design/vue';

const lines = Array.from({ length: 30 }, (_, i) => `console.log('行 ${i + 1}');`);
const code = lines.join('\n');
</script>
<template>
  <CfCodeBlock :code="code" language="js" title="long-output.js" show-line-numbers :max-height="200" />
</template>

<script setup>
import { CfCodeBlock } from '@chufix-design/vue';

const lines = Array.from({ length: 30 }, (_, i) => `console.log('行 ${i + 1}');`);
const code = lines.join('\n');
</script>
<template>
  <CfCodeBlock :code="code" language="js" title="long-output.js" show-line-numbers :max-height="200" />
</template>

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  const code = lines.join('\n');
  return (
    <>
      <CfCodeBlock code={code} language="js" title="long-output.js" showLineNumbers maxHeight={200} />
    </>
  );
}

import { CfCodeBlock } from '@chufix-design/react';

export default function Demo() {
  const code = lines.join('\n');
  return (
    <>
      <CfCodeBlock code={code} language="js" title="long-output.js" showLineNumbers maxHeight={200} />
    </>
  );
}

Code workspace

CfCodeWorkspace combines a project tree with a code surface. Use it for docs snippets, icon source, Blocks recipes, and multi-file examples. With editable, the right side becomes an editor-like textarea while keeping the tree, tabs, copy, and line numbers.

背景视口

src/components/StatusPanel.vuevue

12345678910111213

<script setup lang="ts">
import { CfEmpty, CfButton } from '@chufix-design/vue';

const title = '还没有发布记录';
</script>

<template>
  <CfEmpty :title="title" description="创建第一条记录后会显示在这里。">
    <template #action>
      <CfButton variant="primary" size="sm">创建记录</CfButton>
    </template>
  </CfEmpty>
</template>

src/App.vue

<script setup lang="ts">
import { CfCodeWorkspace, type CodeWorkspaceFile } from '@chufix-design/vue';

const files: CodeWorkspaceFile[] = [
  {
    name: 'src/components/StatusPanel.vue',
    language: 'vue',
    content: `<script setup lang="ts">
import { CfEmpty, CfButton } from '@chufix-design/vue';

const title = '还没有发布记录';
<\/script>
<template>
  <CfEmpty :title="title" description="创建第一条记录后会显示在这里。">
    <template #action>
      <CfButton variant="primary" size="sm">创建记录</CfButton>
    </template>
  </CfEmpty>
</template>`,
  },
  {
    name: 'src/components/status-panel.ts',
    language: 'typescript',
    content: `export interface StatusPanelAction {
  id: string;
  label: string;
  tone?: 'primary' | 'secondary';
}

export const actions: StatusPanelAction[] = [
  { id: 'create', label: '创建记录', tone: 'primary' },
  { id: 'import', label: '导入数据', tone: 'secondary' },
];`,
  },
  {
    name: 'src/styles/status-panel.css',
    language: 'css',
    content: `.status-panel {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--r-6);
}`,
  },
];
</script>
<template>
  <CfCodeWorkspace
    title="status-panel"
    root-label="app"
    :files="files"
    tone="dark"
    editable
    :height="430"
    trim-indent
  />
</template>

<script setup>
import { CfCodeWorkspace } from '@chufix-design/vue';

const files= [
  {
    name: 'src/components/StatusPanel.vue',
    language: 'vue',
    content: `<script setup>
import { CfEmpty, CfButton } from '@chufix-design/vue';

const title = '还没有发布记录';
<\/script>
<template>
  <CfEmpty :title="title" description="创建第一条记录后会显示在这里。">
    <template #action>
      <CfButton variant="primary" size="sm">创建记录</CfButton>
    </template>
  </CfEmpty>
</template>`,
  },
  {
    name: 'src/components/status-panel.ts',
    language: 'typescript',
    content: `export interface StatusPanelAction {
  id: string;
  label: string;
  tone?: 'primary' | 'secondary';
}

export const actions: StatusPanelAction[] = [
  { id: 'create', label: '创建记录', tone: 'primary' },
  { id: 'import', label: '导入数据', tone: 'secondary' },
];`,
  },
  {
    name: 'src/styles/status-panel.css',
    language: 'css',
    content: `.status-panel {
  min-height: 320px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-1);
  border-radius: var(--r-6);
}`,
  },
];
</script>
<template>
  <CfCodeWorkspace
    title="status-panel"
    root-label="app"
    :files="files"
    tone="dark"
    editable
    :height="430"
    trim-indent
  />
</template>

import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  const files: CodeWorkspaceFile[] = [
    {
      name: 'src/components/StatusPanel.vue',
      language: 'vue',
      content: `<script setup lang="ts">

  const title = '还没有发布记录';
  <\/script>
  <template>
    <CfEmpty :title="title" description="创建第一条记录后会显示在这里。">
      <template #action>
        <CfButton variant="primary" size="sm">创建记录</CfButton>
      </template>
    </CfEmpty>
  </template>`,
    },
    {
      name: 'src/components/status-panel.ts',
      language: 'typescript',
      content: `export interface StatusPanelAction {
    id: string;
    label: string;
    tone?: 'primary' | 'secondary';
  }

  export const actions: StatusPanelAction[] = [
    { id: 'create', label: '创建记录', tone: 'primary' },
    { id: 'import', label: '导入数据', tone: 'secondary' },
  ];`,
    },
    {
      name: 'src/styles/status-panel.css',
      language: 'css',
      content: `.status-panel {
    min-height: 320px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-1);
    border-radius: var(--r-6);
  }`,
    },
  ];
  return (
    <>
      <CfEmpty title={title} description="创建第一条记录后会显示在这里。">
            <CfButton variant="primary" size="sm">创建记录</CfButton>
    </>
  );
}

import { CfButton, CfEmpty } from '@chufix-design/react';

export default function Demo() {
  const files= [
    {
      name: 'src/components/StatusPanel.vue',
      language: 'vue',
      content: `<script setup>

  const title = '还没有发布记录';
  <\/script>
  <template>
    <CfEmpty :title="title" description="创建第一条记录后会显示在这里。">
      <template #action>
        <CfButton variant="primary" size="sm">创建记录</CfButton>
      </template>
    </CfEmpty>
  </template>`,
    },
    {
      name: 'src/components/status-panel.ts',
      language: 'typescript',
      content: `export interface StatusPanelAction {
    id: string;
    label: string;
    tone?: 'primary' | 'secondary';
  }

  export const actions: StatusPanelAction[] = [
    { id: 'create', label: '创建记录', tone: 'primary' },
    { id: 'import', label: '导入数据', tone: 'secondary' },
  ];`,
    },
    {
      name: 'src/styles/status-panel.css',
      language: 'css',
      content: `.status-panel {
    min-height: 320px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-1);
    border-radius: var(--r-6);
  }`,
    },
  ];
  return (
    <>
      <CfEmpty title={title} description="创建第一条记录后会显示在这里。">
            <CfButton variant="primary" size="sm">创建记录</CfButton>
    </>
  );
}

Multi-framework / multi-variant (bundles)

Pass a bundles array of parallel implementations and CfCodeWorkspace renders both a framework tab row and a variant tab row at the top. Only the active bundle’s tree and file tabs are visible at a time. framework / variant values are free-form — 'neutral' excludes a bundle from the framework group (handy for CLI / config snippets).

背景视口

src/Counter.vuevue

      
        
          123456789101112
        
      
      <script setup lang="ts">
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref<number>(0);
</script>

<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>

src/App.vue

<script setup lang="ts">
import { CfCodeWorkspace, type CodeWorkspaceBundle } from '@chufix-design/vue';

// 同一个最小应用的 Vue × TS / Vue × JS / React × TS / React × JS 四种实现，
// 通过 bundles[] 一起塞进 CfCodeWorkspace。组件顶部会自动出现「框架 tab + 变体 tab」。

const vueTs = `<script setup lang="ts">
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref<number>(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const vueJs = `<script setup>
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const reactTs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const reactJs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const bundles: CodeWorkspaceBundle[] = [
  {
    id: 'vue-ts',
    framework: 'vue',
    variant: 'ts',
    frameworkLabel: 'Vue',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.vue', content: vueTs, language: 'vue' }],
  },
  {
    id: 'vue-js',
    framework: 'vue',
    variant: 'js',
    frameworkLabel: 'Vue',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.vue', content: vueJs, language: 'vue' }],
  },
  {
    id: 'react-ts',
    framework: 'react',
    variant: 'ts',
    frameworkLabel: 'React',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.tsx', content: reactTs, language: 'tsx' }],
  },
  {
    id: 'react-js',
    framework: 'react',
    variant: 'js',
    frameworkLabel: 'React',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.jsx', content: reactJs, language: 'jsx' }],
  },
];
</script>
<template>
  <CfCodeWorkspace
    title="counter · source"
    root-label="counter"
    :bundles="bundles"
    tone="dark"
    :height="380"
  />
</template>

<script setup>
import { CfCodeWorkspace } from '@chufix-design/vue';

// 同一个最小应用的 Vue × TS / Vue × JS / React × TS / React × JS 四种实现，
// 通过 bundles[] 一起塞进 CfCodeWorkspace。组件顶部会自动出现「框架 tab + 变体 tab」。

const vueTs = `<script setup>
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref<number>(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const vueJs = `<script setup>
import { ref } from 'vue';
import { CfButton } from '@chufix-design/vue';

const count = ref(0);
<\/script>
<template>
  <div>
    <CfButton @click="count++">count = {{ count }}</CfButton>
  </div>
</template>`;

const reactTs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState<number>(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const reactJs = `import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
    </div>
  );
}`;

const bundles= [
  {
    id: 'vue-ts',
    framework: 'vue',
    variant: 'ts',
    frameworkLabel: 'Vue',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.vue', content, language: 'vue' }],
  },
  {
    id: 'vue-js',
    framework: 'vue',
    variant: 'js',
    frameworkLabel: 'Vue',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.vue', content, language: 'vue' }],
  },
  {
    id: 'react-ts',
    framework: 'react',
    variant: 'ts',
    frameworkLabel: 'React',
    variantLabel: 'TypeScript',
    files: [{ name: 'src/Counter.tsx', content, language: 'tsx' }],
  },
  {
    id: 'react-js',
    framework: 'react',
    variant: 'js',
    frameworkLabel: 'React',
    variantLabel: 'JavaScript',
    files: [{ name: 'src/Counter.jsx', content, language: 'jsx' }],
  },
];
</script>
<template>
  <CfCodeWorkspace
    title="counter · source"
    root-label="counter"
    :bundles="bundles"
    tone="dark"
    :height="380"
  />
</template>

import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Demo() {
  const [count, setCount] = useState(0);
  <\/script>
  <template>
    <div>
      <CfButton @click="count++">count = {{ count }}</CfButton>
    </div>
  </template>`;

  const reactTs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState<number>(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const reactJs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const bundles: CodeWorkspaceBundle[] = [
    {
      id: 'vue-ts',
      framework: 'vue',
      variant: 'ts',
      frameworkLabel: 'Vue',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.vue', content: vueTs, language: 'vue' }],
    },
    {
      id: 'vue-js',
      framework: 'vue',
      variant: 'js',
      frameworkLabel: 'Vue',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.vue', content: vueJs, language: 'vue' }],
    },
    {
      id: 'react-ts',
      framework: 'react',
      variant: 'ts',
      frameworkLabel: 'React',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.tsx', content: reactTs, language: 'tsx' }],
    },
    {
      id: 'react-js',
      framework: 'react',
      variant: 'js',
      frameworkLabel: 'React',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.jsx', content: reactJs, language: 'jsx' }],
    },
  ];
  return (
    <>
      <div>
          <CfButton onClick={() => count++}>count = {count}</CfButton>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfButton } from '@chufix-design/react';

export default function Demo() {
  const [count, setCount] = useState(0);
  <\/script>
  <template>
    <div>
      <CfButton @click="count++">count = {{ count }}</CfButton>
    </div>
  </template>`;

  const reactTs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState<number>(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const reactJs = `import { useState } from 'react';

  export default function Counter() {
    const [count, setCount] = useState(0);
    return (
      <div>
        <CfButton onClick={() => setCount((c) => c + 1)}>count = {count}</CfButton>
      </div>
    );
  }`;

  const bundles: CodeWorkspaceBundle[] = [
    {
      id: 'vue-ts',
      framework: 'vue',
      variant: 'ts',
      frameworkLabel: 'Vue',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.vue', content: vueTs, language: 'vue' }],
    },
    {
      id: 'vue-js',
      framework: 'vue',
      variant: 'js',
      frameworkLabel: 'Vue',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.vue', content: vueJs, language: 'vue' }],
    },
    {
      id: 'react-ts',
      framework: 'react',
      variant: 'ts',
      frameworkLabel: 'React',
      variantLabel: 'TypeScript',
      files: [{ name: 'src/Counter.tsx', content: reactTs, language: 'tsx' }],
    },
    {
      id: 'react-js',
      framework: 'react',
      variant: 'js',
      frameworkLabel: 'React',
      variantLabel: 'JavaScript',
      files: [{ name: 'src/Counter.jsx', content: reactJs, language: 'jsx' }],
    },
  ];
  return (
    <>
      <div>
          <CfButton onClick={() => count++}>count = {count}</CfButton>
        </div>
    </>
  );
}

API · InlineCode

Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	`'md'`	Size, relative to the parent font size

API · CodeBlock

Prop	Type	Default	Description
`code`	`string`	required	Code content (use `\n` for line breaks)
`language`	`string`	`—`	Language label on the right of the header
`title`	`string \| ReactNode`	`—`	Title on the left of the header — typically a file name
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size
`showLineNumbers`	`boolean`	`false`	Whether to show line numbers
`copyable`	`boolean`	`true`	Show the copy button in the header
`maxHeight`	`number \| string`	`—`	Max height to enable vertical scrolling
`startLine`	`number`	`1`	First line number
`wrap`	`boolean`	`false`	Soft-wrap long lines
`tone`	`'auto' \| 'light' \| 'dark'`	`'auto'`	Code surface tone; `auto` follows the global theme
`trimIndent`	`boolean`	`false`	Remove common indentation
`highlight`	`boolean`	`true`	Enable built-in lightweight highlighting
`highlightedHtml`	`string`	—	Safe HTML from an external highlighter

API · CodeWorkspace

Prop	Type	Default	Description
`files`	`CodeWorkspaceFile[]`	—	Single-bundle file list; mutually exclusive with `bundles`
`bundles`	`CodeWorkspaceBundle[]`	—	Multi-bundle mode; renders framework / variant tabs when provided
`title`	`string \| ReactNode`	—	Header title
`rootLabel` / `root-label`	`string`	`'project'`	Tree root label
`defaultFile` / `activeFile`	`string`	first file	Default / controlled active file id
`defaultBundle` / `activeBundle`	`string`	first bundle	Default / controlled active bundle id
`editable`	`boolean`	`false`	Editor mode
`readOnly` / `read-only`	`boolean`	`false`	Disable editing
`showLineNumbers` / `show-line-numbers`	`boolean`	`true`	Line numbers
`copyable`	`boolean`	`true`	Copy current file
`height`	`number \| string`	—	Fixed workspace height
`wrap`	`boolean`	`false`	Soft-wrap long lines
`tone`	`'auto' \| 'light' \| 'dark'`	`'auto'`	Surface tone; `auto` follows the global theme
`trimIndent` / `trim-indent`	`boolean`	`false`	Dedent in display mode
`highlightedHtml`	`CodeWorkspaceFile` field	—	Per-file external highlighted HTML

interface CodeWorkspaceFile {
  id?: string;
  name: string;
  content: string;
  language?: string;
  highlightedHtml?: string;
  readonly?: boolean;
}

interface CodeWorkspaceBundle {
  id: string;
  framework: 'vue' | 'react' | 'neutral' | string;
  variant: 'ts' | 'js' | 'shell' | string;
  frameworkLabel: string;
  variantLabel: string;
  label?: string;
  files: CodeWorkspaceFile[];
}