Code Block
A syntax-highlighted code block with Shiki highlighting, language label, copy action, and plain-text fallback.
bunx --bun shadcn@latest add https://krakstack.net/r/code-block.jsonOverview
CodeBlock renders syntax-highlighted code with Shiki using a highlighter supplied by your app. The component stays synchronous and prop-driven so your project can create one shared highlighter and reuse it across every code block. It falls back to plain text if highlighting fails and includes a copy-to-clipboard button.
Highlighter Setup
Create a project-managed highlighter, for example in src/lib/shiki.ts. This file is intentionally not included by the registry item so each app can choose its bundled themes and languages. Load both vitesse-light and vitesse-dark unless you also change the themes in CodeBlock.
import bash from "@shikijs/langs/bash";
import javascript from "@shikijs/langs/javascript";
import json from "@shikijs/langs/json";
import tsx from "@shikijs/langs/tsx";
import typescript from "@shikijs/langs/typescript";
import vitesseDark from "@shikijs/themes/vitesse-dark";
import vitesseLight from "@shikijs/themes/vitesse-light";
import { createHighlighterCore } from "shiki/core";
import { createOnigurumaEngine } from "shiki/engine/oniguruma";
export const shikiHighlighter = createHighlighterCore({
themes: [vitesseLight, vitesseDark],
langs: [bash, javascript, json, tsx, typescript],
langAlias: { js: "javascript", ts: "typescript", sh: "bash" },
engine: createOnigurumaEngine(import("shiki/wasm")),
});Usage
Resolve the highlighter outside CodeBlock and pass it in.
import { CodeBlock } from "@/components/ui/code-block";
import { shikiHighlighter } from "@/lib/shiki";
import { use } from "react";
function Example({ source }: { source: string }) {
const highlighter = use(shikiHighlighter);
return (
<CodeBlock
code={source}
highlighter={highlighter}
language="tsx"
messages={{ copy: "Copy code", copied: "Copied" }}
/>
);
}