Choose a UI Pattern to Learn
Explore interactive examples of common UI design patterns. Each pattern includes working demos and clean, readable code examples.
📁Getting Input
Forms
Collect user input with validation and feedback
Structured Format
Format input with specific patterns
Autosave
Automatically save user progress
Rule Builder
Create complex rules and conditions
Keyboard Shortcuts
Power user keyboard navigation
Captcha
Verify human users
Drag and Drop
Intuitive drag and drop interactions
Inplace Editor
Edit content directly in context
Preview
Show live previews of changes
Morphing Controls
Controls that transform based on context
Password Strength Meter
Visual password security feedback
Fill in the Blanks
Interactive form completion
WYSIWYG
What you see is what you get editor
Input Feedback
Real-time input validation
Calendar Picker
Date and time selection
Expandable Input
Inputs that grow with content
Settings
User preferences and configuration
Forgiving Format
Accept various input formats
Undo
Reverse user actions
Input Prompt
Guide users with helpful prompts
Good Defaults
Smart default values
📁Explaining the Process
📁Navigation
Tabs
Organize content into sections
Navigation Tabs
Primary navigation tabs
Module Tabs
Secondary content tabs
Jumping in Hierarchy
Skip to different levels
Breadcrumbs
Show current location
Shortcut Dropdown
Quick access dropdown
Fat Footer
Comprehensive footer navigation
Modal
Overlay dialogs and forms
Notifications
System and user notifications
Home Link
Return to main page
Menus
Dropdown and context menus
Vertical Dropdown Menu
Vertical menu layouts
Accordion Menu
Expandable menu sections
Horizontal Dropdown Menu
Horizontal menu layouts
📁Content
Adaptable View
Responsive content layouts
Article List
List of articles and posts
Pagination
Navigate through pages
Tagging
Add labels and categories
Categorization
Organize content by type
Tag Cloud
Visual tag representation
Cards
Content in card format
Carousel
Rotating content slides
Progressive Disclosure
Reveal content gradually
Continuous Scrolling
Infinite scroll content
Event Calendar
Calendar with events
Archive
Historical content access
Thumbnail
Small preview images
Favorites
Save and bookmark content
📁Gestures
Pull to Refresh
Refresh content with gestures
Swipe Actions
Reveal actions with swipe gestures
Pinch to Zoom
Zoom content with pinch gestures
Long Press
Trigger actions with long press
Double Tap
Quick actions with double tap
Swipe Navigation
Navigate between pages with swipes
Drag to Reorder
Reorder items with drag gestures
Tap to Expand
Expand content with tap gestures
📁Dealing with Data
Tables
Organize data in rows and columns
Sort By Column
Sort table data
Table Filter
Filter table data
Alternating Row Colors
Improve table readability
Formatting Data
Format data for display
FAQ
Frequently asked questions
Dashboard
Overview of key metrics
Copy Box
Copy content to clipboard