Code Block

Code display with a filename tab, line numbers, highlighted lines that sweep in, lightweight built-in token coloring and a copy button that springs into a check.

counter.tsx

tsx

1import { useState } from "react";2 3// Count clicks and celebrate every tenth one.4export function Counter({ step = 1 }: { step?: number }) {5  const [count, setCount] = useState(0);6  const party = count > 0 && count % 10 === 0;7 8  return (9    <button className="btn" onClick={() => setCount(count + step)}>10      {party ? "Party!" : "Clicked"} {count} times11    </button>12  );13}

Open

filename

language

highlightLines

showLineNumbers

copyable

Installation

npx shadcn@latest add @glint-ui/code-block

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/code-block.json

Usage

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

<CodeBlock
  filename="counter.tsx"
  language="tsx"
  highlightLines="5-6"
  code={source}
/>

Props

Prop	Type	Default	Description
filename	string	"counter.tsx"	Tab label in the header.
language	"tsx" \| "ts" \| "js" \| "css" \| "json" \| "bash" \| "python"	"tsx"	Token rules and header badge.
highlightLines	string	"5-6"	1-based lines to highlight: "3", "2,5-7" or number[].
showLineNumbers	boolean	true	Gutter with line numbers.
copyable	boolean	true	Copy-to-clipboard button.
code	ReactNode	—	The source text to display.
className	string	—	Extra classes for the root element.