Yami

Code Block

A syntax-highlighted code block with copy on hover.

npx shadcn@latest add button

Installation

Add the code block component with the shadcn CLI.

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

Usage

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

<CodeBlock language="bash" code="npx shadcn@latest add button" />

Examples

TSX

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

<Button>Click me</Button>

Code

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

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

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