CodeBlock

CodeBlock provides a language label, horizontal scrolling, and copy behavior; the header and code body have no separator. Light mode uses GitHub Light and dark mode uses One Dark Pro. The code prop uses lightweight built-in token coloring; full syntax highlighting belongs in the MDX, Markdown, or host build pipeline, so the component does not load Shiki in the browser.

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

export function Example() {
  return <CodeBlock language="tsx" code={'import { Button } from "@downcity/ui";'} />;
}

Build tooling can also pass highlighted children, data-raw, and data-language directly to the component.