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

draw a card

$npx shadcn@latest add @clow/code-window

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

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