Code Block

Highlighted code with file tabs, line numbers, lit lines, diffs, wrap and copy. Built-in tokenizer, no dependencies.

TypeScript

import { NextResponse } from "next/server";

import { sendInvite } from "@/lib/mail";

import { rateLimit } from "@/lib/rate-limit";

export async function POST(request: Request) {

const ip = request.headers.get("x-forwarded-for")?.split(",")[0] ?? "local";

// Five invites a minute per address is plenty for a person and useless for a script.

const { ok, remaining } = await rateLimit(`invites:${ip}`, 5);

if (!ok) {

return NextResponse.json(

{ error: "Too many invites. Try again in a minute." },

{ status: 429, headers: { "Retry-After": "60" } },

);

}

const { email } = await request.json();

await sendInvite(email);

return NextResponse.json({ sent: true }, { headers: { "X-RateLimit-Remaining": String(remaining) } });

}

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/code-block.json

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

<CodeBlock filename="app/page.tsx" code={source} highlight={[3, 4]} />

diff reads a leading + or - on each line. Copy gives you the file as it reads after the change, without the removed lines or the markers.

The built-in tokenizer covers JS, TS, JSX, TSX, HTML, JSON, CSS and shell. startLine numbers an excerpt from where it sits in the file.

Past maxHeight the body scrolls and the line numbers stay put. The wrap toggle folds long lines instead of scrolling sideways.

header={false} for one-liners in prose. Copy appears on hover and on keyboard focus.

Renders a div and accepts every native div attribute.

Prop	Type	Default
`code`	`string` The source. Ignored when files is set. A trailing newline is dropped.	None
`language`	`string` tsx, ts, jsx, js, html, json, css, bash, sh or diff. Other values render as plain text with their name in the header.	from filename
`filename`	`string` Shown in the header with its directories dimmed.	None
`files`	`CodeBlockFile[]` { filename, code, language?, highlight?, diff?, startLine? } per tab. The tab value is the filename.	None
`value`	`string` Controlled active file.	None
`defaultValue`	`string` Initial file when uncontrolled.	first file
`onValueChange`	`(filename: string) => void` Called when another tab is chosen.	None
`highlight`	`(number \| [number, number])[]` Line numbers to light, as they're displayed. [3, 4] or [[3, 9]] for a range.	None
`diff`	`boolean` Treat a leading + or - as added or removed.	`false`
`lineNumbers`	`boolean` Show the line number gutter.	`true`
`startLine`	`number` Number of the first line.	`1`
`wrap`	`boolean` Controlled word wrap.	None
`defaultWrap`	`boolean` Initial wrap when uncontrolled.	`false`
`onWrapChange`	`(wrap: boolean) => void` Called when the toggle is pressed.	None
`wrapToggle`	`boolean` Show the wrap toggle in the header.	`true`
`copyable`	`boolean` Show the copy button.	`true`
`maxHeight`	`number \| string` The body scrolls past this. Numbers are pixels.	None
`header`	`boolean` Hide the header; copy floats in the corner instead.	`true`
`color`	`NeonColor` Palette name or hex. Token colors are derived from it.	inherited

The tokenizer on its own: tokenize(code, language) returns [kind, text] pairs, for rendering code somewhere else.

Prop	Type	Default
`kind`	`CodeTokenKind` keyword, string, number, comment, function, type, property, punctuation, tag, attr, variable, prompt or plain.	None

Highlighting runs in render with no effects, so the server sends colored HTML and nothing shifts on hydration.
Token colors are mixed from --neon and stay above 4.5:1 on the block's background for every palette color.
The code area is a focusable region named after the file, so keyboard users can scroll it with the arrow keys.
File tabs follow the tabs pattern: one Tab stop, arrow keys and Home/End move and select.
Added and removed lines carry a hidden 'Added:' or 'Removed:' prefix for screen readers, left out of copied text.
Line numbers and diff markers can't be selected, so copying by hand gives clean code.