Code Blocks

Every code surface in these docs shares one frame: the terminal-style header (traffic-light dots, label, persistent copy button) above a dark Shiki-highlighted body that stays the same in light and dark mode.

Fenced blocks

A plain fenced block gets the full frame automatically — the language becomes the header label and the copy button receives the raw source.

import { TrendChartCard } from "@aur-ui/ui/components/trend-chart";

export function Example() {
  return <TrendChartCard title="Latency" series={[]} />;
}

Notations

Tag a line with a [!code ...] comment; the comment is stripped from the output and the line is decorated instead.

Highlight

Append // [!code highlight] to mark a line with the brand wash:

export function greet(name: string) {
  const message = "Hello, " + name;
  return message;
}

Diff

// [!code ++] and // [!code --] render added/removed washes:

export function sum(values: number[]) {
  return values.reduce((a, b) => a + b, 0);
  return values[0] + values[1];
}

Focus

// [!code focus] dims and blurs every other line; hover the block to restore them:

const config = loadConfig();
const server = createServer(config);
server.listen();

CodeBlock options

Pages can also render a code string directly with <CodeBlock />, which adds three opt-ins on top of the frame.

Line numbers and collapse

lineNumbers renders CSS-counter line numbers; collapsible caps tall code behind an expand toggle:

import { cn } from "@aur-ui/ui/lib/utils";
import type * as React from "react";

function Panel({ className, ...props }: React.ComponentProps<"div">) {
return (
  <div
    data-slot="panel"
    className={cn(
      "flex flex-col gap-6 rounded-panel bg-surface py-6 shadow-section",
      className,
    )}
    {...props}
  />
);
}

function PanelHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
  <div
    data-slot="panel-header"
    className={cn("grid items-start gap-2 px-6", className)}
    {...props}
  />
);
}

function PanelTitle({ className, ...props }: React.ComponentProps<"div">) {
return (
  <div
    data-slot="panel-title"
    className={cn("leading-none font-semibold", className)}
    {...props}
  />
);
}

export { Panel, PanelHeader, PanelTitle };

Without window dots

dots={false} drops the macOS decoration for a plain header:

pnpm add @aur-ui/ui