Once UI Blog
Posts
Once UI
Once UI 2.5: reactions that move
Once UI 2.4: ready for AI apps
Once UI 3.0 beta: one way to say it
Stack languages: your app in Hungarian, or in two
Stack store: your shop on your own site
Liquid Metal: chrome that never sets
Chirio, redesigned
Styled screenshots in Chirio
Once UI 2.3: made for real apps
Frametic is now a video and capture studio
Agents write about 40% less code from Stack
Magic Portfolio, now on Once UI 2
Frametic MCP: let your agent film your site
Once UI Stack: your site as a desktop app
Once UI Stack, redesigned
Stack: teams and billing
Prism Glow: soft prism light behind your sign-in screen
Once UI for React Native: the same props on a phone
Once UI 2.2: chat, forms and mobile
Dither: your own image or video as a dithered print
Once UI 2.1: The pieces apps kept asking for
Once UI 2.0: A system an AI can build with
What made Once UI 2.0 possible
Once UI 2.0 alpha: Measured, not assumed
Colour arrives in pairs
Once UI 1.8: Polish as a feature
Once UI 1.7: Form with Intent
From products to systems: a new service model
Magic Journal: A different medium for long-form writing
Supa Social: The next milestone of our journey
Once UI is open source. Here's how we plan to keep it that way.
Designing a timeless, AI-native brand
Once UI 1.5: Curiosity in code
Once UI 1.4 migration guide: The breakpoint object
Launching in the AI-native era: A guide for indie builders
The first design system for indie builders
Builder Stories
Side and Once UI: From café website to reservation system
SatisPro and Once UI: Scaling smarter review management
IQON and Once UI: Scaling with a design system
Dev: Blending science and code with Once UI
JExcellence and Once UI: Turning experiments into enterprise apps
OsmyReal: Launching a platform for mobile gaming with minimal coding
TrademarkTrademark
Ctrl k
Search…
Sign up
Once UI Blog
Posts
Once UI
Once UI 2.5: reactions that move
Once UI 2.4: ready for AI apps
Once UI 3.0 beta: one way to say it
Stack languages: your app in Hungarian, or in two
Stack store: your shop on your own site
Liquid Metal: chrome that never sets
Chirio, redesigned
Styled screenshots in Chirio
Once UI 2.3: made for real apps
Frametic is now a video and capture studio
Agents write about 40% less code from Stack
Magic Portfolio, now on Once UI 2
Frametic MCP: let your agent film your site
Once UI Stack: your site as a desktop app
Once UI Stack, redesigned
Stack: teams and billing
Prism Glow: soft prism light behind your sign-in screen
Once UI for React Native: the same props on a phone
Once UI 2.2: chat, forms and mobile
Dither: your own image or video as a dithered print
Once UI 2.1: The pieces apps kept asking for
Once UI 2.0: A system an AI can build with
What made Once UI 2.0 possible
Once UI 2.0 alpha: Measured, not assumed
Colour arrives in pairs
Once UI 1.8: Polish as a feature
Once UI 1.7: Form with Intent
From products to systems: a new service model
Magic Journal: A different medium for long-form writing
Supa Social: The next milestone of our journey
Once UI is open source. Here's how we plan to keep it that way.
Designing a timeless, AI-native brand
Once UI 1.5: Curiosity in code
Once UI 1.4 migration guide: The breakpoint object
Launching in the AI-native era: A guide for indie builders
The first design system for indie builders
Builder Stories
Side and Once UI: From café website to reservation system
SatisPro and Once UI: Scaling smarter review management
IQON and Once UI: Scaling with a design system
Dev: Blending science and code with Once UI
JExcellence and Once UI: Turning experiments into enterprise apps
OsmyReal: Launching a platform for mobile gaming with minimal coding
Sponsored
Aveiro
aveiro.app
Sponsored
Aveiro
aveiro.app
TrademarkTrademark
Once UIDocumentationBlog
© Once UI. All rights reserved.
Built with Aveiro
Release

Once UI 3.0 beta: one way to say it

The first 3.0 beta: one prop vocabulary across components, theme density, numbers on the spacing scale, merged components, and a codemod that migrates 2.x code.
Updated 2 days ago
Once UI 2.4: ready for AI apps
Stack languages: your app in Hungarian, or in two
Once UI 3.0 is the one breaking release we planned, and its first beta is on npm today. It gives every component the same prop names, adds a density setting to the theme, folds overlapping components together, and ships a codemod that moves your 2.x code over for you. 3.0.0 is planned for early January; until then the beta lives on the next tag.
Once UI 3.0 beta at a glance, slide 1 of 8
Once UI 3.0 beta at a glance, slide 2 of 8
Once UI 3.0 beta at a glance, slide 3 of 8
Once UI 3.0 beta at a glance, slide 4 of 8
Once UI 3.0 beta at a glance, slide 5 of 8
Once UI 3.0 beta at a glance, slide 6 of 8
Once UI 3.0 beta at a glance, slide 7 of 8
Once UI 3.0 beta at a glance, slide 8 of 8
npm i @once-ui-system/core@next

What 3.0 is

2.x grew one component at a time, and it showed. A toggle reported its state with onToggle, a field with onChange, a select with onSelect. A colour role was variant on a Button, scheme on a Tag and state on a Timeline. A bare number meant rem on a width and a percentage on a mask. 3.0 settles each of these once, so what you learn on one component holds on the next. It is a cleanup, not a redesign: apps look the same after the move.

How to try it

Start on a 2.x app with a clean working tree, and upgrade react and react-dom to 19 first, since React 19 is now the floor. Then run the codemod while the app is still on 2.x. It is a script in the core repo, not a package, so clone the beta tag next to your app and point it at your source:
git clone --depth 1 --branch v3.0.0-beta.0 https://github.com/once-ui-system/core ../once-ui-core
node ../once-ui-core/scripts/codemod-3.0.mjs src --dry   # see what it would change
node ../once-ui-core/scripts/codemod-3.0.mjs src
npm i @once-ui-system/core@next
It only touches Once UI's own components, and running it twice changes nothing. Lines marked ! in its report are the spots it could not rewrite exactly, each with its file and line, for you to finish by hand. The migration guide walks through every step.
One thing to hold back for now: the effects (RevealFx and the other Fx components) and blocks such as StylePanel and Banner move to their own packages in 3.0, and those are not on npm yet. If your app uses them, wait until those packages are published before you migrate it.
The 3.0 docs are live on their own site while the beta runs: