Open-source frontend infrastructure for the AI-native web

Install Once UI

Build with an agentA harness built for codegen: compact rules, a component catalog and task bundles, all under ~10KB per task. Point your agent at it once and it writes Once UI properly.

Build by handInstall, learn the token props, and reach for the reference when you need a prop name. Start with structure, spacing and typography — the rest composes from those.

Start from a prompt

Each one points your agent at the harness and the blocks that match the task. Fill in the angle brackets and paste.

Set your agent upRun once per project. Writes AGENTS.md and a Cursor rule so every later prompt starts from the rules instead of guessing.

npm install @once-ui-system/core
npx once-ui-init-agent

Landing pageHero, proof and a call to action. Pulls the waitlist, header and footer blocks so the page has real structure rather than three stacked sections.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose
  docs.once-ui.com/ai/tasks/marketing-hero.json

Build a landing page for <what you are shipping>. Follow the task bundle,
and mimic the structure of the Waitlist1, Header1 and Footer4 blocks from
docs.once-ui.com/ai/examples/blocks/manifest.json - adapt the copy and data,
keep the composition.

Compose with Once UI primitives and token props. No raw div/span layout,
no Tailwind, no custom CSS.

Pricing pageTiers, a comparison and the FAQ underneath. The bundle carries the layout decisions that make three columns survive a phone.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose
  docs.once-ui.com/ai/tasks/pricing.json

Build a pricing page with <your tiers>. Follow the task bundle, and take
the header and footer from the Header2 and Footer2 blocks in
docs.once-ui.com/ai/examples/blocks/manifest.json.

Compose with Once UI primitives and token props. No raw div/span layout,
no Tailwind, no custom CSS.

DashboardSidebar, stat row and a data table. Dashboard1 and Table1 show how the charts and the table are meant to sit together.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose
  docs.once-ui.com/ai/tasks/dashboard.json

Build a dashboard showing <your metrics>. Follow the task bundle, and mimic
the Dashboard1, Table1, Sidebar1 and Header1 blocks from
docs.once-ui.com/ai/examples/blocks/manifest.json.

Charts come from @once-ui-system/core/data. Compose with Once UI primitives
and token props. No raw div/span layout, no Tailwind, no custom CSS.

Chat interfaceThread list, message feed and composer. Chat1 and Feed3 handle the scroll and streaming behaviour that is tedious to get right by hand.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose
  docs.once-ui.com/ai/tasks/chat.json

Build a chat interface for <your assistant>. Follow the task bundle, and
mimic the Chat1, Feed3 and Sidebar4 blocks from
docs.once-ui.com/ai/examples/blocks/manifest.json.

Compose with Once UI primitives and token props. No raw div/span layout,
no Tailwind, no custom CSS.

Sign in and sign upBoth screens, with validation and error states wired to the form controls rather than bolted on afterwards.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose
  docs.once-ui.com/ai/tasks/auth.json

Build sign-in and sign-up screens for <your app>. Follow the task bundle,
and take the header from the Header2 block in
docs.once-ui.com/ai/examples/blocks/manifest.json.

Use Input with its validate prop for field errors. Compose with Once UI
primitives and token props. No raw div/span layout, no Tailwind, no
custom CSS.

SettingsSectioned preferences with the controls people expect - switches, selects and a destructive action that asks first.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose
  docs.once-ui.com/ai/tasks/settings.json

Build a settings page covering <your sections>. Follow the task bundle, and
mimic the Header4 and Sidebar1 blocks from
docs.once-ui.com/ai/examples/blocks/manifest.json.

Compose with Once UI primitives and token props. No raw div/span layout,
no Tailwind, no custom CSS.

RoadmapShipped, in progress and planned, with the status treatment already decided so the three states read differently at a glance.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose
  docs.once-ui.com/ai/tasks/roadmap.json

Build a public roadmap for <your product>. Follow the task bundle, and mimic
the Roadmap1 block from docs.once-ui.com/ai/examples/blocks/manifest.json.

Compose with Once UI primitives and token props. No raw div/span layout,
no Tailwind, no custom CSS.

Bootstrap a whole app

Pro

Pro templates ship the parts a prompt cannot invent - payments, auth, a schema - so the agent adapts a working app instead of starting from an empty page.

StorefrontMagic Store on Fourthwall: catalogue, product pages, cart and checkout. Fourthwall handles payment, shipping and fulfilment, so the build is the storefront rather than the commerce backend.

Use @once-ui-system/core for all UI. Read these first:

  docs.once-ui.com/ai/rules.compact.md   - the rules
  docs.once-ui.com/ai/catalog.json       - components by purpose

Bootstrap a storefront from Magic Store
(once-ui.com/products/magic-store). Clone the template, then:

1. Point it at my Fourthwall shop - set the storefront token in .env
2. Replace the brand: logo, name, and the brand and accent schemes
3. Adapt the collections and product pages to <what you sell>
4. Keep the cart and checkout flow as shipped; Fourthwall owns payment,
   shipping and fulfilment

Compose any new UI with Once UI primitives and token props. No raw
div/span layout, no Tailwind, no custom CSS.