Code Block

A framed code block with a language label and copy button.

bash

npx shadcn@latest add button

Installation

Add the code block component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/code-block.json

Usage

tsx

import { CodeBlock } from "@/components/ui/code-block"

Examples

TSX

Language label

tsx

import { Button } from "@/components/ui/button"

<Button>Click me</Button>

import { CodeBlock } from "@/components/ui/code-block"

<CodeBlock
  language="tsx"
  code={`import { Button } from "@/components/ui/button"

<Button>Click me</Button>`}
/>