Code Block

A preformatted code surface with a macOS-style header, language label, and one-click copy. Used throughout the docs site to display implementation examples.

Preview

HeroActions.tsx

tsx

import { Button } from "@/components/ui/Button";
import { ArrowRight } from "lucide-react";

export function HeroActions() {
  return (
    <div className="flex items-center gap-3">
      <Button variant="primary" rightIcon={<ArrowRight className="w-4 h-4" />}>
        Get Started
      </Button>
      <Button variant="ghost">Learn more</Button>
    </div>
  );
}

Language variants

The language prop controls the label shown in the header only — no syntax highlighting is applied. Pass any string that conveys the language to readers.

HeroActions.swift

swift

import SwiftUI
import SitkaTokens

struct HeroActions: View {
  var body: some View {
    HStack(spacing: SFSpacing.sm) {
      Button("Get Started") {}
        .buttonStyle(SFPrimaryButtonStyle())
      Button("Learn more") {}
        .buttonStyle(SFGhostButtonStyle())
    }
  }
}

css

/* Base utility */
.code-block {
  background: rgb(var(--surface));
  border: 1px solid rgb(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
}

.code-block pre {
  padding: 1rem;
  overflow-x: auto;
  color: rgb(var(--text-primary));
}

Header anatomy

Element	Description
Traffic lights	Three decorative dots matching macOS window chrome. Purely visual — not interactive.
Filename	Optional label shown when the filename prop is provided. Helps readers identify the file context.
Language badge	Uppercase label derived from the language prop. Shown on the right side of the header.
Copy button	Writes the full code string to the clipboard. Animates to a green "Copied!" state for 2 seconds using Framer Motion.

Implementation

CodeBlock.tsx

tsx

import { CodeBlock } from "@/components/ui/CodeBlock";

// Basic usage
<CodeBlock
  code={`const greeting = "Hello, world!";`}
/>

// With language label
<CodeBlock
  language="typescript"
  code={`type Status = "idle" | "loading" | "success" | "error";`}
/>

// With filename in the header
<CodeBlock
  language="tsx"
  filename="Button.tsx"
  code={`export function Button({ children }: { children: React.ReactNode }) {
  return <button className="btn">{children}</button>;
}`}
/>

Props

Prop	Type	Default	Description
`code`	`string`	—	The source code string to display. Leading and trailing whitespace is trimmed automatically.
`language`	`string`	`"tsx"`	Language label shown in the header bar. Cosmetic only — no syntax highlighting is applied.
`filename`	`string`	—	Optional filename displayed alongside the traffic-light controls in the header.
`className`	`string`	—	Additional classes applied to the outer container.

Accessibility

→The copy button is a native <button> element and is fully keyboard accessible via Tab and Enter.
→The traffic-light dots carry no semantic meaning — they are rendered as decorative divs with no ARIA role.
→Code content is wrapped in a <pre><code> pair, which signals preformatted computer code to assistive technology.
→The language label and filename are visible text; screen readers can read them in the natural document order.
→The copy action provides immediate visual feedback (Copied! state) but does not announce to screen readers by default. If announcing is required, add a live region with aria-live="polite".