Code window

A window frame around code, coloured with the code tokens.

npx shadcn@latest add https://ui.goodtabs.co/r/code-window.json

With the @goodtabs namespace in components.json: npx shadcn@latest add @goodtabs/code-window

add.sh

# Add a component
npx shadcn add @goodtabs/tabs

A comment and an install command in a narrow window.

TypeScript

page.tsx

import { BrowserFrame } from "@/components/ui/browser-frame"

export default function Page() {
  // Wrap any screenshot
  return <BrowserFrame url="goodtabs.co" />
}

Keywords, names, strings and a comment across several lines.

No title

const tabs = ["Mobbin", "shadcn/ui"]

Only the dots and the code, for a tiny inline snippet.

Usage

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

<CodeWindow title="add.sh">
  <CodeToken kind="name">npx</CodeToken> shadcn@latest add @goodtabs/browser-frame
</CodeWindow>

Props

Prop	Type	Description
title	string	Shown in the title bar, usually a file name.
maxWidth	string	Constrain the window, for example "480px".
CodeToken kind	"name" \| "keyword" \| "string" \| "comment"	On CodeToken: picks the matching --code-* colour. Comments are italic.

Source

code-window/code-window.tsx

import * as React from "react";
import { cn } from "@/lib/utils";

type CodeWindowProps = Omit<React.ComponentProps<"div">, "title"> & {
  /** Shown in the title bar, usually a file name. */
  title?: string;
  /** Constrain the window, for example "480px". */
  maxWidth?: string;
};

/**
 * A window frame around code. The body is a pre in the --code-plain colour;
 * wrap pieces in CodeToken to colour them with the --code-* tokens.
 */
export function CodeWindow({ title, maxWidth, className, style, children, ...props }: CodeWindowProps) {
  return (
    <div
      className={cn("w-full overflow-hidden rounded-lg border bg-background", className)}
      style={{ maxWidth, ...style }}
      {...props}
    >
      <div className="flex h-9 items-center gap-2 border-b bg-muted px-3">
        <div className="flex items-center gap-1.5" aria-hidden="true">
          <span className="size-2.5 rounded-full bg-muted-foreground/30" />
          <span className="size-2.5 rounded-full bg-muted-foreground/30" />
          <span className="size-2.5 rounded-full bg-muted-foreground/30" />
        </div>
        {title && <span className="truncate font-mono text-xs text-foreground/70">{title}</span>}
      </div>
      <pre
        tabIndex={0}
        role="region"
        aria-label={typeof title === "string" ? title : "Code"}
        className="m-0 overflow-x-auto p-4 font-mono text-xs/5 text-(--code-plain)"
      >
        <code>{children}</code>
      </pre>
    </div>
  );
}

const tokenColor = {
  name: "text-(--code-name)",
  keyword: "text-(--code-keyword)",
  string: "text-(--code-string)",
  comment: "text-(--code-comment)",
} as const;

/** A coloured run of code. kind picks one of the --code-* tokens. */
export function CodeToken({
  kind,
  className,
  ...props
}: React.ComponentProps<"span"> & { kind: keyof typeof tokenColor }) {
  return <span className={cn(tokenColor[kind], kind === "comment" && "italic", className)} {...props} />;
}

For AI agents

Hand your agent this page, the markdown at /components/code-window/prompt.md, or the Copy AI prompt button above.

When to use

A short snippet on a landing page, in a hero or beside a screenshot
Showing an install command or a few lines of usage

When not to use

Long listings or code people copy; there is no copy button or highlighter
Real syntax highlighting, which belongs to a build-time highlighter

Agent notes

Server component; children are plain text with CodeToken spans, and newlines are literal
Colours come from --code-plain, --code-name, --code-keyword, --code-string and --code-comment, which flip with the theme
Window dots use bg-muted-foreground/30, never traffic light colours
The body scrolls horizontally rather than wrapping