Code Block

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.

Which CodeBlock? This one is dependency-free — it highlights with a small built-in tokenizer, so it costs nothing to render a snippet in a marketing page or a docs card. CodeBlock from yunui/content is the Shiki-backed one: VS Code-grade highlighting, line highlighting and an edit action, at the cost of loading a grammar. Use that for real code, this for illustration.

Import

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

Basic

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.

const greeting = "Hello, YunUI";

Tabs

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

1 

Props