Yugen UI

CodeBlock

CodeBlock hiển thị code với tô màu cú pháp gọn nhẹ tự viết (không Prism / Shiki), số dòng, dòng nhấn mạnh, diff, xuống dòng và nút sao chép.

Hỗ trợ tsx, ts, jsx, js, css, html, bash, json, md. Phần đầu có tên tệp + nhãn ngôn ngữ; maxHeight thu gọn khối dài với “Xem thêm / Thu gọn”; appearance auto theo theme hoặc dark. Luôn dir="ltr". Kèm CodeTabs (nhiều tệp) và PackageManagerTabs (npm / pnpm / yarn / bun — nhớ lựa chọn và đồng bộ giữa các khối).
SaveBar.tsxTSX
import { Button } from "@/components/ui";export function SaveBar({ onSave }: { onSave: () => void }) {  // Hành động chính dùng appearance primary  return (    <Button appearance="primary" onClick={onSave}>      Lưu thay đổi    </Button>  );}

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { CodeBlock, CodeTabs, PackageManagerTabs } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Đổi sang nút chínhTSX
<ButtonXoá:   appearance="outline"Thêm:   appearance="primary"Thêm:   icon={<Save20Regular />}>  Lưu</Button>

Diff

Dòng + / - tô xanh / đỏ kèm ký hiệu; Sao chép lấy phiên bản sau thay đổi.

tokens.cssCSS
[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;}

Thu gọn khối dài

maxHeight cắt khối và thêm nút Xem thêm / Thu gọn (aria-expanded).

TSX
import { YugenProvider, Button } from "@/components/ui";export default function App() {  return (    <YugenProvider applyToDocument theme="dark">      <Button appearance="primary">Xin chào</Button>    </YugenProvider>  );}

CodeTabs

Nhiều tệp trong một khối; ngôn ngữ đoán theo đuôi tệp. appearance="dark" luôn nền tối.

npm install @fluentui/react-icons class-variance-authority
npm install -D tailwindcss @tailwindcss/vite

PackageManagerTabs

Chọn trình quản lý ở một khối — mọi khối khác trên trang đổi theo và được nhớ cho lần sau.

Cách dùng

Nên
  • Ghi filename khi đoạn code thuộc một tệp cụ thể — người đọc biết dán vào đâu.
  • Dùng highlightLines để chỉ đúng dòng đang được giải thích.
  • Dùng diff khi hướng dẫn sửa code có sẵn thay vì in lại cả tệp.
Không nên
  • Không dùng CodeBlock cho đoạn code ngắn trong câu — dùng <code> inline.
  • Không đặt maxHeight quá thấp khiến người đọc phải mở mọi khối.
  • Không kỳ vọng tô màu đầy đủ như IDE — tokenizer cố ý gọn nhẹ.

Props

Prop · KiểuMặc địnhMô tả
codestringMặc định: —Nội dung code.
language"tsx" | "ts" | "jsx" | "js" | "css" | "html" | "bash" | "json" | "md" | "text"Mặc định: "tsx"Bộ tô màu cú pháp.
title / filenameReactNode / stringMặc định: —Hiện phần đầu với nhãn ngôn ngữ, nút xuống dòng, nút sao chép.
showLineNumbersbooleanMặc định: falseCột số dòng.
highlightLinesstring | number[]Mặc định: —Dòng nhấn mạnh: "2,4-6".
diffbooleanMặc định: falseDòng bắt đầu bằng + / - được tô màu.
wrap / defaultWrap / onWrapChangebooleanMặc định: falseXuống dòng thay vì cuộn ngang.
maxHeightnumber | stringMặc định: —Thu gọn khi cao hơn; nút Xem thêm / Thu gọn.
appearance"auto" | "dark"Mặc định: "auto"Theo theme hoặc luôn tối (giữ nguyên ở tương phản cao).
size / copyable / bare"small" | "medium" / boolean / booleanMặc định: "medium" / true / falseCỡ chữ; nút sao chép; bỏ khung để lồng vào bề mặt khác.
CodeTabs.files{ name, code, language?, highlightLines? }[]Mặc định: —Danh sách tệp; value / defaultValue / onValueChange chọn tệp.
PackageManagerTabs.packagesstring | string[]Mặc định: —Gói cần cài, hoặc lệnh khi command="dlx".
PackageManagerTabs.dev / command / managersboolean / "install" | "dlx" / PackageManager[]Mặc định: —devDependency; npx / pnpm dlx / yarn dlx / bunx; giới hạn danh sách.

Messages

Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.

Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.

messages.copyCodeButton

Khoá · KiểuMặc định (tiếng Anh)messagesVi
copystring

Chữ trên nút (showLabel).

Mặc định (tiếng Anh)"Copy"messagesVi"Sao chép"
copiedstringMặc định (tiếng Anh)"Copied"messagesVi"Đã chép"
copyLabelstring

Tên nút chỉ có icon.

Mặc định (tiếng Anh)"Copy code"messagesVi"Sao chép code"
copiedLabelstringMặc định (tiếng Anh)"Copied"messagesVi"Đã sao chép"
copiedStatusstring

Đọc qua vùng status sau khi sao chép.

Mặc định (tiếng Anh)"Copied to clipboard"messagesVi"Đã sao chép vào bộ nhớ tạm"

messages.codeBlock

Khoá · KiểuMặc định (tiếng Anh)messagesVi
wrapstring

Tên nút bật / tắt xuống dòng.

Mặc định (tiếng Anh)"Word wrap"messagesVi"Xuống dòng"
wrapOnstring

Tooltip của nút khi đang tắt / đang bật xuống dòng.

Mặc định (tiếng Anh)"Turn on word wrap"messagesVi"Bật xuống dòng"
wrapOffstringMặc định (tiếng Anh)"Turn off word wrap"messagesVi"Tắt xuống dòng"
addedstring

Chữ ẩn trước dòng thêm / xoá trong diff.

Mặc định (tiếng Anh)"Added:"messagesVi"Thêm:"
removedstringMặc định (tiếng Anh)"Removed:"messagesVi"Xoá:"
collapsestringMặc định (tiếng Anh)"Show less"messagesVi"Thu gọn"
expand(lines: number) => string

Nút mở rộng khối code bị thu gọn.

Mặc định (tiếng Anh)(lines) => `Show more (${lines} ${lines === 1 ? "line" : "lines"})`messagesVi(lines) => `Xem thêm (${lines} dòng)`

messages.codeTabs

Khoá · KiểuMặc định (tiếng Anh)messagesVi
filesstring

Tên danh sách tab tệp.

Mặc định (tiếng Anh)"Files"messagesVi"Tệp"

messages.packageManagerTabs

Khoá · KiểuMặc định (tiếng Anh)messagesVi
labelstring

Tên danh sách tab trình quản lý gói.

Mặc định (tiếng Anh)"Package manager"messagesVi"Trình quản lý gói"