Code Block
Present code with clarity using structured, readable blocks. Includes syntax highlighting, copy actions, and optional labels for better context.
Preview
export function greet(name: string) {
return `Hello, ${name}`;
}import { CodeBlock } from "@/registry/code-block";
const snippet = `export function greet(name: string) {
return \`Hello, \${name}\`;
}`;
export function CodeBlockDemo() {
return (
<div className="w-full max-w-xl">
<CodeBlock code={snippet} language="ts" />
</div>
);
}
Installation
pnpm dlx @arrowui/cli@latest add code-blockUsage
import { CodeBlock } from "@/registry/code-block";<CodeBlock code={snippet} language="tsx" />Examples
Theme
Pass any Shiki bundled theme, or use auto to follow the app light/dark preference.
tokyo-night
import { codeToHtml } from "shiki";
const html = await codeToHtml(source, {
lang: "tsx",
theme: "tokyo-night",
});vitesse-dark
import { codeToHtml } from "shiki";
const html = await codeToHtml(source, {
lang: "tsx",
theme: "tokyo-night",
});monokai
import { codeToHtml } from "shiki";
const html = await codeToHtml(source, {
lang: "tsx",
theme: "tokyo-night",
});import { CodeBlock } from "@/registry/code-block";
const snippet = `import { codeToHtml } from "shiki";
const html = await codeToHtml(source, {
lang: "tsx",
theme: "tokyo-night",
});`;
export function CodeBlockThemeDemo() {
return (
<div className="flex w-full max-w-xl flex-col gap-8">
<div>
<p className="mb-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
tokyo-night
</p>
<CodeBlock code={snippet} language="ts" theme="tokyo-night" />
</div>
<div>
<p className="mb-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
vitesse-dark
</p>
<CodeBlock code={snippet} language="ts" theme="vitesse-dark" />
</div>
<div>
<p className="mb-2 text-xs font-medium tracking-wide text-muted-foreground uppercase">
monokai
</p>
<CodeBlock code={snippet} language="ts" theme="monokai" />
</div>
</div>
);
}
Label
Optional label renders as a slim caption row above the highlighted code (for filenames or context).
schema.ts
import { z } from "zod";
export const schema = z.object({
id: z.string().uuid(),
name: z.string().min(1),
});import { CodeBlock } from "@/registry/code-block";
const snippet = `import { z } from "zod";
export const schema = z.object({
id: z.string().uuid(),
name: z.string().min(1),
});`;
export function CodeBlockLabelDemo() {
return (
<div className="w-full max-w-xl">
<CodeBlock code={snippet} language="ts" label="schema.ts" />
</div>
);
}
Language
Set language for accurate highlighting (tsx, ts, bash, json, css, and more supported by Shiki).
pnpm add react react-dom
npx create-next-app@latest my-appimport { CodeBlock } from "@/registry/code-block";
const snippet = `pnpm add react react-dom
npx create-next-app@latest my-app`;
export function CodeBlockLanguageDemo() {
return (
<div className="w-full max-w-xl">
<CodeBlock code={snippet} language="bash" theme="github-dark" />
</div>
);
}