# Code Block (/components/codeblock)



Code blocks are rendered through the default MDX `pre` component.

```ts title="hello.ts"
export function greet(name: string) {
  console.log(`Hello, ${name}!`);
}
```

```js title="config.js"
/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
};

export default config;
```

### Package managers [#package-managers]

<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
    npm i fumadocs-core fumadocs-ui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm add fumadocs-core fumadocs-ui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn add fumadocs-core fumadocs-ui
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun add fumadocs-core fumadocs-ui
    ```
  </CodeBlockTab>
</CodeBlockTabs>