Once UI 2.1 is out. Tabs, Drawer, DataTable, Pagination and Breadcrumbs join the system, Sass is no longer required, MDX and OG routes take a line each, the date pickers speak your language, and a new CLI starts an app in one command.
Once UI 2.1 is out. It is on the latest tag, so it is what npm installs now:
npm i @once-ui-system/core@2.1.0
2.0 made Once UI a system an AI can build with. 2.1 fills in the pieces real apps kept reaching for, takes away a setup step, and makes the harness cheaper for an agent to read. It is a minor release: everything is additive, nothing is removed or renamed, so upgrading from 2.0 is a version bump.
New components
The most requested gaps are closed. Each one ships with the keyboard and screen reader behaviour built in, not left as an exercise.
Tabs, horizontal or vertical, with arrow keys, Home and End, and automatic or manual activation.
Drawer, a modal sheet from any edge, built on Dialog's focus trap, scroll lock and inert page.
DataTable, typed rows from column definitions, with sorting, a select-all checkbox, client or server pagination, an empty state and loading skeletons.
Pagination, a fixed-width row of real buttons with ellipses and optional first and last pages. Table uses it now too.
Breadcrumbs, RadioGroup, RangeSlider and VisuallyHidden, which doubles as a skip link.
useHotkeys and KeyTip, for mod+k style shortcuts that show ⌘ on a Mac and Ctrl everywhere else.
Switch, TagInput and Slider also work uncontrolled now, and onToggle hands you the new state, so a setter can go straight in.
Sass is no longer required
Component styles ship precompiled. Any bundler that handles CSS modules works with no setup: Next.js with webpack or Turbopack, Vite, Storybook, Remotion. Pages render the same as before and your imports don't change. If nothing else in your app uses sass, you can uninstall it.Twelve more components render as server components too, including Badge, Tag, Avatar, List and Skeleton.
Less wiring for common jobs
MDX in one map.@once-ui-system/core/mdx renders Markdown through Once UI, with linked headings, links, images, code and tables. It works with and .
SmartLink
Media
CodeBlock
Table
next-mdx-remote
@next/mdx
OG routes in two lines.createOgFetchRoute() and createOgProxyRoute() from @once-ui-system/core/next give OgCard its routes, and they only reach public addresses, checked again on every redirect.
defineConfig checks your config and keeps its types, so each section spreads straight into the providers with no casts.
A custom brand colour with no flash. Give brandSeed a colour and the whole scheme is generated, rendered on the server for the first paint.
StylePanel translates and fits a sidebar, with labels for every string it shows and a stacked layout.
StylePanel can offer that custom colour too. With customColors, the Brand and Accent rows end in a swatch of your own and a field to pick it, and the panel reports the seed for you to render.
