CodeBlock

A styled code block with window-chrome dots, a header showing the language badge or a filename, optional line numbers, lightweight syntax highlighting, and a copy-to-clipboard button. Pass tabs to render multiple switchable code panes instead of a single block.

Import

import { CodeBlock } from "@yuhuanowo/yunui/patterns";

Basic

CodeBlock

tsx

1import { Button } from "@yuhuanowo/yunui";
2 
3export function App() {
4return <Button variant="primary">Click me</Button>;
5}

With a filename

Set filename to show a file label instead of the language badge, and showLineNumbers={false} to hide the gutter.

Filename

app.tsx

const greeting = "Hello, YunUI";

Tabs

Provide a tabs array to switch between related snippets in one block.

Tabs

Props

Prop	Type	Default	Description
className	string	—
code*	string	—	The code to display (ignored when `tabs` are provided).
copyable	boolean	true	Show the copy-to-clipboard button.
filename	string	—	Filename shown in the header instead of the language badge.
language	string	text	Language label, also used by the lightweight highlighter.
showLineNumbers	boolean	true	Show line numbers in the gutter.
tabs	Tab[]	—	Render multiple switchable code tabs instead of a single `code` block.

Import

Basic

With a filename

Tabs

Props

On this page