Yami UI

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" theme="yami-one-dark" />

Examples

IDE themes

Self-contained syntax themes via the theme prop

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

<Button>Click me</Button>

Code

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

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

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

TSX

Default One Dark theme

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>`}
/>