Once UI 2.3 is about the parts of a real app that sit around the pages: the sidebar, lists people reorder, a file tree, a toolbar of small controls, and a light mode that looks as finished as the dark one. It also ships an app starter that an AI agent copies instead of writing.
Drag to reorder: Sortable
Wrap a list in Sortable and each row in Sortable.Item, and apply the new order in onReorder. A mouse drags after a 4px move, a finger after a 200ms press, so taps and scrolling still work. The keyboard picks a row up with Space, moves it with the arrow keys and drops it with Space, and every step is read out to screen readers. Lists that share a group trade rows, and it has no dependencies.
One look for the whole sidebar: Nav
Wrap your NavItems and NavGroups in Nav and set the look once: density for how tight the rows are, variant for how the current page stands out, and rail for the line down an open group. NavSection gives each block its small heading. A selected NavItem with an href now carries aria-current="page".
Files and folders: FileTree
Pass items and FileTree renders an indented tree that the arrow keys walk. Right opens a folder, Left closes it, and Enter selects. It works controlled or uncontrolled, with slots for custom rows and empty or loading states. FileTree was contributed by @kadrxy, thank you.
Toolbar fields
Every text field now takes size="xxs": 32px, the height of a small Button, so a dashboard toolbar can be all small controls. At that size the label shows as the placeholder and stays the field's accessible name.
Light mode with depth
The light page is now a soft off-white and surfaces stay white, so cards, dialogs and panels lift off the page the way they do in dark mode. Text and solid fills moved a step so every text token passes WCAG AA, and inputs are white with a clear edge instead of a gray fill that read as disabled. defaultTheme sets a starting theme that visitors can still switch, and brandScale, accentScale and neutralScale take your brand's exact colours step by step.
An app starter for agents
ai/starters/app/ is a working Next.js setup with Once UI's CSS, fonts, providers and a switchable theme, plus a signed-in shell: a sidebar, a top bar with breadcrumb, a command palette, an account menu and a phone drawer. The product name, the user and the nav live in one file. AGENTS.md points agents at it, so they copy it and edit it instead of writing the shell from scratch.In our own test runs on the same five-route app, agents that started from it used about half the tokens and model calls and passed the same checks. Agents without it locked the theme switch or lost the app fonts.
Fixes and accessibility
Dialogs keep focus inside and wrap Tab, hover triggers open from the keyboard, the first toast is read out, and a disabled Fieldset disables everything inside it. ThemeProvider no longer causes a hydration mismatch, and every example on the docs site is now typechecked and opened in a browser before release. The full list is in the changelog.
