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
Complete authentication form with validation, password visibility, and demo credentials.
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
App-shell pattern built on SidebarLayout — persistent sidebar on desktop, slide-in overlay on mobile, with stat cards, chart, and activity feed.
Filter Sidebar
A filterable results page where the filter panel is a persistent left rail on desktop and a slide-in overlay on mobile — the exact lifecycle Sidebar mode="responsive" exists for. No backdrop or focus-trap on the desktop rail (that would be a Drawer); the panel is part of the page shell.
Settings Page
Compact tabbed settings page — profile, notifications, and security as flat, co-equal sections with a single save. The small-scale shape of the settings-page pattern (larger or hierarchical settings use a sidebar).
Multi-Step Wizard
Step-by-step form wizard with validation, progress tracking, and review step.
Notification Center
Slide-in notification panel with tabs, filtering, and action buttons.
Pricing Cards
Three-tier pricing with SegmentGroup billing toggle and feature comparison.
Trace Drawer
Hierarchical "How was this value calculated?" drawer. Clicking an aggregated result opens a drawer from the right with the full calculation pipeline — input values as leaves, formulas as sublabels.
Decision Tree Wizard
Stepper wizard where answers in step N change the options or the flow in step N+1. Pattern for auto-deriving complex configurations from simple user decisions.
Range Hint Input
Input with a contextual plausibility range in the helper text that reacts adaptively to the value (success / warning / danger). Generic pattern for plausibility checks without hard validation — the user may deliberately enter values outside the range.
Clickable Card
Card as one fully clickable element — dashboard tile, list card, navigation tile. Card automatically renders as <a> or <button> depending on the prop; nested <a><Card></Card></a> is unnecessary (and usually wrong).
Stat Tile
KPI tile for dashboards: label on top, large value, optional trend indicator and icon tile on the right. Combines Card, the icon-tile pattern, and semantic intent tokens. Generic pattern for any reporting/analytics surface.
Page Header
Top-of-page heading pattern with eyebrow, title, subtitle, and action area. Pure Tailwind composition — no library component needed. Four variants for list pages, detail pages with breadcrumb, tabbed pages, and form pages.
Help Tooltip
Glossary trigger for domain terms — small info icon next to a label, tooltip with the definition. Pattern for domain apps with specialist vocabulary (heating-cost billing, tax, payroll, insurance). Combines Tooltip + Button (ghost, 2xs) + InfoCircleIcon.
Onboarding Flow
First-run onboarding built on the Guide system: a waiting beacon starts an opt-in spotlight tour, a non-modal help panel links back to the UI, a hint flags a new feature, and analytics hooks track the funnel.
Unsaved Changes Guard
Guards against data loss when leaving a page with unsaved changes — combines ConfirmDialog (in-app confirm) and window.beforeunload (browser confirm). SvelteKit pattern with a beforeNavigate hook for in-app route changes.
Meal Planner
Weekly meal plan built on Planner — meals bucketed by day, sorted by meal type, with an add affordance that lives on every day including empty ones.
AI Chat
A full streaming chat surface — Chat shell + ChatMessageList + PromptInput — wired to a SvelteKit SSE endpoint that relays a Claude/LLM stream. Client reads the response as a ReadableStream (POST body, not EventSource), appends tokens in place to the last assistant message, and stops mid-stream via 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 lets a later turn patch a form the agent sent earlier — the multi-step flow (pick a date → load slots → confirm) without rebuilding the surface.
Want to see everything together?
The Showcase page demonstrates 20+ components working together in a realistic application.
View Showcase