Filename header

Make code blocks feel like real files with a compact “tab” label in the header—great for docs and multi-file examples.

app.css

.card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card);
}

Widely Supported

typographyuino-js

Quick implementation

.code-block {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  overflow: clip;
}

.code-block__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--card-border);
}

.code-block__file {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer improving documentation code blocks.

Goal: Add a filename header above a <pre> code block. The header should look like a small tab or pill showing the filename, with an optional copy button on the right.

Technical constraints:
- Use CSS custom properties and site tokens (var(--card), var(--card-border), etc.) where sensible.
- The header and code area should share a single outer border and radius (overflow: clip).
- The filename should be monospaced and compact.
- The copy button should be optional and align to the right.
- Keep it accessible: good contrast, focusable <pre> (tabindex=0) if needed.

Framework variant (pick one):
A) Vanilla HTML/CSS.
B) React component <CodeBlock filename=\"app.css\" />.

Edge cases to handle:
- Very long filenames: allow horizontal scrolling or ellipsis.
- Multiple blocks on a page: spacing should stay consistent.
- Copy button labels should be readable and not shift layout.

Return HTML + CSS.

Why this matters in 2026

Docs increasingly show multi-file examples. A filename header communicates context instantly—what file you’re looking at—without extra prose. It also creates a clear place for actions like “Copy”.

The logic

The pattern is just one container with a header row and a <pre> body. Using overflow: clip (or hidden) on the outer wrapper ensures the shared rounded corners clip both sections as a single unit.

Accessibility & performance

Use semantic buttons for copy actions and ensure the code area is keyboard scrollable. Avoid extra DOM wrappers inside the <pre> if you don’t need highlighting—simple markup is fastest and most robust.