Code Window

A paper code sheet with quiet chrome (three muted dots + filename), optional language stamp, line numbers, and soft accent highlights. No dark IDE slabs.

Draw

npx shadcn@latest add @clow/code-window

Playground

index.tstsx

1import { Button } from "@/components/ui/button"
2 
3export function Hero() {
4  return (
5    <Button variant="glow">
6      Open the deck
7    </Button>
8  )
9}

props

filename

language

showLineNumbers

<CodeWindow />

Examples

basic

hero.tsxtsx

1import { Button } from "@/components/ui/button"
2 
3export function Hero() {
4  return (
5    <Button variant="glow">
6      Open the deck
7    </Button>
8  )
9}

Props

prop	type	default
filename	text	index.ts
language	text	tsx
showLineNumbers	boolean	true