Display

CodeBlock

Code or a command on a muted surface in the theme's monospace font, with a caption and a button that copies it. The code shows exactly as given and scrolls sideways rather than wrapping (unless wrap), and the block becomes a tab stop while it overflows, so a keyboard can scroll it. Copying says "Copied" to screen readers.

bash

npm install --save-dev vitest

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({ plugins: [react()] });

In Spoonjoy

Spoonjoy, a recipe app, is built with Ouro HX (how).

See it live, no sign-in needed: Developers · API playground

In its source: app/routes/developers.playground.tsx · app/routes/developers.tsx · app/routes/mcp.tsx

Install

Once per app, with Tailwind CSS v4 and an @/* path alias (Ouro HX is built on Base UI, so --base base; skip -t in an existing app):

npx shadcn@latest init --base base --preset nova --yes --no-monorepo

npx shadcn@latest add ourostack/ouro-ui/ouro-base#v1.2.13

Then the component. From v0.8.0 it installs only the helpers it imports and never touches your stylesheet (Installing):

npx shadcn@latest add ourostack/ouro-ui/code-block#v1.2.13

Or, with the @ouro namespace set up:

npx shadcn@latest add @ouro/ouro-base @ouro/code-block

Its tests, stories and Playwright spec are optional. They need Vitest 4.1.11 or later, and from v0.8.0 never change a version your app has (Testing):

npx shadcn@latest add ourostack/ouro-ui/code-block#v1.2.13 ourostack/ouro-ui/code-block-tests#v1.2.13

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

Paths use shadcn's default @/ alias; the CLI rewrites them to yours.

Example

<CodeBlock language="bash" code="npx shadcn@latest add button" />
<CodeBlock title="vite.config.ts" code={config} className="max-h-80" />

Usage

It does not color the code; to highlight it, set colors on the data-language block from a highlighter of your own, or pass highlighted code to your own <pre>.

Use instead when

Use Kbd instead for a key or shortcut in a sentence, <code> for a short name in running text, and CopyButton for one value without a block around it.

Props

Type: CodeBlockProps.

className: Type: string; Layout only: margins, width, a maximum height that scrolls (max-h-80). Appearance classes warn in development.
code (required): Type: string; The code, as plain text. It shows exactly as given, whitespace and all, and is what the copy button copies.
copy: Type: boolean; Default: true; The copy button in the bar above the code. Turn it off for code nobody should paste, such as output.
copyLabel: Type: string; Default: "Copy code"; The copy button's name for screen readers.
language: Type: string; The language, shown in the block's caption when there is no title and set as data-language on the block for a highlighter of your own: language="bash".
ref: Type: Ref<HTMLElement>; Reaches the rendered element.
title: Type: ReactNode; A caption above the code, such as its file name: title="vite.config.ts".
wrap: Type: boolean; Wraps long lines instead of scrolling them sideways. Scrolling keeps code as written, so leave it off for code and turn it on for prose-like text such as a long command.

Prop	Type	Default	Description
`className`	`string`		Layout only: margins, width, a maximum height that scrolls (`max-h-80`). Appearance classes warn in development.
`code` (required)	`string`		The code, as plain text. It shows exactly as given, whitespace and all, and is what the copy button copies.
`copy`	`boolean`	`true`	The copy button in the bar above the code. Turn it off for code nobody should paste, such as output.
`copyLabel`	`string`	`"Copy code"`	The copy button's name for screen readers.
`language`	`string`		The language, shown in the block's caption when there is no `title` and set as `data-language` on the block for a highlighter of your own: `language="bash"`.
`ref`	`Ref<HTMLElement>`		Reaches the rendered element.
`title`	`ReactNode`		A caption above the code, such as its file name: `title="vite.config.ts"`.
`wrap`	`boolean`		Wraps long lines instead of scrolling them sideways. Scrolling keeps code as written, so leave it off for code and turn it on for prose-like text such as a long command.

Native attributes

Also accepts the attributes in React's HTMLAttributes (id, aria-*, event handlers), passed to the rendered element, except those named on this page.

Don't use

These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix.

children: Not a prop. The code is code, a string: <CodeBlock code={source} />.
filename: Not a prop. The caption is title: <CodeBlock code={source} title="app.tsx" />.
lang: Not a prop. Ouro UI uses language: <CodeBlock code={source} language="tsx" />.
showCopyButton: Not a prop. The copy button is on by default; copy={false} turns it off.

`className` is for layout only

Pass margins, width and grid placement (mt-4, w-full, col-span-2).

Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (hover:, sm:) and any ! are removed, it starts with bg-, text-, border-, rounded-, shadow-, font-, ring-, from-, via-, to-, fill- or stroke-, or is border, rounded, shadow or ring, or has a dark: variant. Text wrapping, overflow and table layout classes (text-wrap, text-ellipsis, border-collapse) are layout and do not warn.

Alignment classes (text-center) warn too: set alignment on a parent element.

Source on GitHub This page as Markdown