Dither: your own image or video as a dithered print
Once UI 2.2 adds the parts most apps end up building by hand: a chat, forms that wire themselves up, and a core that behaves on a phone. It also makes the docs cheaper for an AI agent to read, and fixes about 25 bugs.
npm i @once-ui-system/core@latest
Chat
Five components cover what every chat has: ChatMessage for a bubble with its author, time and delivery state, ChatMessageList that follows the conversation as it grows, ChatComposer with send and attach, TypingIndicator, and ConversationItem for inbox rows. They work for people talking to each other and for an assistant that streams its replies.
Set from="self" to put a message on the right, and grouped on a follow-up from the same author so the bubbles line up. They are under Modules, then Chat, in the docs.
Forms
A label, a hint and an error each need an id, and the control needs aria-describedby and aria-invalid pointing at them. Written by hand, that bookkeeping breaks silently: the error shows and a screen reader never hears it. Field does the wiring for you. Fieldset groups controls, SubmitButton shows a pending state while the submit runs, and FormErrorSummary lists what to fix and links to each field.
Form now takes an async onSubmit, and useField and useFormPending let your own controls join in.
Mobile-ready core
On a touch screen, small controls grow to a 44px touch target without changing how they look. Hover styles no longer stick after a tap. New --safe-area-* tokens keep sheets and bars clear of notches and the home indicator, and the viewport units no longer jump when the browser bar slides away.
Fewer tokens for agents
When an AI agent builds a page with Once UI, most of what it pays for is reading. The package now ships one Markdown bundle per kind of page, such as a dashboard, a pricing page or a changelog, with the rules, the components, their known gotchas and a finished example in one file. AGENTS.md points to the right bundle, so an agent reads one file and starts writing.
Page
2.1
2.2
Change
Dashboard
726k
186k
−74%
Product grid
345k
141k
−59%
Changelog
264k
91k
−66%
Pricing page
136k
73k
−46%
These are our own test runs with the same model, prompts and checks as for 2.1, one or two runs per page. They are not a benchmark, and we have not rated the pages for quality yet.
Fixes
About 25 bugs are fixed. The date components take labels for other languages, and the locale now reaches the time picker. DatePicker respects the week start, Checkbox, Radio and Switch pass their native props through so they work with react-hook-form, and AccordionGroup, OTPInput, DateRangeInput and Badge behave as documented. The full list is in the changelog.
