Yugen UI

Cập nhật

Có gì mới

Thay đổi theo từng phiên bản của yugen-ui, @yugen-ui/cli và create-yugen-ui: tính năng mới, cải tiến, sửa lỗi và những gì cần lưu ý khi nâng cấp.

Phiên bản hiện tại: 0.16.0 · Bản đầy đủ nằm trong CHANGELOG.md và trang Releases.

  1. v0.16.0

    Hiệu năng: import nhẹ hơn, CSS gọn hơn và ít render lại hơn

    Mới nhất

    Một bản về hiệu năng. Mỗi thư mục component là một subpath của gói, các phần chỉ một số ứng dụng render được nạp lúc cần, YugenProvider để theme trong context riêng và biểu đồ không còn tính lại khi rê chuột. Trang Hiệu năng gom các thiết lập và số đo vào một chỗ. Dung lượng tính bằng gzip, đo trên bản build Vite 8.

    • MớiImport theo subpath: mỗi thư mục component cũng là một đường dẫn của gói (yugen-ui/Button, yugen-ui/Chart, yugen-ui/hooks…). Bản build production với Vite, Rollup, webpack và Next.js giữ nguyên dung lượng. Trong Node, test và dev server, import { Button } lần đầu nạp 14 module trong khoảng 60 ms thay vì 498 module trong khoảng 1.6 s. Với esbuild có code splitting, hãy import từ subpath.Xem
    • MớiyugenHtmlAttributes() và yugenThemeScript() đặt theme lên <html> trước lần vẽ đầu trong ứng dụng render ở server. Cả hai là hàm thường, chạy được trong Server Component của Next.js, import từ yugen-ui hoặc yugen-ui/YugenProvider/document. YugenProvider applyToDocument giờ ghi attribute trong layout effect, trước khi trình duyệt vẽ.Xem
    • MớiuseYugenTheme() ({ theme, brand, dir }) và useYugenLocale(): component đọc một trong hai không render lại khi cái còn lại đổi.Xem
    • MớiuseElementSize({ enabled }): với false, hook không đo gì và không thêm ResizeObserver.Xem
    • MớiTrang Hiệu năng: đường dẫn import cho từng bundler, phần nạp lúc cần, dung lượng CSS, render lại và biểu đồ, kèm số đo.Xem
    • Cải tiếnYugenProvider cảnh báo một lần ở môi trường dev khi dùng prop withToaster đã deprecated. Template và docs giờ đặt rõ <Toaster /> làm con; withToaster vẫn còn dùng được đến 1.0.0.Xem
    • Cải tiếnwithToaster nạp Toaster sau lần render đầu ở client, toast() gọi trước đó vẫn hiện. Ứng dụng không bật withToaster không còn mang @radix-ui/react-toast: { YugenProvider } từ 24.9 xuống 13.3 kB, một ứng dụng sáu component từ 38.0 xuống 31.1 kB. Cách nên dùng là đặt <Toaster /> làm con của provider gốc.Xem
    • Cải tiếnBreadcrumb chỉ nạp menu của nút “…” khi maxDisplayedItems thu gọn mục (40.2 → 13.5 kB), StreamingMarkdown chỉ nạp thẻ chú thích khi văn bản có chú thích (49.3 → 27.3 kB). Nav không còn import Tooltip; Sidebar của AppShell gắn tooltip cho dạng rail (29.9 → 12.0 kB). Test mở menu hay thẻ ngay sau khi render cần chờ nó (findByRole).Xem
    • Cải tiếnĐổi theme chỉ render lại các component đọc theme: với 1 800 control và children giữ nguyên, mất 1.4 ms thay vì khoảng 66 ms. messages viết inline được so theo giá trị như defaults, nên component cha render lại với cùng chuỗi không còn làm các control render lại.Xem
    • Cải tiếnComponent có variant (Button, Input, Badge, Card và 11 component khác) gộp class một lần cho mỗi tổ hợp props: render 1 000 Button không có className nhanh hơn 44–53% ở server và trong trình duyệt, đổi lại khoảng 0.27 kB. buttonVariants và các hàm variant được export khác trả về chuỗi đã gộp.Xem
    • Cải tiếnRê chuột trên LineChart, AreaChart hay BarChart không còn tính lại cả biểu đồ: một bước hover từ 9.7 xuống 1.1 ms với 500 điểm và từ 39 xuống 1.1 ms với 2 000 điểm. LineChart 4 × 200 có marker giảm 30% markup, Sparkline có width bằng số mount trong một lần render, không cần ResizeObserver. Pixel, bàn phím và nội dung cho trình đọc màn hình không đổi.Xem
    • Cải tiếnKeyframe nằm trong @theme nên Tailwind chỉ xuất những keyframe ứng dụng dùng: ứng dụng chỉ có Button dùng theme-core.css từ 20 keyframe còn 1 (9.17 → 8.86 kB). tokens.css là CSS thuần, theme.css import theme-core.css thay vì chép lại (gói nhẹ đi 64 kB). Ứng dụng định nghĩa lại keyframe của thư viện (fade-in, sweep…) thì khai báo nó trong @theme.Xem
    • Cải tiếnCalendar không còn kèm locale tiếng Việt của date-fns: mỗi component ngày tháng nhẹ đi khoảng 2 kB trong ứng dụng tiếng Anh ({ DatePicker } 58.8 → 56.8 kB). Ứng dụng tiếng Việt vẫn có locale qua messagesVi.Xem
    • Cải tiếnCombobox và TagPicker không còn dùng cmdk: một listbox nhỏ có sẵn lo option đang chọn và bàn phím. { Combobox } từ 42.8 xuống 38.9 kB, { TagPicker } từ 50.6 xuống 41.0 kB, và với 1 000 option mỗi lần nhấn phím mũi tên chỉ render lại hai option đổi trạng thái. TagPicker chỉ nạp Sortable khi có reorderable, tag đang có focus vẫn giữ focus khi Sortable nạp xong. Listbox lấy tên theo nhãn của Field (hoặc aria-label của ô nhập). Option không còn thuộc tính cmdk-*: test tìm [cmdk-item] trong hai component này nên tìm role="option".Xem
    • Cải tiếnTheme Designer: mỗi phần (màu, hình dáng, mật độ và chữ, nền, chuyển động, glass) có bản xem trước riêng và kiểm tra nằm ngay cạnh control của nó; bản xem trước đầy đủ đặt light, dark và high contrast trên cùng một hàng. Ô font nhận tên font bất kỳ.Xem
    • Sửa lỗiKiểu với TypeScript module: "node16" / "nodenext": 72 export (BarChart, StreamingMarkdown, useDisclosure…) báo lỗi "has no exported member". CI giờ kiểm tra kiểu của mọi export từ một dự án nodenext.
    • Sửa lỗireadAppShellCookie chạy được trong React Server Component. Trước đây hàm nằm sau "use client" nên báo lỗi khi layout của Next.js gọi nó; hãy import từ yugen-ui.Xem
    • Sửa lỗiCảnh báo deprecation viết bằng tiếng Anh và trỏ tới trang versioning thay vì URL #/ cũ, cookie của AppShell có secure trên trang https. JS trong gói không còn comment (JSDoc vẫn nằm trong file .d.ts): 1 238 → 1 132 kB chưa nén.Xem

  2. v0.15.0

    Form control mới, NavigationMenu, trang trạng thái và prop mặc định cho cả ứng dụng

    PasswordInput, FormattedInput, chọn tháng, năm và ngày giờ, ColorPicker, NavigationMenu và StatusPage có mặt trong thư viện, và YugenProvider đặt được prop mặc định và mật độ cho cả ứng dụng. Prose có trang Typeset. Tên prop từ đợt rà soát API trước 1.0 đã đổi xong; tên cũ vẫn chạy tới 1.0. Cài yugen-ui không còn kéo theo gói icon 180 MB, và từ bản này cần React 19.

    • MớiPasswordInput: ô mật khẩu có nút hiện / ẩn, nhắc Caps Lock và thước đo độ mạnh tuỳ chọn.Xem
    • MớiFormattedInput định dạng số điện thoại, số thẻ và số tiền ngay khi gõ, giữ vị trí con trỏ và gửi giá trị thô.Xem
    • MớiMonthPicker và YearPicker chọn tháng hoặc năm, cùng vỏ, bàn phím và cách xử lý locale với DatePicker.Xem
    • MớiDateTimePicker đặt lịch và ô giờ trong cùng một popover.Xem
    • MớiColorPicker: vùng màu, thanh sắc độ và độ đục, ô nhập HEX / RGB / HSL, nút lấy màu trên màn hình khi trình duyệt hỗ trợ, và màu có sẵn.Xem
    • MớiNavigationMenu: menu cho header website có bảng thả xuống (mega menu), độ trễ khi rê chuột, bàn phím và link của router.Xem
    • MớiStatusPage và ErrorBoundary: trang cho 404, 500, 503, mất mạng và bản mới, cùng ErrorBoundary hiện chúng thay vì trang trắng. Docs có trang 404 thật, các template Vite bắt lỗi bằng ErrorBoundary.Xem
    • MớiTypeset: chỉnh font, cỡ chữ, line-height, khoảng cách khối và độ rộng dòng của Prose trên nội dung thật, rồi copy CSS. Prose giờ đọc các giá trị này từ biến CSS, và theme có sẵn bốn preset (yugen-prose-docs, -article, -chat, -compact).Xem
    • MớiYugenProvider nhận defaults và density. defaults={{ Button: { shape: "circular" } }} đặt prop cho mọi instance trong vùng giao diện đó, prop đặt trên instance vẫn thắng. density="compact" cho control mặc định size small và thu hẹp spacing; "comfortable" nới rộng spacing.Xem
    • MớiYugen Labs: glassNavigationDefaults đổi mọi component điều hướng có glass (Toolbar, TabsList, Nav, menu, popover, tooltip, dialog, drawer và sheet) sang material="glass" từ một chỗ: <YugenProvider defaults={glassNavigationDefaults}>.Xem
    • MớiYugenProvider scrollLock="keep-scrollbar" giữ thanh cuộn của trang khi Menu, ContextMenu hoặc Dropdown đang mở, nên trang không còn giật theo bề rộng thanh cuộn trên Windows. "hide-scrollbar" vẫn là mặc định tới 1.0. Menu và ContextMenu có thêm tài liệu cho modal={false} khi cần menu không khoá cuộn.Xem
    • MớiTên prop thống nhất, theo đợt rà soát API trước 1.0: Carousel gap="medium" (tên cỡ đầy đủ) và loop, Tree onSelectionChange, DatePicker và DateRangePicker onValueChange, List appearance, RatingDisplay showValue, toast dismissible, CarouselNavContainer previousLabel, Autocomplete noResultsText, và breakpoint dạng token ("3xl") cho Sheet và NotificationCenter như AppShell. TimePicker thêm onValueChange, Carousel thêm activeIndex / defaultActiveIndex, Stepper thêm defaultActiveStep. Tên cũ vẫn chạy tới 1.0, kèm một cảnh báo khi phát triển.Xem
    • MớiThêm vài tên mới từ cùng đợt rà soát: CarouselNavContainer showAutoplayToggle, TimelineItem intent="error", Stat size="extra-large", và orientation cho Divider và TeachingPopoverFooter. highlightRanges, getOverflowGroups và hàm dispatchToast import thẳng từ gói đã lỗi thời, sẽ rời gói ở 1.0; dùng <HighlightMatch>, useIsOverflowGroupVisible và toast() / useToast().dispatchToast. Tên cũ vẫn chạy tới 1.0, kèm một cảnh báo khi phát triển.Xem
    • Cải tiếnYugen Labs: StreamingMarkdown, Citation, MessageScroller, CodeBlock, PageProgress, AsyncContent / ErrorState và useOptimisticList rời Labs và theo SemVer. Phần còn lại vẫn là thử nghiệm, và trang của chúng có ghi rõ.Xem
    • Cải tiếnComponent giờ là hàm thường nhận ref như một prop theo cách của React 19, thay cho forwardRef. Ref vẫn dùng như cũ và React.ComponentRef<typeof Button> vẫn cho đúng kiểu phần tử. Callback ref trả về hàm cleanup giờ được gọi hàm đó, kể cả ở component tự giữ ref riêng (Carousel, Sheet, Toolbar…).Xem
    • Sửa lỗiMarkdown, StreamingMarkdown và CodeBlock vẫn nhanh với input độc hại: lồng quá sâu không còn làm tràn stack, và chuỗi dài [, * hay ${ chưa đóng không còn mất hàng giây để phân tích. Trang Bảo mật mới ghi Yugen UI làm sạch những gì và app còn phải tự làm gì.Xem
    • Thay đổi lớnyugen-ui không còn cài kèm @fluentui/react-icons (khoảng 180 MB). Icon bên trong component đi kèm thư viện dưới dạng SVG nhỏ, hiển thị như cũ. App nào import icon từ @fluentui/react-icons thì thêm gói đó vào dependencies: npm i @fluentui/react-icons. Bộ icon khác như lucide-react cũng vừa các ô icon.Xem
    • Thay đổi lớnCần React 19 trở lên: react / react-dom >=19. React 18.3 được hỗ trợ đến hết 0.14 và không còn nhận bản sửa lỗi từ React. App còn dùng React 18 có thể giữ yugen-ui 0.14 tới khi nâng cấp.Xem

  3. v0.14.0

    AppShell, Sortable, trang Người đóng góp

    AppShell dựng khung ứng dụng: sidebar thu về icon hoặc mở thành Drawer trên màn hẹp, thanh trên cùng, nội dung, cột phụ và chân trang. Các template SaaS, Dashboard, AI chat, Admin, Docs, Store, Blog, Landing và Starter dùng nó. Sortable sắp xếp lại danh sách bằng kéo thả hoặc bàn phím: thứ tự cột của DataGrid, tag của TagPicker và bảng Kanban trong template Admin. Trang Người đóng góp ghi tên những người đã giúp Yugen UI: PR được merge, báo lỗi, đề xuất và review, lấy từ GitHub mỗi lần docs được deploy. Mỗi bản phát hành cũng ghi tên người đóng góp ở trang này và trong CHANGELOG. CSS có thể chỉ gồm các component ứng dụng dùng: ở các template, từ khoảng 25 kB xuống 14–19 kB gzip.

    • Thay đổi lớnChữ có sẵn của component mặc định là tiếng Anh (nút Đóng, "Đang tải…", mô tả biểu đồ, thông báo cho trình đọc màn hình) và locale mặc định là "en-US" (ngày giờ, số, TimePicker 12 giờ). Ứng dụng tiếng Việt thêm messages={messagesVi} locale="vi-VN" vào YugenProvider; source copy bằng CLI dùng các …MessagesVi.Xem
    • MớiAppShell và Sidebar: sidebar thu về icon (tên mục hiện trong Tooltip) hoặc ẩn hẳn, mở thành Drawer khi khung hẹp, kéo đổi độ rộng, Ctrl+B / ⌘B, trạng thái lưu vào cookie (đọc được khi render ở server). layout="header" cho thanh trên cùng trải ngang, scroll="page" cho site nội dung cuộn cả trang, AppShellFooter cho chân trang.Xem
    • MớiSortable: sắp xếp lại danh sách bằng chuột, cảm ứng, bút hoặc bàn phím (Space để nhấc, phím mũi tên để di chuyển, Esc để huỷ); mỗi bước được đọc cho trình đọc màn hình, không kéo được thì bấm tay nắm để nhấc rồi bấm chỗ cần đặt. Danh sách dọc, ngang, lưới; SortableGroup cho Kanban; tự cuộn khi kéo sát mép. Không thêm dependency.Xem
    • MớiHooks dùng chung: useControllableState, useDisclosure, useMediaQuery, useLocalStorage (đồng bộ giữa các tab), useClipboard, useHotkeys (bỏ qua ô nhập, mũi tên theo chiều chữ khi RTL), useDebouncedValue, useIntersection và useElementSize. Chính các component dùng chúng, nên ứng dụng không cần thêm thư viện hook thứ hai.Xem
    • MớiMarkdown: hiển thị nội dung viết bằng Markdown (bài viết, ghi chú phát hành, mô tả từ CMS) theo kiểu chữ của Prose. Không nhận HTML, link javascript: chỉ còn nhãn; link tương đối được giữ, renderLink giao link cho router của app. inline cho đoạn một dòng như mục danh sách hay ô bảng.Xem
    • MớiCSS theo component dùng: yugen-ui/theme-core.css là theme không quét mọi component, thêm một dòng @import "yugen-ui/sources/<Component>.css" cho mỗi component ứng dụng dùng (mỗi file đã gồm các component nó dùng bên trong). yugen-ui/sources/index.json cho biết export nào nằm ở file nào. theme.css vẫn là mặc định không cần cấu hình.Xem
    • MớiTrang Người đóng góp: mỗi người là một bông hoa trên cành anh đào, nở theo thứ tự lần đầu đóng góp. Hai mục riêng: code và tài liệu (PR đã merge), ý tưởng và thảo luận (đề xuất, báo lỗi, review, góp ý trong issue); mỗi người có số đóng góp theo loại và các đóng góp gần đây.Xem
    • Cải tiếnDocs mở bằng tiếng Anh: /components/button là bản tiếng Anh, bản tiếng Việt ở /vi/components/button. Lựa chọn ngôn ngữ vẫn được nhớ, link /en/… cũ tự chuyển sang địa chỉ mới, trình duyệt đặt tiếng Việt thấy một gợi ý chuyển sang bản tiếng Việt.Xem
    • Cải tiếnDemo của component, code mẫu để copy và các block viết bằng tiếng Anh, dữ liệu mẫu tính bằng đô la Mỹ và định dạng en-US. Template cũng mở bằng tiếng Anh (tiếng Việt với create --lang vi). Demo về nhập liệu tiếng Việt vẫn giữ chữ tiếng Việt.Xem
    • Cải tiếnTemplate SaaS, Dashboard, AI chat, Admin, Docs, Store, Blog, Landing và Starter dựng trên AppShell: bớt mã lặp, sidebar thu gọn được, Ctrl+B và skip link.Xem
    • Cải tiếnNavItem có thêm tooltip: nhãn hiện khi sidebar thu về icon.Xem
    • Cải tiếnDataGrid có columnOrder; trong DataGridColumnPicker, kéo một cột (hoặc Alt + ↑ ↓) để đổi thứ tự cột. TagPicker có reorderable để kéo đổi thứ tự tag.Xem
    • Cải tiếnMỗi bản phát hành ghi tên người đóng góp ở trang Có gì mới và trong CHANGELOG.
    • Cải tiếnDocs trên điện thoại: bảng props và bảng Messages không còn phải cuộn ngang (mỗi prop, mỗi khoá một khối, giá trị tiếng Việt và tiếng Anh có nhãn), chữ trong dấu backtick hiện thành code, và mở code của một ví dụ thì ô ví dụ trải hết hàng. Mọi trang component vừa khung 375px.
    • Cải tiếnTrang Có gì mới có bản tiếng Anh cho mọi bản phát hành của cả ba gói. Tin giờ viết bằng Markdown, mỗi bản phát hành một file cho từng ngôn ngữ.
    • Sửa lỗiCodeTabs và PackageManagerTabs: className áp cho khung ngoài cùng, nên w-full trong một hàng flex vừa khung hẹp, các tab xuống dòng thay vì tràn ngang.Xem
    • Sửa lỗiNút sao chép (CodeBlock, PackageManagerTabs…) báo lỗi khi trình duyệt từ chối ghi clipboard, thay vì vẫn hiện "Đã sao chép".
    • Sửa lỗiMàn chờ khởi động (Yugen Labs): số Hán ở khung Enso và Bloom không còn bị cắt chân chữ khi xem toàn màn hình.Xem

    Cảm ơnDave Kurian#266#259#161Nguyễn Gia Bảo#257#251#246Imgbot#311

  4. v0.13.0

    Khúc xạ cho glass, mùa hoa anh đào trong template Glass

    Mép của bề mặt glass bẻ cong ảnh phía sau như vành thấu kính (GlassRefraction, trình duyệt Chromium). Template Glass có thêm Kyoto, Tokyo, Hirosaki và núi Phú Sĩ mùa hoa nở. Thêm Sonner (thông báo xếp chồng) và bốn component hiển thị: Timeline, DescriptionList, Stat, Prose. Trang Templates có chế độ toàn màn hình; Checkbox, Switch và Dropdown trong Field không còn kéo dài trang khi nằm trong form ở một vùng cuộn. Yugen Labs có thêm màn chờ khởi động (nét cọ thư pháp, số Hán hoặc Latin) và trang trạng thái HTTP (404, 500, bảo trì, mất mạng…).

    • MớiSonner: thông báo xếp chồng ở góc màn hình, trỏ chuột hoặc focus vào thì xoè ra. Gọi sonner("…") hoặc sonner.success / info / warning / error / loading ở bất kỳ đâu; sonner.promise đổi tại chỗ từ loading sang success hoặc error; gọi lại với cùng id để cập nhật. Có nút hành động và nút huỷ, richColors, vuốt để đóng, F8 để tới vùng thông báo. Dựng trên Radix Toast, không thêm dependency.Xem
    • MớiTimeline (lịch sử, nhật ký hoạt động; detailed và compact), DescriptionList (cặp nhãn / giá trị, tự bớt cột khi hẹp, nút sao chép), Stat (con số chính, delta, ô biểu đồ nhỏ — StatTile giờ dựng trên Stat) và Prose (kiểu chữ cho Markdown / HTML từ CMS, thoát bằng not-prose).Xem
    • MớiGlassRefraction (Yugen Labs): đặt một lần ở gốc app, mép của mọi bề mặt glass bẻ cong phần nền phía sau như vành thấu kính, phần giữa vẫn mờ nên chữ giữ tương phản. Chỉ trình duyệt Chromium vẽ được; Safari và Firefox giữ glass như cũ. Tắt cùng blur khi giảm trong suốt, tăng tương phản, forced colors và theme tương phản cao.Xem
    • MớiSlider và Switch có material="glass" (Yugen Labs): khi đang nhấn hoặc kéo, thumb thành glass, to ra trên Slider để thấy thanh trượt qua nó, dài ra trên Switch.Xem
    • MớiMàn chờ khởi động (Yugen Labs): nét cọ ở giữa chạy theo tiến độ tải thật, số Hán 〇–百 viết dọc ở mép, logo enso vẽ bằng mực ở góc và nở hoa khi xong. Hiện ở npm run dev, 404.html và trang prerender đang bị ẩn vì khác ngôn ngữ hoặc RTL. Trang Labs có phòng thử các concept màn chờ theo hai kiểu số Kanji và Latin, xem được toàn màn hình.Xem
    • MớiTrang trạng thái HTTP (Yugen Labs): 400, 401, 403, 404, 410, 429, 500, 503, 504, mất mạng và bản mới trong cùng bố cục với màn chờ, logo đổi theo trạng thái, đếm ngược theo Retry-After; kèm danh mục nội dung và cách tự khôi phục.Xem
    • Cải tiếnTemplate Blog và Docs định dạng bài viết bằng Prose thay cho class riêng trên từng thẻ.Xem
    • Cải tiếnMenuPopover và PopoverSurface glass mọc ra từ nút mở và thu về đó khi đóng; khi giảm chuyển động vẫn chỉ mờ dần như cũ.Xem
    • Cải tiếnTheme Designer: trục Glass (trong, mặc định, mờ đục) và sắc glass theo brand, xem trước trên ảnh, kiểm tra chữ trên glass vẫn ≥ 4.5:1 khi phía sau đen hoặc trắng; CSS xuất kèm các biến glass.Xem
    • Cải tiếnTemplate Glass: bốn chuyến đi mùa hoa anh đào ở Kyoto, Tokyo, Hirosaki và quanh núi Phú Sĩ (ảnh Wikimedia Commons, ghi nguồn và giấy phép); trang Cài đặt có khung xem trước thanh và nút điều khiển trên ảnh sáng, ảnh hoa và ảnh đêm; trang Khám phá là bản đồ thế giới (Natural Earth), mỗi chuyến đi ghim đúng toạ độ, ghim gần nhau gộp lại và phóng tới khi chọn.Xem
    • Cải tiếnTrang Templates: nút toàn màn hình trên mỗi preview, chọn khổ máy tính, máy tính bảng hoặc điện thoại; link ?preview=<template> mở thẳng chế độ này. Các template khác chọn bằng tab và xem trong một khung lớn bằng template nổi bật; link #<template> chọn sẵn template.Xem
    • Cải tiếnBáo trước: React 18.3 vẫn được hỗ trợ đến hết 0.x; từ 1.0, Yugen UI chỉ hỗ trợ React 19. Nếu app còn dùng React 18, hãy lên React 19 trước khi cập nhật lên 1.0.Xem
    • Sửa lỗiCheckbox, Switch và Dropdown trong Field: khi nằm trong <form> ở một vùng cuộn, input ẩn dùng để gửi form không còn kéo dài trang và để lại khoảng trống phía dưới.Xem

  5. v0.12.0

    Glass, sáu template mới và chọn cột trong DataGrid

    Vật liệu glass (Yugen Labs) cho thanh công cụ, thanh tab, sidebar và menu nổi trên nội dung. Sáu template mới: Glass, Landing, Admin, Docs, Store và Next.js starter; SaaS dùng đường dẫn thật và mọi template một trang có sẵn cấu hình deploy. Người dùng tự ẩn và hiện cột của DataGrid. Menu dài không còn tràn khỏi màn hình; trên màn hình cảm ứng, các nút vốn chỉ hiện khi rê chuột giờ hiện sẵn.

    • MớiGlass (Yugen Labs, lấy cảm hứng từ Liquid Glass): material="glass" | "glass-clear" trên Toolbar, TabsList, Nav, MenuPopover, PopoverSurface, TooltipContent, DialogSurface, DrawerSurface, SheetContent; Button appearance="glass" | "glass-prominent"; Input / SearchBox appearance="glass". TabsList có minimized và hook useScrollMinimize cho thanh tab thu gọn khi cuộn. Utility glass, glass-clear, glass-tinted, glass-scrim, scroll-edge, rounded-concentric. Chữ giữ ≥ 4.5:1 trên mọi nền phía sau; nền đặc khi giảm trong suốt, tăng tương phản, tương phản cao hoặc forced colors. Tên có thể đổi trước 1.0.Xem
    • MớiDataGrid nhận hiddenColumns; DataGridColumnPicker là nút “Cột” mở menu ô tích, dùng được cả với Table. Menu không đóng khi tích từng cột, cột hideable: false và cột hiện cuối cùng không ẩn được, cột đang sắp xếp vẫn sắp xếp hàng khi bị ẩn. Cột ẩn giữ độ rộng đã kéo; lưu lựa chọn bằng onHiddenColumnsChange.Xem
    • MớiTemplate Glass: nhật ký du lịch với ảnh tràn viền, sidebar và thanh tab glass (thu gọn khi cuộn), trang Khám phá với ghim và bộ lọc nổi bằng glass clear, bottom sheet glass, cài đặt glass / đặc. Ảnh mẫu Unsplash dạng AVIF.Xem
    • MớiTemplate Landing: trang giới thiệu sản phẩm với bảng giá theo tháng / năm, hỏi đáp, nhận xét và form đăng ký có kiểm tra. Màn hình đầu, title, Open Graph và JSON-LD của sản phẩm được ghi sẵn vào index.html lúc build; Lighthouse trên di động từ 95 điểm ở cả bốn mục, kiểm tra trong CI.Xem
    • MớiTemplate Next.js starter (App Router): YugenProvider trong một Client Component, theme và brand lưu trong cookie để server render đúng theme (không nháy), trang chủ là Server Component dùng component Yugen, metadata theo trang, next/font. Trang SSR có liên kết tới template.Xem
    • MớiTemplate Admin: khách hàng và đơn hàng trên API giả lập. DataGrid phân trang, sắp xếp và lọc trên server, chọn cột hiển thị, chọn nhiều hàng để xuất CSV hoặc xoá; thêm và sửa trong Drawer có kiểm tra bằng react-hook-form + zod; cập nhật lạc quan, lỗi thì hoàn tác kèm toast. Có trang đăng nhập, quên mật khẩu, nhập mã OTP và trang cần đăng nhập mới xem được.Xem
    • MớiTemplate Docs: trang tài liệu từ file Markdown, mỗi thư mục là một phần của sidebar. Mục lục đánh dấu đề mục đang đọc, tìm kiếm Ctrl K trên tiêu đề và đề mục, code gộp tab theo ngôn ngữ, tab npm / pnpm / yarn / bun cho lệnh cài. Mỗi trang có file HTML riêng với title, description và Open Graph, kèm sitemap.xml và 404.html.Xem
    • MớiTemplate Store: cửa hàng nhỏ bán trà, đồ gốm và văn phòng phẩm. Lưới sản phẩm lọc theo danh mục, khoảng giá và sắp xếp, bộ lọc lưu trong URL; trang sản phẩm có Carousel, chọn màu, cỡ và số lượng; giỏ hàng trong Sheet lưu trong localStorage; thanh toán bằng Wizard bốn bước có kiểm tra và trang xác nhận đơn. Giá định dạng theo ngôn ngữ (USD hoặc VND), thanh toán chỉ là giả lập.Xem
    • Cải tiếnTemplate SaaS dùng đường dẫn thật (/analytics) thay cho #/analytics, link cũ vẫn mở đúng trang. SaaS, Dashboard, AI chat và Glass có sẵn cấu hình deploy: _redirects cho Netlify, vercel.json, npm run build:gh-pages cho GitHub Pages; Cloudflare Pages không cần gì thêm.Xem
    • Cải tiếnDataGrid: cột chỉ cần label, renderHeaderCell thành tuỳ chọn. Logic ẩn / hiện cột dùng riêng được qua useDataGridColumnVisibility và getVisibleColumns.Xem
    • Cải tiếnDataGrid và Table dùng chữ số đều chiều rộng, nên số trong một cột thẳng hàng mà không cần thêm class.Xem
    • Cải tiếnMenuItemCheckbox và MenuItemRadio nhận secondaryContent như MenuItem.Xem
    • Cải tiếnTrang Phiên bản có quy tắc cho từng số: phần lớn thay đổi ra ở bản patch, minor chỉ tăng khi có API mới và cách nhau ít nhất 14 ngày, major cách nhau ít nhất 180 ngày. Áp dụng từ sau 0.12.0.Xem
    • Sửa lỗiDataGrid: khi bộ cột thay đổi, focus bàn phím ở lại đúng cột thay vì nhảy sang cột khác cùng vị trí; ô đang focus bị gỡ thì focus sang cột gần nhất.Xem
    • Sửa lỗiMenu, ContextMenu, Menubar và menu con: menu dài cuộn bên trong màn hình thay vì tràn ra ngoài, nên mục cuối luôn chọn được.Xem
    • Sửa lỗiMàn hình cảm ứng: nút thao tác của hàng, checkbox chọn kiểu subtle (Table, DataGrid) và thao tác của Tree luôn hiện, vì không có hover để làm chúng hiện ra.Xem

  6. v0.11.1

    Hiệu ứng wave của Skeleton chạy mượt trở lại

    Dải sáng của Skeleton chạy hết bề ngang và lặp liền mạch, ở mọi hình dạng và kiểu translucent.

    • Sửa lỗiSkeleton: từ 0.11.0, dải sáng của hiệu ứng wave chỉ hiện ở 1/4 cuối mỗi chu kỳ, dừng giữa khung rồi bật về đầu. Giờ dải sáng chạy hết bề ngang và lặp liền mạch, ở mọi hình dạng (rectangle, circle, square) và kiểu translucent.Xem

  7. v0.11.0

    Chuỗi giao diện thay được, docs tiếng Anh và template mới

    Mọi chữ có sẵn trong component đổi được qua YugenProvider (có sẵn bản tiếng Anh). Docs đủ tiếng Anh với URL thật và HTML render sẵn. Dashboard và AI chat thành ứng dụng đầy đủ, mọi template có hai ngôn ngữ.

    • MớiYugenProvider nhận messages và locale: đổi nhãn nút, aria-label, thông báo cho trình đọc màn hình của mọi component theo namespace; messagesEn chuyển toàn bộ sang tiếng Anh. Prop nhãn riêng của component vẫn ưu tiên; tiếng Việt vẫn là mặc định.Xem
    • MớiTrang component có mục Messages: liệt kê từng khoá, mặc định tiếng Việt và bản tiếng Anh.Xem
    • MớiDocs tiếng Anh cho mọi trang ở /en/: khái niệm, 113 component, Foundations, Blocks, Theme Designer. URL theo đường dẫn, HTML render sẵn từng trang, sitemap có hreflang, ảnh Open Graph riêng; trang SEO mới.Xem
    • MớiTemplate Dashboard (4 trang, một khoảng ngày cho mọi biểu đồ, DataGrid xuất CSV) và AI chat (danh sách hội thoại, trả lời dạng stream dừng được, nối backend riêng) thành ứng dụng đầy đủ; SaaS, Blog và các template mới có tiếng Anh và tiếng Việt (create --lang).Xem
    • Cải tiếnSkeleton (wave) và ProgressBar không xác định chạy bằng transform, không vẽ lại mỗi khung hình; thêm utility animate-sweep và animate-indeterminate-slide.Xem
    • Cải tiếnNhanh hơn khi dữ liệu lớn hoặc cập nhật liên tục: Chart, DataGrid, Tree, List, Combobox, TagPicker, Autocomplete, MessageScroller, StreamingMarkdown, Carousel, PageProgress.Xem
    • Cải tiếnTemplate nạp từng trang khi cần: lần tải đầu của SaaS giảm khoảng một phần tư. CI build và kiểm tra từng template với chính bản yugen-ui của PR (dung lượng, lỗi console, axe).Xem
    • Cải tiếnDocs nhẹ hơn: JS lần tải đầu giảm hơn một nửa, trang chủ ít phần tử hơn; hoa anh đào ở trang chủ không còn bị cắt khung.
    • Sửa lỗiCalendar: ô ngày ở tiếng Anh đọc ngày bằng số thường ("October 1, 2026" thay vì "October 1st"), khớp số hiện trên ô, nên điều khiển bằng giọng nói chọn được ngày (WCAG 2.5.3).Xem

  8. v0.10.0

    Spacing theo thang số, Theme Designer và trang Motion

    Spacing dùng thang số của Tailwind (alias viết hoa đã deprecated), cn() dùng tailwind-merge 3. Docs có Theme Designer nhiều trục, trang Motion mới và sidebar co giãn.

    • MớiTheme Designer: ngoài màu brand còn chọn được bo góc, mật độ, font và cỡ chữ gốc, màu trung tính, độ nổi và chuyển động — mỗi trục vài bậc đã kiểm tra tương phản và vùng bấm. Xem trước ở light, dark, high contrast và RTL; CSS xuất gồm mọi lựa chọn; link chia sẻ giữ nguyên thiết lập.Xem
    • MớiTrang Motion viết lại, có bản tiếng Anh: token và animate-*, chuyển động của từng component kèm demo thật, playground so sánh hai thiết lập, xem trước giảm chuyển động, phối hợp và hiệu năng.Xem
    • MớiDocs: kéo mép sidebar để đổi độ rộng (240–400px, phím mũi tên, nhấp đúp về mặc định) hoặc thu về dạng icon; trạng thái được nhớ sau khi tải lại.
    • Cải tiếnComponent, ví dụ, template và registry dùng spacing theo thang số (p-3, gap-2) thay cho alias viết hoa (p-M, gap-S). Giá trị không đổi ở cỡ chữ gốc 16px; thang số tính bằng rem nên co giãn theo cỡ chữ của trình duyệt.Xem
    • Cải tiếnAlias spacing viết hoa (p-M, gap-SNudge…) trong theme.css và cn() đã deprecated, vẫn chạy đến 1.0. Đổi theo bảng XXS → 0.5, XS → 1, SNudge → 1.5, S → 2, MNudge → 2.5, M → 3, L → 4, XL → 5, XXL → 6, XXXL → 8.Xem
    • Cải tiếnVí dụ Form với react-hook-form + zod viết theo zod 4 (z.email(), tham số error) và @hookform/resolvers 6; ví dụ cần zod 4 trở lên.Xem

  9. v0.9.0

    React 19 và starter tối giản

    React 19 là mặc định, React 18.3 vẫn được hỗ trợ. Starter tiếng Anh gọn hơn, thêm 5 block, docs và lộ trình cập nhật.

    • Mới5 block mới: Đăng ký bản tin, Chọn số lượng, Hộp thoại chào mừng, Tiến độ dự án, Đang trực tuyến.Xem
    • Cải tiếnReact 19 là mặc định cho docs, test và template; React 18.3 vẫn được hỗ trợ và kiểm thử trong CI. Ngày ngừng hỗ trợ React 18 sẽ báo trước ít nhất một bản minor.Xem
    • Cải tiếnTemplate có tên ngắn (Starter, SaaS, Blog, Dashboard, AI chat) và mô tả một dòng; starter tối giản bằng tiếng Anh với thương hiệu Sakura và Web.Xem
    • Cải tiếnCó gì mới có tab riêng cho yugen-ui, @yugen-ui/cli và create-yugen-ui; tin của bản sắp phát hành mang nhãn Sắp phát hành.Xem
    • Cải tiếnTrang Giới thiệu viết lại; trang Cộng đồng có lộ trình theo từng bản phát hành và cách dự án vận hành, đủ tiếng Anh.Xem
    • Cải tiếnDocs gọi CLI đúng tên @yugen-ui/cli và bớt nội dung lặp; footer có GitHub, npm, Thảo luận, Báo lỗi; mục lục không còn sát thông báo trang chưa dịch.Xem
    • Sửa lỗiAvatarGroup: tên đọc của nút “+N” bắt đầu bằng đúng số đang hiển thị (WCAG 2.5.3); overflowLabel được đọc sau số đếm.Xem

  10. v0.8.3

    Lệnh tạo dự án chạy được trên PowerShell

    Lệnh copy từ docs chạy được trên Windows PowerShell. Gói npm không đổi.

    • Sửa lỗiLệnh tạo dự án dùng npx create-yugen-ui@latest my-app --template <tên>: PowerShell bỏ mất dấu -- trong npm create … -- --template nên npm báo “Unknown cli config --template”.Xem
    • Sửa lỗicd my-app và npm run dev nằm trên dòng riêng thay vì nối bằng && (Windows PowerShell 5.1 không chấp nhận).Xem

  11. v0.8.2

    CLI @yugen-ui/cli

    Tạo app, thiết lập dự án và chép mã nguồn component bằng một công cụ dòng lệnh. Sửa một lỗi nhỏ của AriaLive.

    • MớiCLI @yugen-ui/cli: npm create yugen-ui@latest tạo app từ template; npx @yugen-ui/cli@latest init thiết lập dự án có sẵn (gói npm hoặc mã nguồn); add chép component kèm phụ thuộc; doctor kiểm tra cấu hình.Xem
    • Cải tiếnTrang chủ có mục Tạo dự án nhanh và tab CLI trong khung cài đặt; mục Import của mỗi component có tab yugen CLI.Xem
    • Cải tiếnBắt đầu nhanh, Templates và README của template dùng CLI trước; cách cài thủ công và shadcn CLI vẫn giữ.Xem
    • Sửa lỗiAriaLive: announcer dự phòng (khi không có AriaLiveAnnouncer) không còn báo lỗi “window is not defined” khi hàng đợi chạy sau lúc window đã mất, vd. sau khi môi trường test bị gỡ.Xem

  12. v0.8.1

    Docs gọn hơn trên điện thoại

    Thanh trên, khung ví dụ và trang chủ được làm lại cho màn hình nhỏ. Logo mới. Gói npm không đổi.

    • Cải tiếnThanh trên: một nút Giao diện cho chế độ sáng / tối / tương phản cao, màu và hướng chữ; nút đổi ngôn ngữ hiện ở mọi cỡ màn hình.Xem
    • Cải tiếnKhung ví dụ: thanh công cụ một hàng, màn hình nhỏ chỉ còn icon; nút Code chuyển lên thanh trên.Xem
    • Cải tiếnTrang chủ: hero 幽玄 mới, lệnh cài npm / shadcn có nút copy, danh sách component có ô tìm và chip nhóm; trên điện thoại chạm tên để mở từng demo.Xem
    • Cải tiếnLogo mới: vòng enso nét mực và hoa anh đào; favicon đổi màu theo chế độ sáng / tối của trình duyệt.

  13. v0.8.0

    Templates, shadcn init một lệnh & SEO

    Trang Templates với ba template mới — starter, SaaS và blog Markdown — tạo dự án bằng một lệnh; shadcn CLI cài theme, cn() và YugenProvider trong một bước; Bắt đầu nhanh gọn còn một lệnh và docs bắt đầu hỗ trợ SEO.

    • Thay đổi lớnRegistry shadcn: component không còn tự cài theme — chạy init một lần cho mỗi dự án, hoặc add kèm …/r/theme.json. Gói npm không đổi.Xem
    • MớiTrang Templates: preview chạy thật, tạo dự án bằng một lệnh (npx giget … --install) hoặc mở trên StackBlitz.Xem
    • Mớivite-starter — khởi đầu trắng: theme được ghi nhớ, không nháy khi tải, alias @/, SEO cơ bản và trang chào hoa anh đào 幽玄.Xem
    • Mớivite-saas — ứng dụng 8 trang có sidebar, bảng lệnh Ctrl K, thông báo; vite-blog — blog Markdown sinh HTML từng bài, sitemap.xml, rss.xml.Xem
    • Mớishadcn CLI: npx shadcn@latest init …/r/init.json (Next.js: init-next.json) tạo components.json, chép theme + cn() + YugenProvider và tự thêm @import vào CSS.Xem
    • Cải tiếnBắt đầu nhanh: một lệnh từ template, hoặc ba bước cho dự án có sẵn (cài gói, một dòng CSS, YugenProvider).Xem
    • Cải tiếnDocs: tiêu đề và mô tả theo từng trang, Open Graph kèm ảnh chia sẻ link, JSON-LD; lộ trình SEO mới trên trang Cộng đồng.Xem
    • Cải tiếnNút Open in StackBlitz hiện trên mọi ví dụ component.Xem

  14. v0.7.0

    Quote, Autocomplete & SearchBox dễ nhìn hơn

    Thêm Quote cho trích dẫn có nguồn và Autocomplete — ô tìm kiếm có gợi ý, lọc không dấu; ví dụ lọc danh sách của SearchBox được thiết kế lại.

    • MớiQuote — trích dẫn có tác giả và nguồn, 3 kiểu default / subtle / emphasis.Xem
    • MớiAutocomplete — ô tìm kiếm có gợi ý: lọc không dấu (gõ “xoai” ra “Xoài”), tô sáng phần khớp, nhóm gợi ý, tải từ server.Xem
    • Cải tiếnSearchBox — ví dụ “Lọc danh sách” giờ hiển thị kết quả trong khung danh sách có số đếm, avatar và trạng thái rỗng.Xem

  15. v0.6.0

    DataGrid, bộ AI, registry shadcn & kiểm thử tự động

    Thêm DataGrid, bộ component AI (StreamingMarkdown, Citation, Reasoning, PromptInput), Tour, NotificationCenter, FileUpload, Stepper, TimePicker, Overflow và biểu đồ Scatter / Heatmap; cài từng component bằng shadcn CLI; docs nạp nhanh hơn, có tiếng Anh và hơn 800 bài test tự động.

    • MớiDataGrid — sắp xếp, chọn dòng, đổi cỡ cột, ảo hoá 10 000 dòng.Xem
    • MớiBộ AI: StreamingMarkdown an toàn, Citation, Reasoning, PromptInput có đính kèm.Xem
    • MớiTour hướng dẫn có spotlight và NotificationCenter (popover / bottom sheet).Xem
    • MớiFileUpload, Stepper / Wizard và mẫu form react-hook-form + zod.Xem
    • MớiTimePicker, preset cho DateRangePicker và Overflow tự ẩn bớt item.Xem
    • MớiScatterChart, Heatmap, AreaChart 100% và zoom / brush.Xem
    • MớiCài component dạng mã nguồn bằng shadcn CLI: npx shadcn add …/r/<tên>.json.Xem
    • MớiTheme Designer xuất JSON (W3C Design Tokens, Tokens Studio).Xem
    • Cải tiếnDocs nạp lười từng trang (JS lần đầu 970 kB → 108 kB), có bản tiếng Anh và menu chọn phiên bản.Xem
    • Cải tiếnNút StackBlitz cho mọi ví dụ và chính sách phiên bản / deprecate.Xem
    • Sửa lỗiSửa a11y (axe trên 128 trang × sáng / tối), Resizable kéo ngược trong RTL, lệch hydration khi SSR, tương thích React 19.

  16. v0.5.0

    Yugen Labs, gói npm & cộng đồng

    Nhóm component vượt ra ngoài Fluent 2 — Trace, Questionnaire, Message Scroller, Code Block, Chart, Sheet thích ứng — cùng tầng Wait UX, bản build npm và trang cộng đồng.

    • MớiTrace — minh bạch từng bước của agent AI, CI hay quá trình triển khai.Xem
    • MớiQuestionnaire — khảo sát nhiều bước kiểu một-câu-một-màn-hình.Xem
    • MớiMessage Scroller, Message Bubble, Typing Indicator và Chat Composer cho giao diện hội thoại.Xem
    • MớiCode Block có highlight, số dòng, diff, tab nhiều file và tab trình quản lý gói.Xem
    • MớiChart (Bar, Line, Area, Donut, Sparkline, StatTile) theo quy trình trực quan hoá có kiểm định màu.Xem
    • MớiSheet — side panel trên desktop, bottom sheet kéo được trên mobile.Xem
    • MớiWait UX: Button loading, useSpinDelay, PageProgress, AsyncContent, ErrorState và Skeleton dựng sẵn.Xem
    • MớiGói npm yugen-ui với theme.css (Tailwind v4), styles.css (không cần Tailwind) và type declarations.Xem
    • MớiTrang Cộng đồng và trang Có gì mới.Xem
    • Cải tiếnCarousel có loop, autoplay kèm tiến độ, peek và thumbnail; Accordion thêm kiểu separated / outline.Xem
    • Cải tiếnResizable có panel thu gọn được và lưu bố cục.Xem
    • Sửa lỗiToàn bộ class Tailwind ở dạng canonical (script lint:classes) — không còn cảnh báo suggestCanonicalClasses.

  17. v0.4.0

    Khái niệm, RTL & tương phản cao

    Tài liệu chuyên sâu kiểu Storybook, hỗ trợ hướng chữ phải-sang-trái và theme tương phản cao.

    • Mới16 trang Khái niệm: bắt đầu nhanh, styling, theming, slot, định vị, RTL, SSR, khả năng tiếp cận, chuyển đổi.Xem
    • MớiThanh công cụ Theme (Yugen / Web / Teams × Light / Dark, Tương phản cao) và công tắc LTR / RTL.
    • MớiYugenProvider — theme, brand, hướng chữ lồng được; bề mặt portal tự theo provider.Xem
    • MớiTheme Designer sinh brand ramp 16 bậc kèm kiểm tra tương phản.Xem
    • MớiMotion (Fade, Scale, Slide, Collapse, Stagger), AriaLive, Focus management, CompoundButton, MenuButton, TeachingPopover…
    • Sửa lỗiCommand không còn kéo cả trang khi mount; Field gắn nhãn đúng cho nhóm control.

  18. v0.3.0

    Yugen UI ra đời — Sakura 桜

    Đổi tên thành Yugen UI, brand hoa anh đào, 47 component mới và trang Blocks.

    • Thay đổi lớnBrand mặc định chuyển từ Communication Blue sang Sakura #C2347A (blue vẫn dùng được qua data-brand="web").
    • Mới47 component mới theo danh mục Fluent 2 và shadcn/ui.Xem
    • MớiBlocks — cụm giao diện ghép sẵn, copy nguyên file.Xem
    • MớiGradient Sakura / Dusk / Sunset, logo enso hoa anh đào.

  19. v0.2.0

    Ngôn ngữ thiết kế theo Fluent 2

    Trang Màu sắc, Typography, Spacing, Bo góc, Elevation, Motion; quy tắc màu và gradient.

    • MớiTrang Màu sắc với bảng tương phản tính trực tiếp từ token.Xem
    • Cải tiếnDocs site thiết kế lại theo bố cục fluent2.microsoft.design.

  20. v0.1.0

    Nền móng

    Token 3 lớp theo Fluent 2, 11 component đầu tiên và Design.md.

    • MớiToken Global → Alias → Utility, Tailwind CSS v4, 11 component cốt lõi.

Nâng cấp lên phiên bản mới

Dùng gói npm: cập nhật rồi đọc mục “Thay đổi lớn” ở trên. Dùng kiểu copy-paste: chép lại thư mục component cần cập nhật cùng tokens.css.

npm install yugen-ui@0.16.0