Build an app

For a reader building an application with uf: one guide per thing an application does. Unlike Start, this is not a sequence to read front to back. Read the first two pages, then the one for what you are doing today.

What you need first

A project that runs — Your first project makes one. The tutorial builds one application out of most of the pages below, and is the quickest way to see how they fit before reading any of them in detail.

The pages, in order

Flow, the modern partscomponent, hook, renders, match and enums — and what uf does with them.
RoutingFiles become routes; layouts nest; loaders run before the page.
Rendering modesWhere a document comes from, and what the browser does once it has one.
Server ComponentsThe boundary a directive draws, the graph that resolves it, and a split at the route, not the module.
Async ReactSuspense, transitions and optimistic UI: what waits, what stays visible, and what is only temporary.
Server actionsA function the browser calls by id: what may cross, what is refused, and why it authorizes itself.
StateAtoms, a store, and where this parts company with Jotai.
FormsUncontrolled inputs, narrow subscriptions, and no Proxy.
EffectsFailures in the type, and what Flow costs against Effect-TS.
Headless componentsHeadless primitives: keyboard maps, ARIA contracts, composition types, and no styles at all.
Styling and contentCSS, StyleX, tokens, dark mode, Markdown and MDX.
Images, fonts, icons and cardsResized, self-hosted, subsetted and drawn at build time — and what that stops short of.
CachingA route cache and a fetch cache, opt-in, in memory by default, durable when you say so.
Signing inA contract rather than a provider: PKCE, a single-use state, and a session store you can replace.
LoggingA structured logger, and a request id readable from inside a render.
Web vitalsFive numbers the browser already has, and nothing that leaves the machine unless you ask.

Flow, the modern parts comes first because every example on every other page is written in it, and Routing second because a route is what the rest attaches to: a loader, a layout, a Suspense boundary, a form that posts to an action. Rendering modes decides what each route becomes when you build, which changes what the pages after it can do. From there the order is roughly the order an application needs things in: the split between server and browser, the libraries that hold state, take input and model failure, the interface and what styles it, and last what a deployed application needs around it — caching, signing in, logs and measurements.

Which page answers which question

You want to	Read
write components and hooks with `component` and `hook`	Flow, the modern parts
add a page, a layout, a loader, middleware or a route handler	Routing
choose between prerendering, rendering per request and a client-side application	Rendering modes
decide what runs on the server and what ships to the browser	Server Components
show something while data loads or a change is in flight	Async React
call the server from the browser	Server actions
share state between components	State
take input and validate it	Forms
put failure in a type	Effects
build a tab list, a dialog or a menu that works with a keyboard and a screen reader	Headless components
style it, or write pages in Markdown and MDX	Styling and content
resize images, self-host fonts, draw a share card	Images, fonts, icons and cards
cache a route or a `fetch`	Caching
sign somebody in with OAuth	Signing in
log what a request did	Logging
measure LCP, CLS and INP	Web vitals
test any of it	Testing, in The toolchain
look up a component's parts, or which package exports something	Components and Packages

When you are done

Targets is where an application goes once it builds: a server or a static host, a single executable file, a phone, a terminal. Testing is in The toolchain, with the other commands you run against what you built.

Next: Flow, the modern parts