Once UI 2.0

Once UI 2.0 is an open-source design system for building polished React products with less repetitive code. The website describes it as an open-source design system for indie creators built with Next.js and Supabase, and says you can ship fully functional apps with copy-paste React code covering components, blocks, layouts and pages. Once UI brands itself as "the agentic design system," and its Product Hunt tagline states that it builds consistent React apps for developers and AI agents. Its core purpose is to provide one shared system — foundations, components and design tokens — so that layouts can be composed from readable primitives and the result stays consistent as a product grows. The problem it addresses is repetition and visual drift in growing React codebases. According to the product description, Once UI helps teams build polished React products "with less repetitive code" and keeps "the result consistent as your product grows" by using a shared system of components and design tokens. The homepage expresses the same idea in a single line: "Any look. One system. Roll the die. The whole page changes. The code doesn't." In other words, the visual identity can be swapped completely while the underlying code stays untouched, because appearance is driven by the system rather than hard-coded into each screen. Version 2.0 extends this logic to AI coding agents: the release notes say the new version "gives both you and your coding agent a clearer way to work," which matters because agent-generated interface code tends to drift unless the agent has explicit rules and a catalog of approved components to draw from. The most visually distinctive feature is the "look" system. The homepage presents a twenty-sided die; rolling it changes the entire page, and a deck counter shows which of the twenty looks you have collected, with unrolled entries marked "Not rolled yet." The default is look number 20, described as "Natural 20: The default. You rolled the whole system." Each look specifies a complete visual configuration, shown on the site as neutral gray, brand emerald, accent orange, border playful, solid contrast · flat, surface filled, with heading, body and label fonts all set to Geist. Every look also has its own URL, such as once-ui.com/?face=20, so a specific appearance can be linked directly. Because the look changes the whole page while the code does not, the same React implementation can be restyled by switching configuration rather than rewriting components. Once UI ships as copy-paste React code rather than a locked black box. The meta description says it lets you "ship fully functional apps with copy-paste React code: components, blocks, layouts and pages," and the product description adds that you can "compose layouts with readable primitives." Those two statements describe the practical workflow: you assemble a screen from components and larger blocks, arrange them with primitives that stay readable in the source, and rely on layouts and page-level compositions that already follow the system's conventions. A shared set of design tokens carries the visual decisions, and those tokens underpin the look system demonstrated on the homepage. The product description also highlights "foundations and predictable APIs," which it says make the output "easier for you to understand." The intended outcome is a codebase where a developer can read a layout and know where every spacing, color and typographic value comes from. Version 2.0 is explicitly designed for AI coding agents as well as people. The product description states that its "component catalog, compact rules, and task guides help agents use the system correctly." Each of those three pieces serves a different purpose. The component catalog gives an agent an inventory of approved building blocks to choose from, so it does not have to invent new UI. The compact rules give the agent a short, enforceable set of constraints that fit inside a working context. The task guides walk the agent through common jobs step by step. On the other side of the same coin, the description notes that the "foundations and predictable APIs make the output easier for you to understand," so a human reviewing agent-generated code can still follow what was done and why. This is what the "agentic design system" label refers to: a system with enough structure that both a person and a coding agent can produce work that matches. Once UI is built with Next.js and Supabase, according to the website's meta description, and it is distributed as open-source software. The site supports that framing with a public GitHub organization, public documentation, a roadmap, a changelog and a handbook. The methodology is also visible in the way the homepage is organized as a game: twenty numbered faces, a die to roll, a deck that tracks collection progress, and a direct URL for each face. That structure is a demonstration of the system, not just a marketing device, because it shows that one React implementation can present twenty fully different visual identities by drawing on shared tokens. Because the project also publishes Figma assets and pre-built products such as Magic Portfolio, Magic Docs, Once UI Starter and Once UI Figma, the same system can be applied across design and code without branching into separate, drifting definitions. For developers, the stated benefit is less repetitive code and a result that stays consistent as the product grows. Because layouts are composed from readable primitives and the appearance is controlled by tokens and looks, changing the visual direction does not require editing every component. For teams working with AI agents, the stated benefit is that agents can use the system correctly, guided by a component catalog, compact rules and task guides, instead of producing one-off UI. The description also says the foundations and predictable APIs make agent output easier for the developer to understand, which reduces review effort. The open-source license and the free products listed on the site — Magic Portfolio, Magic Docs, Once UI Starter and Once UI Figma — lower the cost of trying the system. The site's showcase lists products built with Once UI, which gives concrete use cases. Aveiro is a creator platform; Frametic is described as "motion for the web"; IQON is a monitoring app; Hoshina is a property claim platform; La Femme Kosmetik is a beauty brand; and one entry is explicitly a developer portfolio, belonging to Divyanshu Dhruv. There is also Dopler Store, a swag store. Together these examples cover marketing sites, monitoring and business applications, portfolio pages, small online stores, and creator or content platforms, all built on the same design system. Other products in the Once UI family point to further uses: Once UI Core, Once UI Blocks and Orbit Core for building interfaces, Magic Portfolio and Magic Docs as ready-made templates, and Once UI Figma for design work. The companion newsletter, the Design Engineers Club, is described as having 5,000 readers every week, a Discord that answers, and a GitHub that ships in public. Once UI is aimed at indie creators and developers who build React products, especially those working with AI coding agents. The meta description names indie creators directly, and the product description speaks to developers building polished React products. The technology stack stated in the content is Next.js and Supabase, with React components as the delivery format. The project is open source, and its Product Hunt topics include Open Source, Developer Tools, Artificial Intelligence and GitHub. The website lists certain products under a "Free" heading — Magic Portfolio, Magic Docs, Once UI Starter and Once UI Figma — while a separate Pricing page is linked in the navigation. The project also states that it is supported by Claude for open source and Sentry for open source, and that it is a product by Dopler. In short, Once UI 2.0 is an open-source, Next.js-and-Supabase design system for React that pairs component, block, layout and page code you can copy into your app with a token-driven look system spanning twenty distinct visual identities. Its pitch is that the look can change while the code does not, and that the same structure makes the system usable by both developers and AI coding agents through a component catalog, compact rules and task guides. For indie creators and React teams, it offers consistency without repetition.