UI Recipes
Production-ready UI patterns built with Urbicon UI. Each recipe includes a live preview, copyable source code, and links to every component used.
Login Form
An email/password card with inline validation, a password visibility toggle, and loading, failure and success states around a swappable sign-in call.
Passkey Login
Passwordless and password sign-in in one form, backed by the WebAuthn passkey handlers.
Invitation-Gated Registration
Admin-minted invitations gate sign-up: the RegisterPage only succeeds for an invited email.
Password Reset Flow
The two-page forgot/reset flow: request a link, then set a new password from the emailed token.
Dashboard Layout
An app shell built on SidebarLayout, with a permanent rail on desktop and a slide-in overlay on mobile. The page inside: four stat tiles, a revenue bar chart and an activity feed.
Filter Sidebar
A listings page whose filter rail is persistent on desktop and a slide-in overlay behind a funnel button on mobile, built on Sidebar mode="responsive". Search, property type, rent range, bedrooms and amenities narrow the result grid live, with no Apply step.
Table with Detail Panel
An order list whose rows open in a panel beside the table, so clicking down the list swaps what the panel shows. Below 1024px the same detail arrives as a drawer.
Settings Page
Profile, notifications and security as three flat tabs over shared page state, with one save for the whole page. When settings groups multiply, nest or own their own save, the same panels hang off a sidebar instead.
Multi-Step Wizard
A three-step signup wizard: Next stays disabled until the current step is filled in, a review step reads every answer back, and Back returns without losing input.
Notification Center
A bell button whose badge counts unread notifications, opening a drawer with All and Unread tabs, mark-as-read and archive per item, and a mark-all footer.
Pricing Cards
Three pricing tiers with a monthly/annual billing toggle. The recommended plan is the one elevated card and holds the only filled primary button; features a plan lacks stay listed, greyed out with a tooltip.
Trace Drawer
A "How was this calculated?" drawer for an aggregated figure. It traces the value through every intermediate formula down to the receipts and meter readings it came from, one indented level per step.
Decision Tree Wizard
A Stepper wizard whose route depends on the answers so far: a skipIf predicate filters the step list, so choosing a single fuel removes the hybrid step. The review step derives a recommendation from the answer path.
Range Hint Input
A number field whose helper text names the expected range and follows the typed value: success inside it, warning just outside, danger far outside. Nothing blocks: a far-off value stays enterable, it just reads as unusual.
Clickable Card
Dashboard tiles that navigate and a team list whose cards act: href renders a Card as an anchor, onclick as a button, and hover, focus and mint styles arrive only with a real click source. A side-by-side comparison covers why the href belongs on the Card, not on a wrapper around it.
Stat Tile
A KPI tile with a label, a large aligned value, a trend beside its baseline, and an icon square washed in the tile's intent colour. Shown as a linked 4-up grid, a compact strip, and one elevated highlight tile.
Page Header
A top-of-page header in plain markup: eyebrow or breadcrumb, title, subtitle, and an action row that stacks below them on narrow screens. Three variants: list page, detail page with a Breadcrumb, tabbed page with a Tab strip.
Help Tooltip
An info icon beside a label that opens the definition of a domain term in a tooltip, fed from one glossary map; in running text the term itself is the trigger. Built for interfaces with specialist vocabulary: heating-cost billing here, tax or payroll just as well.
Onboarding Flow
First-run onboarding on the Guide system: a pulsing beacon offers an opt-in spotlight tour, a non-modal help panel links back into the UI, a manual hint flags the next feature, and the tour reports its own funnel through onStep, onComplete and onSkip.
Unsaved Changes Guard
An edit form that intercepts navigation while it holds unsaved changes: a beforeNavigate use hook cancels the route change and asks through a three-exit ConfirmDialog, while closing the tab gets the native browser prompt.
Meal Planner
A week of meals on Planner: typed entries bucketed onto their local day, ordered within each day by meal type, with an Add button that stays reachable on empty days.
AI Chat
A chat page that streams replies token by token: Chat, ChatMessageList and PromptInput over a SvelteKit endpoint relaying a model stream as server-sent events. The client posts the history, reads the response as a ReadableStream, and cancels mid-stream with an AbortController.
Agent-generated UI (A2UI)
A chat where the agent answers with live UI instead of prose: A2uiStreamSplitter turns the token stream into a2ui parts, A2UIView renders them against a trusted catalog, and A2uiSurfaceRouter delivers a later turn's envelopes to the form the agent sent earlier. A multi-step flow (pick a date, load free rooms, choose one) patches one surface instead of rebuilding it.
Building a list page?
Table with Detail Panel is the fullest recipe here: search, filters and paging come from the table, and clicking down the list swaps what the panel beside it shows.
Open the recipe