Yugen UI

Cài bằng shadcn CLI

Chép mã nguồn component vào dự án bằng shadcn CLI. Hai lệnh: init một lần (tự thêm theme, cn(), YugenProvider, components.json và @import CSS), rồi add component cần dùng.

npm hay chép mã nguồn

Gói npm (npm install yugen-ui) hợp khi bạn muốn nâng cấp bằng một lệnh và ít sửa component. shadcn CLI chép mã nguồn vào dự án để bạn sửa trực tiếp, đổi lại bạn tự cập nhật khi có bản mới. Hai cách dùng chung token nên có thể kết hợp.

Cách ngắn hơn: @yugen-ui/clinpx @yugen-ui/cli@latest init --mode source rồi npx @yugen-ui/cli add button chép cùng mã nguồn từ cùng registry, gõ tên ngắn, không cần components.json hay alias @/. Chi tiết ở trang @yugen-ui/cli. Trang này dành cho dự án đã dùng shadcn CLI.

Khởi tạo — một lần cho mỗi dự án

Dự án React có Tailwind CSS v4. Một lệnh tạo components.json (nếu chưa có), chép theme + cn() + YugenProvider, cài gói npm và tự thêm @import vào file CSS chính.

npx shadcn@latest init https://trandat1114.github.io/Yugen-UI/r/init.json

Theme nằm ở src/styles/yugen.css, import vào src/index.css.

Item init là style extends: "none": CLI không cài style mặc định của shadcn/ui (biến màu, font, icon lucide), nên CSS của bạn chỉ có Tailwind và theme Yugen. Sau đó bọc ứng dụng một lần:

import { YugenProvider } from "@/components/ui/YugenProvider/YugenProvider";
import { Button } from "@/components/ui/Button/Button";

export default function App() {
  return (
<YugenProvider applyToDocument>
  <Toaster />
      <Button appearance="primary">Xin chào</Button>
    </YugenProvider>
  );
}
CLI báo thiếu import alias?Dự án Vite tạo bằng npm create vite chưa có alias @/*. Thêm vào tsconfig và vite.config rồi chạy lại lệnh:
// tsconfig.json (và tsconfig.app.json nếu có)
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] } } }

// vite.config.ts
import path from "node:path";
export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
});

Thêm component

CLI tải item, chép file, kéo theo component phụ thuộc và cài gói npm còn thiếu.

npx shadcn@latest add https://trandat1114.github.io/Yugen-UI/r/button.json https://trandat1114.github.io/Yugen-UI/r/dialog.json

Kết quả sau init + add (thư mục giữ nguyên cấu trúc của Yugen để import tương đối giữa các component vẫn chạy):

components.json                       # tạo mới nếu chưa có
src/
  styles/yugen.css                    # theme — đã tự @import vào src/index.css
  lib/cn.ts                           # cn() đã dạy scale Yugen
  lib/cvx.ts                          # class theo biến thể, đi cùng Button
  components/ui/YugenProvider/…       # provider + Tooltip, Toast mà nó dùng
  components/ui/Button/Button.tsx     # component từ lệnh add (giữ thư mục để import tương đối chạy)
  components/ui/Dialog/Dialog.tsx

Mỗi trang component có tab shadcn CLI trong mục Import với lệnh cho đúng component đó. Cần tất cả? Dùng item all: npx shadcn@latest add https://trandat1114.github.io/Yugen-UI/r/all.json. Danh mục đầy đủ ở registry.json.

Registry có tên @yugen

Gõ ngắn hơn khi thêm nhiều component (tuỳ chọn).

Thêm khối registries vào components.json:

{
  "registries": {
    "@yugen": "https://trandat1114.github.io/Yugen-UI/r/{name}.json"
  }
}
npx shadcn@latest add @yugen/button @yugen/chart @yugen/sheet

Dự án đã dùng shadcn/ui

Không cần chạy lại init — thêm item theme cùng component đầu tiên (Next.js dùng theme-next.json):

npx shadcn@latest add https://trandat1114.github.io/Yugen-UI/r/theme.json https://trandat1114.github.io/Yugen-UI/r/button.json

Cập nhật

Mã đã chép là của bạn — CLI không tự cập nhật. Khi Yugen phát hành bản mới (xem trang Có gì mới), commit thay đổi của bạn trước, chạy lại lệnh add với --overwrite, rồi dùng diff của git để giữ lại phần đã tuỳ biến.

Lưu ý

cn() riêng của Yugen.Component import cn từ @/lib/cn (đã dạy scale Yugen cho tailwind-merge), không dùng @/lib/utils của shadcn.
Chỉ thị "use client".Mỗi file component mở đầu bằng "use client" để dùng được trong Next.js App Router; với Vite, dòng này vô hại.
Trang trước@yugen-ui/cliTrang sauTuỳ biến style