Performance: lighter imports, smaller CSS and fewer re-renders
LatestA release about performance. Every component folder is a subpath of the package, parts that only some apps render load on demand, YugenProvider keeps the theme in a context of its own and charts no longer recompute on hover. The Performance page puts the settings and the numbers in one place. Sizes are gzip, measured on a Vite 8 build.
- NewSubpath imports: every component folder is also a path of the package (
yugen-ui/Button,yugen-ui/Chart,yugen-ui/hooks…). Production builds with Vite, Rollup, webpack and Next.js keep the same size. In Node, tests and dev servers a coldimport { Button }loads 14 modules in about 60 ms instead of 498 in about 1.6 s. With esbuild code splitting, import from subpaths.View - New
yugenHtmlAttributes()andyugenThemeScript()put the theme on<html>before the first paint in server-rendered apps. Both are plain functions that work in a Next.js Server Component, imported fromyugen-uioryugen-ui/YugenProvider/document.YugenProvider applyToDocumentnow writes the attributes in a layout effect, before the browser paints.View - New
useYugenTheme()({ theme, brand, dir }) anduseYugenLocale(): a component that reads one of them does not re-render when the other changes.View - New
useElementSize({ enabled }): withfalsethe hook measures nothing and adds no ResizeObserver.View - NewA Performance page with the import path for each bundler, what loads on demand, CSS size, re-renders and charts, and the measured numbers.View
- Improved
YugenProviderwarns once in development when the deprecatedwithToasterprop is used. Templates and docs now render an explicit<Toaster />child;withToasterremains available until 1.0.0.View - Improved
withToasterloads the Toaster after the first client render, andtoast()calls made before that still show. Apps withoutwithToasterno longer ship@radix-ui/react-toast:{ YugenProvider }goes from 24.9 to 13.3 kB, a six-component app from 38.0 to 31.1 kB. Rendering<Toaster />as a child of the root provider is the recommended setup.View - ImprovedBreadcrumb loads the menu of its "…" button only when
maxDisplayedItemscollapses items (40.2 → 13.5 kB), and StreamingMarkdown loads the citation card only when the text has citations (49.3 → 27.3 kB). Nav no longer imports Tooltip; AppShell's Sidebar adds the rail tooltip (29.9 → 12.0 kB). Tests that open the menu or a card right after rendering need to wait for it (findByRole).View - ImprovedA theme switch re-renders only the components that read the theme: with 1,800 controls and stable children it takes 1.4 ms instead of about 66 ms.
messageswritten inline is compared by value likedefaults, so a parent re-render with the same strings no longer re-renders the controls.View - ImprovedComponents with variants (Button, Input, Badge, Card and 11 more) merge their classes once per combination of props: rendering 1,000 Buttons without a
classNametakes 44–53% less time on the server and in the browser, for about 0.27 kB more.buttonVariantsand the other exported variant functions return the merged string.View - ImprovedMoving the pointer over LineChart, AreaChart or BarChart no longer recomputes the chart: a hover step goes from 9.7 to 1.1 ms at 500 points and from 39 to 1.1 ms at 2,000. A 4 × 200 LineChart with markers has 30% less markup, and a Sparkline with a number
widthmounts in one render with no ResizeObserver. Pixels, keyboard and screen reader output are unchanged.View - ImprovedThe keyframes live in
@theme, so Tailwind writes only the ones your app uses: a Button-only app ontheme-core.cssgoes from 20 keyframes to 1 (9.17 → 8.86 kB).tokens.cssis plain CSS, andtheme.cssimportstheme-core.cssinstead of repeating it (64 kB less in the package). An app that redefines one of the library's keyframes (fade-in,sweep…) declares it inside@theme.View - ImprovedCalendar no longer bundles the Vietnamese date-fns locale: about 2 kB less on every date component in English apps (
{ DatePicker }58.8 → 56.8 kB). Vietnamese apps still get it throughmessagesVi.View - ImprovedCombobox and TagPicker no longer use cmdk: a small built-in listbox handles the highlighted option and the keyboard.
{ Combobox }goes from 42.8 to 38.9 kB and{ TagPicker }from 50.6 to 41.0 kB, and with 1,000 options an arrow key re-renders only the two options whose highlight changes. TagPicker loads Sortable only withreorderable, and a tag that has focus keeps it when it arrives. The listbox is named by the field label (or the input'saria-label). Options no longer carrycmdk-*attributes: tests that query[cmdk-item]inside these two components should queryrole="option".View - ImprovedTheme Designer: each part (color, shape, density and type, surfaces, motion, glass) has its own preview and its checks next to its controls, and the full preview shows light, dark and high contrast in one row. The font field takes any font name.View
- FixedTypes under TypeScript
module: "node16"/"nodenext": 72 exports (BarChart, StreamingMarkdown, useDisclosure…) failed with "has no exported member". CI now type-checks every export from anodenextproject. - Fixed
readAppShellCookieworks in React Server Components. It lived behind"use client"and threw when a Next.js layout called it; import it fromyugen-ui.View - FixedDeprecation warnings are in English and link to the versioning page instead of the old
#/URL, and the AppShell cookie getssecureon https pages. The published JS has no comments (the JSDoc stays in the.d.tsfiles): 1,238 → 1,132 kB unpacked.View
