---
title: "Code Block"
description: "Allows you to render highlighted code snippets"
component: true
---

<ComponentExample name="code-block-demo" />

## Usage

---

```tsx
import { CodeBlock } from "@medusajs/ui"
```

```tsx
<CodeBlock 
  snippets={[
    { 
      language: "tsx", 
      label: "Label", 
      code: "import { useProduct } from \"medusa-react\"",
    },
  ]}
>
  <CodeBlock.Header />
  <CodeBlock.Body />
</CodeBlock>
```


## API Reference

---

<ComponentReference mainComponent="CodeBlock" componentsToShow={[
  "CodeBlock",
  "CodeBlock.Header",
  "CodeBlock.Header.Meta",
  "CodeBlock.Body"
]} />

## Usage Outside Medusa Admin

---

If you're using the `CodeBlock` component in a project other than the Medusa Admin, make sure to include the `TooltipProvider` somewhere up in your component tree, as the `CodeBlock.Header` component uses a [Tooltip](/components/tooltip#usage-outside-medusa-admin):

```tsx
<TooltipProvider>
  <CodeBlock 
    snippets={[
      { 
        language: "tsx", 
        label: "Label", 
        code: "import { useProduct } from \"medusa-react\"",
      },
    ]}
  >
    <CodeBlock.Header />
    <CodeBlock.Body />
  </CodeBlock>
</TooltipProvider>
```

## Examples

---

### Single snippet

If you want to only show a code sample for one language or API, you can choose to hide the snippet labels:

<ComponentExample name="code-block-single" />

### No Header

You could also choose to omit the header entirely:

<ComponentExample name="code-block-no-header" />

### No Line Numbers

<ComponentExample name="code-block-no-lines" />

### No Copy Button

<ComponentExample name="code-block-no-copy" />