---
title: "Dynamic code block"
description: "A code block highlighted in the browser, for code that's only known at runtime."
url: https://docscn.dev/docs/components/dynamic-codeblock
lastModified: 2026-10-08T08:01:44.000Z
---

# Dynamic code block (/docs/components/dynamic-codeblock)

> A code block highlighted in the browser, for code that's only known at runtime.

<DynamicCodeBlock lang="ts" code="'const greeting = &#x22;Hello, world!&#x22;;'" />

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/dynamic-codeblock
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/dynamic-codeblock
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/dynamic-codeblock
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/dynamic-codeblock
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

```tsx
import { DynamicCodeBlock } from "@/components/docs/components/dynamic-codeblock";

<DynamicCodeBlock lang="ts" code={code} />;
```

It loads Shiki in the browser and highlights the code with the GitHub light and dark themes, using the same [code block](/docs/components/codeblock) as your content. Until Shiki has loaded, it shows the code without colours.

Shiki's full bundle is large. To load less, use `DynamicCodeBlock` from `components/dynamic-codeblock.core` with your own highlighter, built with only the languages and themes you need.

For code that's known on the server, [`ServerCodeBlock`](/docs/components/server-codeblock) sends no JavaScript to the browser.

## Props [#props]

<TypeTable
  type="{
  lang: {
    description: <>The code's language.</>,
    type: &#x22;string&#x22;,
    required: true,
  },
  code: {
    type: &#x22;string&#x22;,
    required: true,
  },
  options: {
    description: (
      <>
        Shiki's options, such as <code>{&#x22;themes&#x22;}</code> and{&#x22; &#x22;}
        <code>{&#x22;components&#x22;}</code>.
      </>
    ),
    type: &#x22;UseShikiOptions&#x22;,
  },
  codeblock: {
    description: (
      <>
        Props for the underlying <code>{&#x22;CodeBlock&#x22;}</code>, such as{&#x22; &#x22;}
        <code>{&#x22;title&#x22;}</code>.
      </>
    ),
    type: &#x22;CodeBlockProps&#x22;,
  },
  wrapInSuspense: {
    description: <>Show the code without colours while Shiki loads.</>,
    type: &#x22;boolean&#x22;,
    default: &#x22;true&#x22;,
  },
}"
/>