Skip to content
Aback UI

Data Display

Code Block

A captioned, scrollable code sample with a copy button and optional line numbers.

BetaUsed in Aback ToolsRegistry JSON (opens in a new tab)
components/save-bar.tsxtsx
import { Button } from "@/components/ui/button"; export function SaveBar() {  return (    <div className="flex justify-end gap-2">      <Button variant="outline">Cancel</Button>      <Button>Save changes</Button>    </div>  );}
bash
npx aback-ui@latest add button

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add code-block

Writes components/ui/code-block.tsx and the components it builds on. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Usage

Import the parts you need from the installed file. The Code tab above has a complete, working example.

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

API reference

Props and composition points for Code Block. Native element props pass through.

PropTypeDefaultDescription
codestringNoneThe exact source. It is rendered as text and is what the copy button writes. Required.
language / filenamestringNoneShown in the caption bar. The filename also names the scroll region.
copyable / copyLabelboolean / stringtrue / "Copy code"Show the copy button and set its accessible name.
showLineNumbersbooleanfalseNumbers lines with a CSS counter. Numbers are never selected or copied.
maxHeightnumber | stringNoneCaps the height and scrolls, for long files.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Accessibility

Semantics, keyboard behavior, and the decisions that keep the component operable.

  • The pre element is focusable and named, so keyboard users can scroll long lines.
  • The copy button is a Copy Button: it announces the result and reports a refused write.
  • Code renders as text, never as injected HTML. Pass pre-highlighted markup through your own wrapper if you need colour.
  • Line numbers are generated content and are not read as part of the code.

Keyboard

KeyAction
TabFocus the code region, then the copy button.
Arrow keysScroll the focused code region.

Used in production

The Aback products whose interfaces shaped this component.

Related