Code
CodeBlock shows code with lightweight built-in syntax highlighting (no Prism / Shiki), line numbers, highlighted lines, diffs, wrapping and a copy button.
import { Button } from "@/components/ui";export function SaveBar({ onSave }: { onSave: () => void }) { // The main action uses the primary appearance return ( <Button appearance="primary" onClick={onSave}> Save changes </Button> );}Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
// npm install yugen-uiimport { CodeBlock, CodeTabs, PackageManagerTabs } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
<ButtonRemoved: appearance="outline"Added: appearance="primary"Added: icon={<Save20Regular />}> Save</Button>Diff
+ / - lines are colored green / red and keep their sign; Copy takes the version after the change.
[data-brand="sakura"] { --brand-10: #240c16; --brand-20: #391324; --brand-30: #4c1930; --brand-40: #61213f; --brand-50: #79274d; --brand-60: #912d5c; --brand-70: #a72f69; --brand-80: #c2347a; --brand-90: #e24a92; --brand-100: #fa65a8; --brand-110: #fb7cb2; --brand-120: #fd8ebc;}Collapsing long blocks
maxHeight cuts the block off and adds a Show more / Show less button (aria-expanded).
import { YugenProvider, Button } from "@/components/ui";export default function App() { return ( <YugenProvider applyToDocument theme="dark"> <Button appearance="primary">Hello</Button> </YugenProvider> );}CodeTabs
Several files in one block; the language is guessed from the file extension. appearance="dark" always has a dark background.
npm install @fluentui/react-icons class-variance-authoritynpm install -D tailwindcss @tailwindcss/vitePackageManagerTabs
Pick a package manager in one block: every other block on the page follows, and the choice is remembered for next time.
Usage
- Set filename when the code belongs to a specific file, so readers know where to paste it.
- Use highlightLines to point at the exact lines being explained.
- Use diff when explaining a change to existing code instead of printing the whole file again.
- Don't use CodeBlock for short code inside a sentence. Use inline <code>.
- Don't set maxHeight so low that readers have to expand every block.
- Don't expect IDE-level highlighting. The tokenizer is deliberately small.
Props
| Prop · Type | Default | Description |
|---|---|---|
| codestring | Default: — | Code content. |
| language"tsx" | "ts" | "jsx" | "js" | "css" | "html" | "bash" | "json" | "md" | "text" | Default: "tsx" | Syntax highlighter. |
| title / filenameReactNode / string | Default: — | Shows the header with the language label, a wrap button and a copy button. |
| showLineNumbersboolean | Default: false | Line number column. |
| highlightLinesstring | number[] | Default: — | Highlighted lines: "2,4-6". |
| diffboolean | Default: false | Lines starting with + / - are colored. |
| wrap / defaultWrap / onWrapChangeboolean | Default: false | Wraps lines instead of scrolling horizontally. |
| maxHeightnumber | string | Default: — | Collapses when taller; Show more / Show less button. |
| appearance"auto" | "dark" | Default: "auto" | Follows the theme, or always dark (left unchanged in high contrast). |
| size / copyable / bare"small" | "medium" / boolean / boolean | Default: "medium" / true / false | Text size; copy button; no frame, for nesting in another surface. |
| CodeTabs | Default: — | List of files; value / defaultValue / onValueChange select a file. |
| PackageManagerTabs | Default: — | Packages to install, or the command when command="dlx". |
| PackageManagerTabs | Default: — | devDependency; npx / pnpm dlx / yarn dlx / bunx; limits the list. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.copyCodeButton
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| copystring Chữ trên nút (showLabel). | Default (English)"Copy" | messagesVi"Sao chép" |
| copiedstring | Default (English)"Copied" | messagesVi"Đã chép" |
| copyLabelstring Tên nút chỉ có icon. | Default (English)"Copy code" | messagesVi"Sao chép code" |
| copiedLabelstring | Default (English)"Copied" | messagesVi"Đã sao chép" |
| copiedStatusstring Đọc qua vùng status sau khi sao chép. | Default (English)"Copied to clipboard" | messagesVi"Đã sao chép vào bộ nhớ tạm" |
messages.codeBlock
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| wrapstring Tên nút bật / tắt xuống dòng. | Default (English)"Word wrap" | messagesVi"Xuống dòng" |
| wrapOnstring Tooltip của nút khi đang tắt / đang bật xuống dòng. | Default (English)"Turn on word wrap" | messagesVi"Bật xuống dòng" |
| wrapOffstring | Default (English)"Turn off word wrap" | messagesVi"Tắt xuống dòng" |
| addedstring Chữ ẩn trước dòng thêm / xoá trong diff. | Default (English)"Added:" | messagesVi"Thêm:" |
| removedstring | Default (English)"Removed:" | messagesVi"Xoá:" |
| collapsestring | Default (English)"Show less" | messagesVi"Thu gọn" |
| expand(lines: number) => string Nút mở rộng khối code bị thu gọn. | Default (English)(lines) => `Show more (${lines} ${lines === 1 ? "line" : "lines"})` | messagesVi(lines) => `Xem thêm (${lines} dòng)` |
messages.codeTabs
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| filesstring Tên danh sách tab tệp. | Default (English)"Files" | messagesVi"Tệp" |
messages.packageManagerTabs
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| labelstring Tên danh sách tab trình quản lý gói. | Default (English)"Package manager" | messagesVi"Trình quản lý gói" |