Code Window

import { Button } from "@/components/ui/button" export function Hero() {  return (    <section className="flex flex-col items-center gap-6">      <h1 className="text-5xl font-semibold tracking-tight">        Ship interfaces that look finished      </h1>      <Button size="lg">Get started</Button>    </section>  )}

Installation

npx shadcn@latest add @blank/code-window

Usage

import {
  CodeWindow,
  CodeWindowHeader,
  CodeWindowTab,
  CodeWindowContent,
  CodeWindowCode,
} from "@/components/ui/code-window"

<CodeWindow defaultValue="hero.tsx">
  <CodeWindowHeader>
    <CodeWindowTab value="hero.tsx">hero.tsx</CodeWindowTab>
  </CodeWindowHeader>
  <CodeWindowContent value="hero.tsx">
    <CodeWindowCode>{source}</CodeWindowCode>
  </CodeWindowContent>
</CodeWindow>

The window is built on Radix Tabs, so each tab switches its own panel and the keyboard works the way it does in an editor. There is no highlighter inside: a string child is split into numbered lines as plain text, which keeps the component free of a grammar bundle.

Examples

Composed lines

To colour tokens or draw the eye to a change, pass CodeWindowLines instead of a string. Numbering continues across them, and highlighted tints a line.

/* Point the identity colour at blue */:root {  --brand: var(--blue-500);  --brand-hover: var(--blue-600);  --radius: 0.75rem;}