Yugen UI

Text

Text hiển thị chữ theo type ramp của Fluent 2, kèm các preset sẵn cho từng vai trò từ Display đến Caption2.

size 100–1000 ánh xạ thẳng vào token fontSizeBase/Hero và line-height tương ứng; chữ từ 20px trở lên tự dùng font Display. Ưu tiên dùng preset (Title3, Body1…) để giữ nhất quán.
Kiểu chữAa BbChữ rõ ràng, nhịp đềuText và các preset ánh xạ thẳng vào type ramp của Fluent 2 — cỡ chữ, line-height và độ đậm luôn đồng bộ.

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 {  Text, Display, LargeTitle, Title1, Title2, Title3, Subtitle1, Subtitle2,  Body1, Body1Strong, Body2, Caption1, Caption1Strong, Caption2,} 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.

Large titleTitle 1Title 2Title 3Subtitle 1Subtitle 2Body 2Body 1 strongBody 1Caption 1 strongCaption 1Caption 2

Preset

Mỗi preset = một bậc type ramp + weight chuẩn.

size 500 · regularsize 500 · mediumsize 500 · semiboldsize 500 · boldsize 200 · regular

Size & weight

size 100–1000; weight regular, medium, semibold, bold.

Chữ nghiêngChữ gạch chânChữ gạch ngangGạch chân và gạch ngangnpm install @fluentui/react-icons1.234.567,89 US$

Định dạng & font

italic, underline, strikethrough; font base, monospace, numeric.

Đoạn chữ rất dài sẽ bị cắt bằng dấu ba chấm khi vượt quá chiều rộngĐoạn chữ dài mặc định xuống dòng tự nhiên trong khung chứa.

Tiêu đề dùng thẻ h3

Căn phải (align="end")

Truncate, căn lề & as

truncate cần wrap={false} và block; as đổi thẻ HTML mà không đổi style.

Cách dùng

Nên
  • Dùng preset theo vai trò (Title3 cho tiêu đề section, Body1 cho nội dung UI).
  • Đặt as đúng ngữ nghĩa (h1–h6, p) để trình đọc màn hình hiểu cấu trúc.
  • Giữ chữ phụ ở foreground-2/3 thay vì đổi cỡ chữ.
Không nên
  • Không đặt cỡ chữ ngoài type ramp (text-[15px]).
  • Không dùng Display / LargeTitle trong control hay bảng.
  • Không dùng bold cho cả đoạn văn — chỉ để nhấn mạnh.

Props

Prop · KiểuMặc địnhMô tả
size100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000Mặc định: 300Bậc type ramp (10 → 68px).
weight"regular" | "medium" | "semibold" | "bold"Mặc định: "regular"Độ đậm.
font"base" | "monospace" | "numeric"Mặc định: "base"Họ phông; numeric = số đều cột.
align"start" | "center" | "end" | "justify"Mặc định: "start"Căn lề.
italic / underline / strikethroughbooleanMặc định: falseĐịnh dạng chữ.
truncate / wrap / blockbooleanMặc định: false / true / falseCắt chữ, xuống dòng, hiển thị block.
as"span" | "p" | "h1"…"h6" | "pre" | "code" | "strong" | "em" | "label"…Mặc định: "span"Thẻ HTML render ra.