Code Block

Syntax-highlighted code block for AI chat and agent UIs, rendered with shiki (github-light-high-contrast/github-dark-high-contrast, lazy-loaded per language, token cache, one highlight per snippet). Composes a header with filename/title, a copy-to-clipboard button with a checkmark timeout, a language selector built on Select, optional line numbers, and a body that shows raw text instantly and swaps in highlighted tokens when the highlighter resolves; a block that overflows becomes a keyboard-focusable, labeled scroll container. Use it for model-generated code, tool inputs/outputs, and snippets inside Response or Tool; use CodeBlockContent/CodeBlockContainer to build custom layouts.

pnpm dlx shadcn@latest add @uifiles/code-block

Registry JSON Source

Installs with

With header

A header with the file name, a language selector that swaps the sample, and a copy button. Line numbers on.

use-debounce.ts

import { useEffect, useState } from "react"
export function useDebounce<T>(value: T, delay = 300): T {  const [debounced, setDebounced] = useState(value)
  useEffect(() => {    const id = window.setTimeout(() => setDebounced(value), delay)    return () => window.clearTimeout(id)  }, [value, delay])
  return debounced}

Without header

Just the highlighted code, for a value inline in a transcript.

{ "city": "Melbourne", "unit": "celsius" }

Long lines

A block that overflows becomes a focusable, labeled scroll region so keyboard users can reach the rest of the line.

const response = await fetch("https://api.example.com/v1/models?provider=openai&capability=tool-calling&context=200000&sort=price&order=asc&limit=50", { headers: { Authorization: `Bearer ${token}` } })