Code Snippet

A code block that highlights itself, wears one of six color schemes and exports itself as a PNG. Local highlighter, so there is no async theme load and no flash of unstyled code.

SurfacesClient componentlucide-react

Preview

pond-card.tsxtsx

1// Sticker-cut card, foil ring while the pointer is on it.2export function PondCard({ title, count = 0 }: PondCardProps) {3  const [open, setOpen] = React.useState(false);45  return (6    <StickerCard tilt onClick={() => setOpen(!open)}>7      <StickerCardTitle>{title}</StickerCardTitle>8      <HoloBadge variant="primary">{count} ducks</HoloBadge>9    </StickerCard>10  );11}

Installation

The CLI writes the source into your project and pulls in whatever it depends on.

$pnpm dlx shadcn@latest add @duck/code-snippet

Pulls in @duck/theme, @duck/copy-button. Already installed items are skipped.

Usage

import { CodeSnippet, codeSnippetSchemes } from "@/components/ui/code-snippet"

The file lands in components/ui/code-snippet.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.

Props

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
code	string	-	The source to render. Required.
lang	"auto" \| "tsx" \| "ts" \| "jsx" \| "js" \| "json" \| "jsonc" \| "css" \| "html" \| "bash" \| "python" \| "sql" \| "yaml" \| "diff" \| "text"	"auto"	Grammar to color with. Auto reads the extension in title first, the shape of the code second.
title	string	-	Filename in the header bar. Also names the exported PNG.
scheme	"duck" \| "pond" \| "sunset" \| "neon" \| "paper" \| "mono"	"duck"	Syntax palette. Each one carries a light and a dark set, picked by the page theme.
frame	"sticker" \| "holo" \| "plain"	"sticker"	Border treatment: 3px sticker edge, iridescent, or a hairline.
chrome	"dots" \| "plain" \| "none"	"dots"	Header bar: traffic lights, bar without them, or no bar — where the controls float in on hover instead.
lineNumbers	boolean	true	Number the gutter.
startLine	number	1	First line number, for excerpts that begin mid-file.
highlight	string \| number[]	-	Lines washed with the accent color: "3,7-9" or [3, 7, 8, 9].
wrap	boolean	false	Wrap long lines instead of scrolling them.
maxLines	number	-	Collapse to this many lines behind a show-all control.
languageBadge	boolean	true	Show the language in the header bar.
copyable	boolean	true	Copy control for the code itself.
exportable	boolean	true	PNG controls: download, plus copy-to-clipboard where the browser allows an image write.
schemePicker	boolean	false	Let the reader switch scheme. The scheme prop stays the starting point.
wrapToggle	boolean	false	Let the reader turn wrapping on and off.
exportScale	number	2	Pixel density of the PNG, clamped to 1–4.
exportBackdrop	"holo" \| "scheme" \| "none"	"holo"	What sits behind the card in the PNG: a gradient cut from the scheme, a flat wash, or nothing.
watermark	string	-	Small credit painted into the PNG only, never on screen.
fileName	string	-	Override the download name. Defaults to a slug of title.

Rules

What keeps this component from turning into noise.

The PNG is always the whole snippet at full width. Collapsing and wrapping are reading aids on screen, not part of the export.
Syntax colors are the one place duck/ui uses raw values instead of semantic tokens — a syntax palette is data, the same way a Shiki theme is. Everything around the code stays on the theme.
The highlighter is a scanner, not a parser. It covers the languages listed under lang convincingly; for an MDX pipeline or an exotic grammar, highlight with Shiki on the server and hand the markup to code-window instead.
One holo element per viewport still applies: frame="holo" competes with every other iridescent thing on the page.
The clipboard image control only appears where the browser can write an image (not Firefox). Download works everywhere.