Yugen UI

Cộng đồng

Cùng xây Yugen UI

Yugen UI là mã nguồn mở. Báo lỗi, viết block hay dịch một trang đều giúp thư viện tốt hơn cho người dùng sau.

Cách tham gia

Đóng góp code

Sửa lỗi, thêm component hoặc block. Đọc CONTRIBUTING.md và Design.md trước khi mở PR.

Báo lỗi

Mô tả cách tái hiện, theme, thương hiệu, hướng chữ và trình duyệt đang dùng. Ảnh chụp giúp xử lý nhanh hơn.

Đề xuất tính năng

Kể bài toán của bạn trước khi đề xuất giải pháp. Component tốt bắt đầu từ một nhu cầu thật.

Hỏi & đáp

Hỏi về cách dùng, tích hợp Next.js, theme tuỳ biến… ở nơi mọi người cùng tìm được câu trả lời.

Dịch tài liệu

Docs có tiếng Việt và tiếng Anh. Trang component và nhiều trang khái niệm chưa có bản tiếng Anh; mỗi PR một trang là đủ.

Chia sẻ block

Một file trong src/docs/block-library là đủ: đăng nhập, bảng giá, dashboard…

Dự án vận hành thế nào

Việc đang ở đâu, đi qua những bước nào và bắt đầu từ đâu.

Kế hoạch

Mỗi bản phát hành là một milestone trên GitHub. Ưu tiên, độ lớn và thứ tự làm nằm ở GitHub Project.

Mở Project

Nhánh và phát hành

PR vào next; next lên main khi phát hành. yugen-ui dùng Changesets, 2–4 tuần một bản. CLI phát hành riêng bằng tag cli@X.Y.Z.

Quy trình phát hành

Mã nằm ở đâu

Component: src/components/ui. Trang docs: src/docs/concepts, src/docs/registry. Block và template: src/docs/block-library, src/docs/template-library. Nội dung viết theo wiki › Writing.

CONTRIBUTING.md

Nhận việc

Issue có nhãn good first issue hợp để bắt đầu. Bình luận vào issue trước khi làm để tránh hai người làm trùng.

good first issue

Bắt đầu đóng góp

Năm phút để chạy docs site trên máy của bạn.

npm install
npm run dev            # docs tại http://localhost:5173
npm run typecheck      # TypeScript strict
npm run lint:classes   # class Tailwind phải ở dạng canonical
npm run build:lib      # build gói npm vào dist/
  • Component mới: thư mục src/components/ui/<Name> + mục docs trong src/docs/registry.
  • Block mới: một file trong src/docs/block-library.
  • Kiểm tra cả Light / Dark / Tương phản cao và LTR / RTL trước khi mở PR.

Lộ trình

Theo từng bản phát hành, cập nhật 09 thg 11, 2026. Có thể đổi theo góp ý của cộng đồng.

Đang làm

1.0.0 · major

API ổn định. Chưa định ngày: phát hành khi danh sách điều kiện hoàn tất.

  • Dự kiếnRà soát API, gỡ deprecation, quyết định về class spacing viết hoa #65
  • Đã xongSEO: URL theo đường dẫn, prerender từng trang, sitemap #63
  • Dự kiếnForm: kiểm tra dữ liệu và tóm tắt lỗi #162
  • Dự kiếnThư viện block 2.0 (marketing, ứng dụng, thương mại), cài bằng CLI #163
  • Dự kiếnCodemod 0.x → 1.0 (yugen migrate) cho các tên đã đổi #164
  • Dự kiếnKiểu prop riêng của Yugen cho Calendar và Resizable (không lộ kiểu của thư viện khác) #371
  • Dự kiếnPhân lớp CSS: token trong @layer theme, nhóm token tuỳ chọn, styles.css không reset toàn cục #354
  • Dự kiếnPhần ngày tháng thành peer tuỳ chọn (yugen-ui/dates) #356
  • Dự kiếnInput gốc cho Checkbox, Switch và RadioGroup #357

Tiếp theo

Backlog

Chưa xếp lịch.

  • Dự kiếnĐăng ký @yugen vào danh mục registry của shadcn #68
  • Dự kiếnĐang cân nhắc: bộ Figma, gói icon Sakura

Đã phát hành: Có gì mới · Bảng chi tiết: GitHub Project · ROADMAP.md

Dự án dùng Yugen UI

Chưa có dự án nào được giới thiệu

Bạn đang dùng Yugen UI? Gửi ảnh chụp và một dòng mô tả để xuất hiện ở đây.

Giới thiệu dự án

Quy tắc ứng xử

Cộng đồng áp dụng Contributor Covenant 2.1 (CODE_OF_CONDUCT.md).

  • Tôn trọng mọi người, mọi trình độ và mọi ngôn ngữ.
  • Góp ý vào vấn đề, không vào con người.
  • Ưu tiên khả năng tiếp cận: người dùng cuối rất đa dạng.
  • Ghi công rõ ràng khi dùng lại ý tưởng hoặc mã nguồn.

Người đóng góp

trandat1114Tác giả & maintainer

PR được merge, issue báo lỗi hay đề xuất và review đều được ghi tên ở trang Người đóng góp.

Xem người đóng góp

Câu hỏi thường gặp

Không. Yugen UI lấy cảm hứng từ hệ thống token và hành vi của Microsoft Fluent 2, nhưng là dự án độc lập của trandat1114 và không được Microsoft bảo trợ.

Được. Yugen UI dùng giấy phép MIT: dùng, sửa, phân phối lại, kể cả thương mại, miễn giữ thông báo bản quyền.

Gói npm hợp khi muốn cập nhật dễ. Chép mã nguồn (bằng @yugen-ui/cli hoặc shadcn CLI) hợp khi cần tuỳ biến sâu từng component. Hai cách dùng chung token nên có thể kết hợp.

yugen-ui ra bản mới khoảng 2–4 tuần một lần. Ngày dự kiến của từng bản có ở mục Lộ trình và trên GitHub Project.

Không chính thức. Yugen dựa vào cấu hình CSS-first của Tailwind v4 (@theme, @utility). Nếu không dùng Tailwind, hãy import styles.css đã biên dịch sẵn.

Mở thảo luận mô tả tình huống sử dụng, ảnh tham khảo và yêu cầu khả năng tiếp cận. Component mới cần có trang docs, ví dụ chép được và theo Design.md.

Ghi công

  • Microsoft Fluent 2: cấu trúc token, thang đo và hành vi component (nguồn cảm hứng).
  • shadcn/ui: mô hình chép mã nguồn và danh mục component.
  • Radix UI: primitive cho hành vi và khả năng tiếp cận.
  • Fluent System Icons (MIT): bộ icon.
  • Tailwind CSS v4: engine utility.
  • cmdk, react-day-picker, react-resizable-panels: thư viện nền.