ONCE UI STACK

Assemble an app, layer by layer.

A designed frontend, eleven surfaces, a backend you switch on when you need it, and the services behind it. Name the parts; get that app, with nothing to delete.

Fast by construction

SEO built in

Every width

Your brand, one file

Get Stack

View demo

WORKS WITH

Supabase
Stripe
Shopify
Fourthwall
Resend
Vercel

THE ANATOMY

Five layers. Switch parts on, watch the app add up.

This is the whole model. Pick surfaces and backend parts; the providers they need light up on their own, and the build sheet counts what the generated app installs. The numbers come from the scaffolder, not from a slide.

01Frontend

The shell. In every app, always on, already styled.

Once UI design systemNext.js App RouterTheme, fonts, brandSEO and OG imagesError and 404 pages

02Surfaces

What people see. Pick one, or eleven.

03Backend

Accounts, money, data. Only what a surface or you ask for.

Sign-inTeams

04Providers

Not picked: they follow from the layers above.

Supabase

Upstash

Neon

Stripe

Resend

Vercel

Anthropic

Shopify

Fourthwall

05Extensions

Our own products and native shells, one switch each.

Newsletter

BUILD SHEETmeasured

dependencies

keys to go live

providers

Runs with none of the keys set. Every part has a demo mode, so the app builds and deploys before you open a single dashboard.

# SupabaseNEXT_PUBLIC_SUPABASE_URL=NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=SUPABASE_SECRET_KEY=

# UpstashUPSTASH_REDIS_REST_URL=UPSTASH_REDIS_REST_TOKEN=

# ResendRESEND_API_KEY=EMAIL_FROM=

# ChirioCHIRIO_API_KEY=CHIRIO_FEEDBACK_BOARD=

Build this app

Describe it, or pick the parts

Type what you are building. The builder suggests surfaces and services; change any of them before anything is made.

Get exactly that repository

Only the parts you chose are copied in. If one cannot be unwired cleanly, the build stops with an error instead of handing you something half-wired.

Ship first, plug in later

The app deploys on demo data. Add a key and the matching provider takes over: sign-in, payments, email, one at a time.

WHAT EVERY APP INHERITS

The first layer does the hard parts

Whatever you assemble sits on the same frontend: fast, findable, at home on a phone, and wearing your brand. You get these before you have written a line.

PERFORMANCE

Fast, because nothing is in it you did not ask for

A part you leave out is not in the repository: not disabled, not tree-shaken, never copied. Pages render on the server and fonts load through next/font, so the first paint does not jump.

+Adding surfaces adds files, rarely dependencies
+Every surface builds and runs before a single key is set
+Layout shift measured at 0.00 on all four pages below

DEPENDENCIES INSTALLEDshell 14

Docs site14

Landing, blog, docs14

Landing and a dashboard20

All eleven surfaces23

LIGHTHOUSE · PERFORMANCE · LIVE DEMO, DESKTOP

Landing

100

Docs

Blog

Store

SEO

Found in search, and good-looking when shared

Each surface reads its title, description, canonical and share image from one file. Pages carry structured data, sitemaps list what is public, and a second language brings its own URLs and hreflang.

+Lighthouse SEO 100 on landing, docs, blog and store
+Share images drawn per page at /api/og
+Sitemaps for landing, blog and store; robots.txt included

fjell.studio › blog › field-notesField notes: how we build furniture to last - FjellNotes from the workshop on oak, joinery and the chairs we have repaired for twenty years.

FJELLField notes

// src/resources/seo.js
const blog = {
  path: "/blog",
  title: "Field notes - Fjell",
  image: "/api/og/generate?…",
  robots: "index,follow",
};

LIGHTHOUSE · SEO · LIVE DEMO, DESKTOP

100

Landing

100

Docs

100

Blog

100

Store

RESPONSIVE

One layout, every width

Layout components take their phone and tablet behaviour as props, so a page says how it folds where it is written. Drag the frame: the sidebar turns into tabs, three cards into one, the menu into a button.

+Breakpoints as props: m={{ direction: "column" }}
+Dashboards, editors and stores all fold the same way
+Same components in the iOS, Android and desktop shells

drag the handle0px · phone

Fjell

OverviewOrdersTeam

OverviewOrdersCustomersSettings

Good morning, Ada

Revenue€12.4k

Orders318

Returning41

BRANDING

Your brand in one file, not a fork

Colours, neutrals, corners, fonts, logo and the company schema live in one config file. Change a line and every surface follows, the dashboard and the docs included. Try it on the card.

+13 brand colours, 3 neutrals, 3 corner styles, any Google font
+Light and dark from the same tokens
+An AGENTS.md map for your agent: in our own test runs, agents write ~40% less code from Stack, same checks pass

// src/resources/once-ui.config.js
const style = {
  brand: "violet",
  neutral: "slate",
  border: "playful",
  solid: "color",
};

Halden & CoWorkshop · Oslo

Pro

Weekly digest

Book a visit

Portfolio

THE SURFACES

Eleven surfaces, already designed

Compose any of them together. Each one is the part that makes it that kind of app; the shell under it is shared, so they look and behave like one product.

Read the docs

LandingConversion-optimized marketing pages, blog, pricing and legal.

DashboardProduct shell with analytics, users and settings. Requires the orgs slice, which brings auth.

VideoMedia editor with timeline, preview and adjustments panel.

DocsFilesystem-backed MDX documentation with search, nav and paging.

StoreProduct catalog with collections, variants, cart drawer and checkout, backed by Fourthwall, Shopify or local files.

AgencyStudio site with services, engagement model and case studies.

JournalLong-form writing with chapters, audio narration and a reading progress rail.

SpotlightNewsletter-first landing page for founders and creators.

BlogMDX blog with a lead story, featured posts, a dated archive with topic filter and a newsletter row.

AI chatChat app with projects, streaming agent steps and widgets, voice, and Claude when you add a key.

API productSell an API: one list of operations served as REST, MCP tools and OpenAPI, with keys, usage and plan quotas.