Skip to main content
Urbicon UI

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.

20
Recipes
32
Components
100%
Copy-Paste Ready
Sign In
Beginner
Authentication

Login Form

Authentication form with validation, password toggle, and loading states.

Input Button Checkbox Card Alert
Advanced
Authentication

Passkey Login

Passwordless and password sign-in in one form, backed by the WebAuthn handlers.

LoginPage PasskeyManager
Intermediate
Authentication

Invitation-Gated Registration

Admin-minted invitations gate sign-up via RegisterPage and InvitationManager.

RegisterPage InvitationManager
Intermediate
Authentication

Password Reset Flow

The two-page forgot/reset flow with timing-safe, enumeration-safe handlers.

ForgotPasswordPage ResetPasswordPage
Stat
12.8k
Stat
$48k
Stat
1.4k
Stat
3.2%
Intermediate
Layout

Dashboard Layout

App dashboard with collapsible sidebar, stat cards, progress indicators, and activity feed.

Card Badge Avatar Button Progress Tooltip
ProfileNotificationsSecurity
AK
Alex K
alex@example.com
Email Notifications
Intermediate
Forms

Settings Page

Tabbed settings page with profile editing, notifications, and security panels.

Tab Input Textarea Select Toggle Accordion
1
Account
2
Preferences
3
Review
Full Name
Email
Advanced
Forms

Multi-Step Wizard

Step-by-step form wizard with validation, progress tracking, and review step.

Stepper Input Select RadioGroup Progress
Notifications 3
SC
Sarah C.
Commented on your design
BB
Build Bot
Build #1234 succeeded
TW
Tom W.
Invited you to a project
Intermediate
Layout

Notification Center

Slide-in notification panel with tabs, filtering, and action buttons.

Drawer Tab Badge Avatar Tooltip
Starter
$7
/mo
Pro
$24
/mo
Popular
Enterprise
$66
/mo
Beginner
Marketing

Pricing Cards

Three-tier pricing with SegmentGroup billing toggle and feature comparison.

Card SegmentGroup Badge Button Tooltip
SC
Sarah Chen
Product Designer
47
stat
2.3k
stat
189
stat
Beginner
Display

Profile Card

User profile with avatar, stats, skills, progress, and multiple layout variants.

Card Avatar Badge Progress Tooltip
Intermediate
Display

Trace Drawer

Hierarchical drawer with a calculation breakdown — "How was this value calculated?".

Drawer Card Button Badge
Advanced
Forms

Decision Tree Wizard

Stepper whose steps and recommendation are derived from the answers given so far.

Stepper Card RadioGroup Button Alert
Beginner
Forms

Range Hint Input

Input with a contextual plausibility range in the helper text — adaptive success/warning/danger.

Input
Beginner
Display

Clickable Card

Card as one fully clickable element — href, onclick, clickable. With an anti-pattern comparison (no nested <a>).

Card
Beginner
Display

Stat Tile

KPI tile for dashboards — label, value, trend, icon tile. Scales from a single tile to a 4-up grid.

Card Badge
Beginner
Layout

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.

Button Badge Breadcrumb Tab
Beginner
Display

Help Tooltip

Glossary trigger for domain terms — info icon next to a label, tooltip with the definition. Pattern for domain apps with specialist vocabulary.

Tooltip Button
Advanced
Display

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.

Guide GuideBeacon GuidePanel GuideMention GuideHint
Intermediate
Forms

Unsaved Changes Guard

Guards against data loss when leaving a form with unsaved changes — combines ConfirmDialog, beforeNavigate, and beforeunload.

ConfirmDialog
Intermediate
Display

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.

Planner Button Badge

Want to see everything together?

The Showcase page demonstrates 20+ components working together in a realistic application.

View Showcase