Pattern Catalog
50 patterns across 13 categories
50
Total Patterns
13
Categories
21
Essential
22
Common
Showing 50 patterns
Essential
Email + Password Login
AUTH-001
tsx4 variants
Authentication2 deps
Essential
Magic Link Login
AUTH-002
typescript4 variants
Authentication2 deps
Common
OAuth / Social Login
AUTH-003
typescript5 variants
Authentication2 deps
Common
Registration / Sign Up
AUTH-004
typescript4 variants
Authentication2 deps
Essential
User Profile Page
PROF-001
tsx4 variants
Profiles & Settings
Common
Avatar Component
PROF-002
tsx7 variants
Profiles & Settings
Essential
Sidebar Navigation
NAV-001
tsx4 variants
Navigation1 deps
Essential
Dashboard Layout
LAY-001
tsx4 variants
Layout
Essential
Detail View (Entity Page)
LAY-002
tsx4 variants
Layout
Essential
Stats Card
DATA-001
tsx4 variants
Data Display1 deps
Essential
Standard Form with Validation
FORM-001
tsx4 variants
Forms & Inputs3 deps
Essential
Side Drawer
WF-001
tsx4 variants
Workflows
Essential
Confirmation Modal
WF-002
tsx3 variants
Workflows
Common
Toast Notification
NOTIF-001
tsx5 variants
Notifications1 deps
Essential
KYC Verification Flow
FIN-001
tsx4 variants
Fintech1 deps
Common
Transaction List
FIN-002
tsx4 variants
Fintech1 deps
Essential
Data Table
DATA-002
tsx5 variants
Data Display1 deps
Common
Loading Skeleton
DATA-003
tsx5 variants
Data Display
Common
Multi-Step Wizard
WF-003
tsx4 variants
Workflows1 deps
Common
Settings Page
LAY-003
tsx4 variants
Layout
Common
Empty State
DATA-004
tsx4 variants
Data Display1 deps
Common
Notification Badge & Bell
NOTIF-002
tsx4 variants
Notifications
Common
Alert / Status Banner
NOTIF-003
tsx6 variants
Notifications1 deps
Common
File Upload
FORM-002
tsx5 variants
Forms & Inputs
Common
Breadcrumbs
NAV-002
tsx4 variants
Navigation
Common
Search + Filter Bar
NAV-003
tsx4 variants
Navigation
Common
Compliance Dashboard
FIN-003
tsx4 variants
Fintech
Common
Role-Based Access Control
AUTH-005
typescript4 variants
Authentication
Critical
Collection / Listing Page
COLL-001
tsx4 variants
Collections & Lists1 deps
Critical
Manage Cards Panel
COLL-002
tsx3 variants
Collections & Lists1 deps
Critical
Entity Detail Page
DETAIL-001
tsx4 variants
Detail Views1 deps
Critical
Entity Breadcrumb Bar
DETAIL-002
tsx4 variants
Detail Views1 deps
Common
Activity Trail / Timeline
DETAIL-003
tsx4 variants
Detail Views
Critical
Workflow Drawer (Canonical)
WF-004
tsx5 variants
Workflows1 deps
Common
Quick Actions Bar
WF-005
tsx4 variants
Workflows1 deps
Common
Empty State Variants
WF-006
tsx4 variants
Workflows
Common
Community Hub / Dashboard
COMM-001
tsx4 variants
Community & Social2 deps
Common
Forum / Discussion Feed
COMM-002
tsx4 variants
Community & Social2 deps
Essential
Vercel + GitHub Actions CI/CD
DEVOPS-001
yaml3 variants
DevOps & Deployment
Essential
Next.js Project Scaffold
DEVOPS-002
json3 variants
DevOps & Deployment
Common
Supabase Schema + RLS Pattern
DEVOPS-003
sql3 variants
DevOps & Deployment1 deps
Essential
L1 Module Sidebar
NAV-004
tsx4 variants
Navigation2 deps
Essential
L2 Context Navigation
NAV-005
tsx4 variants
Navigation2 deps
Essential
ADMYN App Shell
LAY-004
tsx4 variants
Layout1 deps
Essential
Detail View with Manage Panel
DV-004
tsx4 variants
Detail Views1 deps
Essential
Manage Panel & Cards
DV-005
tsx4 variants
Detail Views1 deps
Essential
Workflow Drawer
WF-007
tsx5 variants
Workflows1 deps
Critical
Guided Workflow (Step Wizard)
WF-008
tsx4 variants
Workflows1 deps
Essential
Hub Page with Card Grid
COLL-003
tsx4 variants
Collections & Lists1 deps
Critical
Quick Actions & Module Bar
NAV-006
tsx4 variants
Navigation1 deps