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.
Was this example helpful?
Usage#
<CodeBlock
snippets={[
{
language: "tsx",
label: "Label",
code: "import { useProduct } from \"medusa-react\"",
},
]}
>
<CodeBlock.Header />
<CodeBlock.Body />
</CodeBlock>
API Reference#
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:
<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:
Was this example helpful?
No Header#
You can also omit the header entirely:
Was this example helpful?
No Line Numbers#
Was this example helpful?
No Copy Button#
Was this guide helpful?