Code Block

SELECT
  COALESCE(primary_location.country_code, 'Not recorded') AS country,
  COUNT(record_id) AS company_count
FROM companies
GROUP BY country
ORDER BY company_count DESC;

# headerless: no language, no copy
pnpm run registry:build

InstallCopy Anchor Link

pnpm exec vegastack-design verify code-block

pnpm dlx shadcn@4.21.0 add @vegastack/code-block

UsageCopy Anchor Link

Unknown fence languages, including inherited object-property names, render as plain text.

import { CodeBlock } from "@/components/ui/code-block";

<CodeBlock language="sql" copyValue={query}>
  {query}
</CodeBlock>;

MarkdownView integrationCopy Anchor Link

MarkdownView delegates every fenced code block here automatically — the language comes from the fence info string and the copy source from the block's text, so chat transcripts and rendered markdown get the highlighted, copyable surface with no extra wiring. TextEdit's code block wears the same surface, with a searchable language picker in place of the label.

AnatomyCopy Anchor Link

A <figure> on bg-muted/60, rounded-lg, with no border or header bar. On hover or focus inside (always on a touch screen) the language's display name (<figcaption>, "TypeScript" for ts) shows top-left and a Copy CopyButton (check and "Copied" after a copy) top-right when copyValue is set. The body is 13px mono with relaxed leading, px-4 py-3, scrolling sideways. A string child is highlighted with lowlight's common grammars (fence aliases such as ts, js, sh and yml resolve), coloured by the token-mapped .hljs-* rules in utilities.css.

ExamplesCopy Anchor Link

With and without a headerCopy Anchor Link

SELECT
  COALESCE(primary_location.country_code, 'Not recorded') AS country,
  COUNT(record_id) AS company_count
FROM companies
GROUP BY country
ORDER BY company_count DESC;

# headerless: no language, no copy
pnpm run registry:build

Long linesCopy Anchor Link

Code does not wrap. A line wider than the panel scrolls inside the block's own horizontal scroll container, so a long command never widens the page around it — which is what keeps a 320px viewport reflowing instead of scrolling sideways.

docker run --rm -it --name vegastack-registry --env REGISTRY_BASE_URL=https://design.vegastack.com/r --env CF_ACCESS_CLIENT_ID=$CF_ACCESS_CLIENT_ID --volume "$PWD":/workspace ghcr.io/vegastack/registry-preflight:latest --verify --fail-closed

API ReferenceCopy Anchor Link

AccessibilityCopy Anchor Link

• A supplied language becomes the visible <figcaption> label; the code remains real selectable text.
• The composed CopyButton provides its own keyboard interaction, accessible name, and polite copied-state announcement.
• Horizontal overflow scrolls inside the code panel so long lines do not force page-level overflow at 320px.

Do / Don'tCopy Anchor Link