Skip to content

Components · Reference

Code Block

A syntax-highlighted code block with TanStack Highlight, semantic light and dark colors, a language label, and a copy action.

Last updated September 28, 2026

Overview

CodeBlock renders code with synchronous TanStack Highlight syntax highlighting, semantic light and dark token colors, a language label, and a copy action. The bundled all-language registry is compact and falls back to escaped plain text for unknown languages.

Set the active locale once with KrakstackProvider; pass locale directly only when a component needs an override. English and French defaults are built in, and messages accepts arbitrary locale keys with exact-locale, base-language, then English fallback.

Install

shell
bunx shadcn@latest add @krak-stack/code-block

Usage

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

function Example({ source }: { source: string }) {
  return (
    <CodeBlock
      code={source}
      language="tsx"
      messages={{ copy: "Copy code", copied: "Copied" }}
    />
  );
}
Dependencies
Packages and shadcn components required by this registry item.

Dependencies

Registry Dependencies