Release

Once UI 2.0: A system an AI can build with

Once UI 2.0 is out, and it is on Product Hunt today. One spec now drives the docs, the AI harness, the validator and the codemod. Blocks are free, Stack is the whole app, and upgrading from 1.8 is a codemod and a checklist.

Updated 22 days ago

Once UI 2.0 is out. It is on the latest tag, so it is what npm installs now: Last week the alpha went up with a promise: break it, and then the release and the tour. People broke it, on real products, the same afternoon it went up, and three alpha updates fixed what they found. This post is the tour.

We're on Product Hunt today

Once UI 2.0 is launching on Product Hunt today. If Once UI has saved you a CSS battle or two, this is the one day an upvote or a comment moves the needle for an indie project. Questions are welcome there too.

A system an AI can build with

2.0 is the release where Once UI becomes a system an AI can build with correctly. That sounds like a slogan, so here is what it means in the package. One spec drives four things that used to be written separately: the documentation, the AI harness that ships inside the package, the validator that checks generated code, and the codemod that migrates yours. What an agent reads is what the package accepts, because they come from the same source. The utility classes are generated rather than hand-written, and the breakpoints are fixed, so CSS and JavaScript agree on every width. That is what lets a responsive Flex render on the server, with the right layout in the first paint instead of a desktop layout that corrects itself after hydration. And the package got out of the way. A fresh install went from 513 MB to 47 MB, charts, code blocks and media uploads moved to subpaths that only pull in their dependencies when you use them, and icon names are a real type, so a typo is a compile error instead of a blank space. The technical story, with the measurements behind each of these, is in the alpha post.

New since the alpha

ScrollContainer moves a track instead of scrolling a box. Tiles can peek past the edge, infinite wraps from the last item into the first, markers show where you are, and dragging works with a mouse, pen or finger. proximity scales tiles by their distance from the one in front, continuously as you drag, and active with onActiveChange lets anything outside the component drive it. clip gives you the old edges back.
Particle is now ParticleFx, filed with the other effects. The old name still works as an alias until 3.0.
Charts fill their card. height sizes the card once and the plot takes what the header leaves, instead of hanging past it.
Numeric padding survives the client. <Column padding={1}> rendered on the server and lost its padding on a client mount. It is written as four sides now, and a test holds it there.
sizes takes a number everywhere it reaches Media, so sizes={1200} works on Carousel, Swiper, OgCard, Book and MediaUpload too.
Per-component imports ship only what they name. On the Once UI site that cut the JavaScript every page loads from 542 KB to 472 KB gzipped.

Blocks are free

The blocks moved from once-ui.com into the documentation, and the paywall came off with them. Twenty-seven categories, from heroes and pricing tables to dashboards and settings pages, each with a live preview beside its source. What you copy is the file itself, not a second copy kept in step by hand. They are in the docs sidebar under Resources, or straight at docs.once-ui.com/blocks.

Stack

Once UI Pro is Stack now. Where blocks are sections, Stack is the whole app: a landing page, a dashboard, docs, a store, an agency site, a journal and a personal spotlight, built on 2.0 and composed from the surfaces you pick. The scaffolder writes only what you chose, and every surface typechecks on its own, so leaving one out never breaks the rest.

Start or upgrade

For a new app, the starter is on 2.0: For an app on 1.8, the migration guide is the checklist, in the order that keeps your app building. A codemod applies every prop rename and moves the subpath imports, and most apps are done after the first two steps. If you are on Next.js, don't skip the one-line LayoutProvider import change: without it nothing errors, but internal links reload the page. Two things are by design. Once UI needs a bundler that compiles Sass modules, which Next.js and Vite do, as it always has. And the browser floor is Chrome 111, Safari 15.4 and Firefox 113, because every colour token is oklch() now.

Read the docs

Thank you

To everyone who installed the alpha on a real product and told us what broke: this release is better for every one of those reports. To the Pro supporters, the sponsors and the Design Engineers Club: you are why an indie design system can plan a major at all. If something breaks on 2.0, open an issue on the repo with the version. And if you have a minute today, come say hi on Product Hunt.

Share the launch

Once UI 2.1: The pieces apps kept asking for

What made Once UI 2.0 possible