Code block

Highlighted source with a language label and copy.

Default

A header carrying the language and a copy action.

tsx

import { Button } from "@boyernick/standard-ui-react"

export const SaveButton = () => (
  <Button variant="primary">Save changes</Button>
)

Highlighted

Call out the lines that matter.

typescript

import { generateText } from "ai"

export async function summarize(input: string) {
  const { text } = await generateText({
    model: "openai/gpt-5",
    prompt: `Summarize this clearly: ${input}`,
  })

  return {
    text,
    generatedAt: new Date().toISOString(),
  }
}

Review

Green for additions, red for removals.

typescript

function greet(name: string) {
  console.log("hi")
  return `Hello, ${name}`
}

Small

A tighter type scale and padding.

css

:root {
  --duration-sm: 150ms;
  --ease-snap: cubic-bezier(0.1, 0.9, 0.2, 1);
}

Without a header

The frame on its own, with no language label or copy action.

npm install @boyernick/standard-ui-react

Bare

No frame, for code nested inside another surface.

npm install @boyernick/standard-ui-react