Code Window

A code block in a window frame, with a filename, an optional copy control and optional line numbers. Accepts plain text or pre-highlighted markup.

SurfacesServer safe

Preview

install.sh

npx shadcn@latest add \
  @duck/theme @duck/sticker-card

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

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

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

import { CodeWindow } from "@/components/ui/code-window"

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

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
title	string	-	Filename shown in the window bar.
html	string	-	Pre-highlighted markup, for example from Shiki. Takes precedence over children.
copyValue	string	-	Shows a copy control that writes this string.
lineNumbers	boolean	false	Number each line. Needs markup that wraps lines in .line.
holo	boolean	false	Iridescent frame instead of the solid border.