Code Block

Code with line numbers, a file name and Copy, and a code chip inside text.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Add the component
$ npx ritla add code-block
Also works with shadcn: npx shadcn@latest add @ritla/code-block
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

code-block.tsx

import { CodeBlock } from "@/components/ui/code-block";<CodeBlock code={source} fileName="greeting.tsx" />

Prop	Type	Default	Description
`code`	`string`	None	The code, as text.
`fileName`	`ReactNode`	None	Figma's File name.
`languageSwitch`	`ReactNode`	None	Figma's Show language switch: a control the app passes.
`showHeader / lineNumbers`	`boolean`	`true`	The header and line numbers.
`highlightLines`	`number[]`	None	Lines to highlight.

Prop	Type	Default	Description
`children`	`string`	None	Figma's Code.
`copy`	`boolean`	`false`	Figma's Copy.

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Moves to the copy button.

The copy button is named and says Copied afterwards; line numbers are hidden from screen readers.

Only the header row: Copy and the language switch on the left, the file name on the right.