Skip to content

CodeBlock

MD · 1950B gzip budget

A code sample, always left-to-right regardless of page direction, with copy.

Category
Data display
Budget
md, several states or a live subscription
External runtime
React / React DOM only
axe fixtureSSR rendersource scanbundle budget

Preview

Live fixture
Preview locale
const x = 1;

Try the component here. Locale-aware formatting and direction follow the selected language; example content and labels are not automatically translated. Overlay demos use interactive launchers.

Install

npx shadcn@latest add https://gear5-ui.vercel.app/r/code-block.json

Copies the source into your project. Pulls in 3 shared registry items: copy-button, announce, cn.

New here? Set up Tailwind and import aliases first →

Source & props

Edit on GitHub ↗

Prop types and inline documentation are included below. This is repository source; the installer rewrites shared imports for your project.

import { CopyButton } from "./copy-button";
import { cn } from "../lib/cn";

export interface CodeBlockProps {
  code: string;
  language?: string;
  className?: string;
}

/**
 * `dir="ltr"` unconditionally: code is always left-to-right regardless of the
 * surrounding page's direction — an RTL page that lets a `<pre>` inherit
 * `dir="rtl"` scrambles the visual order of punctuation and brackets in every
 * snippet it shows.
 */
export function CodeBlock({ code, language, className }: CodeBlockProps) {
  return (
    <div className={cn("relative overflow-hidden rounded-lg bg-neutral-950 text-start", className)}>
      <div className="absolute end-2 top-2">
        <CopyButton value={code} label="Copy" copiedLabel="Copied" className="border-neutral-700 bg-neutral-900 text-neutral-200 hover:bg-neutral-800" />
      </div>
      <pre dir="ltr" className="overflow-x-auto p-4 pe-16 text-sm text-neutral-100">
        {/* data-language, not lang: `lang` names a natural (human) language —
            a BCP 47 tag like "en" — and axe's valid-lang rule correctly
            rejects a programming-language value like "js" there. */}
        <code data-language={language}>{code}</code>
      </pre>
    </div>
  );
}

What CI checks

Quality contract
  • Bundled, minified and gzipped against its tier budget
  • Audited by axe in the state previewed above
  • Rendered through react-dom/server with no browser globals
  • Scanned for network calls, dangerous sinks, and unguarded animation
← All components