Once UI 2.2: chat, forms and mobile

Building blocks for chat and forms, a core that works on phones, about 25 fixes, and docs an AI agent reads in one go.

Updated 2 days ago

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.

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.

Once UI for React Native: the same props on a phone

Dither: your own image or video as a dithered print

<ChatMessageList ariaLabel="Chat"> {messages.map((m) => ( <ChatMessage key={m.id} from={m.from} time={m.time}> {m.text} </ChatMessage> ))} {typing && <TypingIndicator />} </ChatMessageList> <ChatComposer onSend={send} attach />

<Form as="form" onSubmit={async (e) => { e.preventDefault(); await save(new FormData(e.currentTarget)); }}> <Field label="Email" hint="For receipts" error={error}> <Input id="email" /> </Field> <SubmitButton pendingLabel="Saving…">Save</SubmitButton> </Form>

Page

2.1

2.2

Change

Dashboard

726k

186k

−74%

Product grid

345k

141k

−59%

Changelog

264k

91k

−66%

Pricing page

136k

73k

−46%