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
Authentication form with validation, password toggle, and loading states.
Passkey Login
Passwordless and password sign-in in one form, backed by the WebAuthn handlers.
Invitation-Gated Registration
Admin-minted invitations gate sign-up via RegisterPage and InvitationManager.
Password Reset Flow
The two-page forgot/reset flow with timing-safe, enumeration-safe handlers.
Dashboard Layout
App dashboard with collapsible sidebar, stat cards, progress indicators, and activity feed.
Settings Page
Tabbed settings page with profile editing, notifications, and security panels.
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.
Profile Card
User profile with avatar, stats, skills, progress, and multiple layout variants.
Trace Drawer
Hierarchical drawer with a calculation breakdown — "How was this value calculated?".
Decision Tree Wizard
Stepper whose steps and recommendation are derived from the answers given so far.
Range Hint Input
Input with a contextual plausibility range in the helper text — adaptive success/warning/danger.
Clickable Card
Card as one fully clickable element — href, onclick, clickable. With an anti-pattern comparison (no nested <a>).
Stat Tile
KPI tile for dashboards — label, value, trend, icon tile. Scales from a single tile to a 4-up grid.
Page Header
Top-of-page heading with eyebrow, title, subtitle, and actions — four patterns for list, detail, tab, and form pages. Pure Tailwind, no component.
Help Tooltip
Glossary trigger for domain terms — info icon next to a label, tooltip with the definition. Pattern for domain apps with specialist vocabulary.
Onboarding Flow
First-run onboarding on the Guide system — a beacon-launched spotlight tour, a non-modal help panel, a new-feature hint, and onStep/onComplete/onSkip analytics.
Unsaved Changes Guard
Guards against data loss when leaving a form with unsaved changes — combines ConfirmDialog, beforeNavigate, and beforeunload.
Meal Planner
Weekly meal plan on the Planner grid — meals bucketed by day, sorted by type, with an "Add" affordance on every day, including empty ones.
Want to see everything together?
The Showcase page demonstrates 20+ components working together in a realistic application.
View Showcase