Once UI 2.0

Once UI 2.0 is an open-source design system for building polished React products with less repetitive code. It is built with Next.js and Supabase and is presented as the agentic design system, aimed at indie creators, developers, design engineers and the AI coding agents that work alongside them. The main purpose of the system is to let you compose layouts with readable primitives, rely on a shared system of components and design tokens, and keep the result consistent as your product grows. It ships with fully functional apps assembled from copy-paste React code, organized as components, blocks, layouts and pages. Building a React product usually means re-deciding the same details over and over: spacing, typography, color, borders, surfaces and states. Every new screen or feature adds another place where the interface can drift away from the rest of the product. Once UI addresses this by providing a single system that everything is composed from, so consistency becomes a property of the building blocks rather than something you have to police by hand. Version 2.0 extends the same idea to a second audience: coding agents. Because agents now write a large share of application code, the design system has to be legible to them as well as to people. That is why Once UI 2.0 ships with a component catalog, compact rules and task guides, so an agent can use the system correctly, while the foundations and predictable APIs keep the output understandable for the person reviewing it. The most visible idea in Once UI 2.0 is stated on the site as Any look. One system. It is demonstrated through a die-rolling interaction: you roll, the whole page changes, and the code does not. Each roll corresponds to one of twenty looks, tracked as a deck that fills up as you collect them, and every look has its own address such as once-ui.com/?face=20. The default look, number 20, is called Natural 20 and is described as the one where you rolled the whole system. It is displayed with a neutral gray, an emerald brand color, an orange accent, a playful border treatment, contrast options described as solid and flat, a filled surface, and Geist used for headings, body text and labels. The demonstration exists to show that a fixed set of design decisions can drive radically different visual results without any change to the underlying React code. The look is configuration; the system stays the same. Once UI's building blocks are organized in layers. Components, blocks, layouts and pages are the levels named in the project's own description, and the promise is that you ship fully functional apps with copy-paste React code. Blocks have their own documentation with a quick start entry, and they are larger composed units built from components, while layouts and pages assemble those into complete screens. Because everything is drawn from the same shared component set and design tokens, a page put together from blocks inherits the system's behavior and look rather than introducing new one-off styling. Readable primitives are the foundation of the composing experience: you write layouts using primitives that you can read and reason about, which keeps the markup approachable and the intent visible. The wider product line reflects this layering too, listing Stack marked as New alongside Once UI Core, Once UI Blocks and Orbit Core. Version 2.0 is framed as an update that gives both you and your coding agent a clearer way to work. Three artifacts are named as enabling that: a component catalog, compact rules and task guides. The component catalog gives an agent a structured inventory of what exists in the system, so it can reach for a real component instead of inventing a new one. Compact rules are short, explicit constraints describing how the system should be used, which matters because agents perform better with a small, unambiguous rule set than with a long specification scattered across documentation. Task guides walk through how to accomplish specific jobs with the system, giving an agent a procedural path from a request to a correct implementation. Together these artifacts help agents use the design system correctly. On the human side, the foundations and predictable APIs make the output easier to understand, so reviewing, extending and debugging agent-written code stays tractable. The overall approach is that the design system, not the individual screen, is the source of truth. A shared layer of components and design tokens carries the decisions — color, type, surface, border and contrast — and the components and blocks consume those decisions rather than hard-coding them. That is what makes the roll the die, the whole page changes, the code does not demonstration possible: the look is applied through the system rather than written into each page. The same architecture is what lets a coding agent participate safely. Because there is a catalog to select from, rules to follow and guides to work from, the agent operates inside the system rather than around it, and because the APIs are predictable, a developer can read what the agent produced without having to reverse engineer it. The project is documented publicly, with Documentation, Roadmap and Changelog all linked from the site, and the GitHub organization is described as shipping in public. The stated outcome is polished React products built with less repetitive code, and consistency that holds as your product grows. Instead of restyling each new screen, you compose it from the same components and tokens, which reduces the surface area where visual drift can appear. For teams adopting agents, the benefit is that generated output is easier to understand because it is expressed in the system's own vocabulary, using foundations and APIs the system defines. The site also points to a broader benefit of working this way: the system is used by real, shipped products rather than being only a demo. Aveiro, Frametic, IQON, Hoshina, La Femme Kosmetik, a developer portfolio by Divyanshu Dhruv, and the Dopler Store swag store are all presented under Built with Once UI, spanning a creator platform, motion for the web, a monitoring app, a property claim platform, a beauty brand, an individual portfolio and an ecommerce store. Concrete scenarios follow from those examples. A creator platform like Aveiro needs a large, consistent surface area across many screens and states. Frametic, described as motion for the web, is a scenario where a design system has to coexist with animation. IQON is a monitoring app, where dense data displays benefit from predictable layout primitives. Hoshina is a property claim platform, a case where a workflow-heavy product needs consistent forms and content structure. La Femme Kosmetik is a beauty brand, where the token-driven look system allows the same system to produce a distinct visual identity. A developer portfolio such as Divyanshu Dhruv's and a swag store like Dopler Store show the range at the small and commercial ends. Beyond those, the free starting points — Magic Portfolio, Magic Docs, Once UI Starter and Once UI Figma — suggest entry scenarios: a portfolio site, a documentation site, a fresh project scaffold, and design work in Figma alongside the code. Once UI is aimed at indie creators, design engineers and developers building React products, as well as the coding agents they work with. The site's own community is named the Design Engineers Club, described as 5,000 readers every week, a Discord that answers, and a GitHub that ships in public. The stack is stated directly: Next.js and Supabase, with React code delivered as copy-paste components, blocks, layouts and pages. Figma is part of the ecosystem through Once UI Figma, and the project is supported by Claude and Sentry. The product line includes Stack, marked as New, along with Once UI Core, Once UI Blocks and Orbit Core, plus a group labelled Free containing Magic Portfolio, Magic Docs, Once UI Starter and Once UI Figma, with a separate Pricing page linked from the site. Once UI is a product by Dopler. Once UI 2.0 treats consistency as something the system enforces rather than something the developer remembers. Its twenty interchangeable looks show that one system can drive any visual identity while the React code stays unchanged, and its component catalog, compact rules and task guides extend that same discipline to AI coding agents. For developers and design engineers building with Next.js and Supabase, that means polished products with less repetitive code; for their agents, it means a system they can actually follow; and for both, it means code that stays easier to understand as the product grows.