---
title: "Server code block"
description: "A code block highlighted in a React Server Component."
url: https://docscn.dev/docs/components/server-codeblock
lastModified: 2026-10-08T08:01:44.000Z
---

# Server code block (/docs/components/server-codeblock)

> A code block highlighted in a React Server Component.

<ServerCodeBlock 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/server-codeblock
    ```
  </CodeBlockTab>

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

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

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

## Usage [#usage]

```tsx
import { ServerCodeBlock } from "@/components/docs/components/codeblock.rsc";

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

`ServerCodeBlock` is an async React Server Component. It highlights the code with Shiki on the server, using the same [code block](/docs/components/codeblock) as your content, and sends no highlighting code to the browser.

For code that's only known in the browser, use [`DynamicCodeBlock`](/docs/components/dynamic-codeblock).

## Props [#props]

<TypeTable
  type="{
  lang: {
    description: <>The code's language.</>,
    type: &#x22;string&#x22;,
    required: true,
  },
  code: {
    type: &#x22;string&#x22;,
    required: true,
  },
  themes: {
    description: (
      <>
        Shiki's light and dark themes. The other options of{&#x22; &#x22;}
        <code>{&#x22;highlight()&#x22;}</code> from{&#x22; &#x22;}
        <code>{&#x22;fumadocs-core/highlight&#x22;}</code> work too.
      </>
    ),
    type: &#x22;{ light: string; dark: string }&#x22;,
    default: '{ light: &#x22;github-light&#x22;, dark: &#x22;github-dark&#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;,
  },
}"
/>