Code Block

A component for displaying code snippets with syntax highlighting and copy functionality.

In this guide, you'll learn how to use the Code Block component.

curl 'http://localhost:9000/store/products/PRODUCT_ID'
 -H 'x-publishable-key: YOUR_API_KEY'

Usage#

Code
import { CodeBlock } from "@medusajs/ui"

Code
1<CodeBlock 2  snippets={[3    { 4      language: "tsx", 5      label: "Label", 6      code: "import { useProduct } from \"medusa-react\"",7    },8  ]}9>10  <CodeBlock.Header />11  <CodeBlock.Body />12</CodeBlock>

API Reference#

CodeBlock#

This component is based on the div element and supports all of its props

CodeBlock.Header#

This component is based on the div element and supports all of its props

CodeBlock.Header.Meta#

This component is based on the div element and supports all of its props

CodeBlock.Body#

This component is based on the div element and supports all of its props

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:

Code
1<TooltipProvider>2  <CodeBlock 3    snippets={[4      { 5        language: "tsx", 6        label: "Label", 7        code: "import { useProduct } from \"medusa-react\"",8      },9    ]}10  >11    <CodeBlock.Header />12    <CodeBlock.Body />13  </CodeBlock>14</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:

1
console.log("Hello, World!")

No Header#

You can also omit the header entirely:

1
console.log("Hello, World!")

No Line Numbers#

console.log("Hello, ")

console.log("World!")

No Copy Button#

1
console.log("Hello, World!")