Build Better User Experiences
A collection of UX patterns for developers to build effective, accessible, and usable UI components.
Input & Forms
Create user-friendly forms and input interfaces that streamline data collection and user interaction.
Checkbox
Enable single or multiple selections
Code Confirmation
Verify codes with segmented input
Color Picker
Select colors with visual feedback
Currency Input
Enter and format monetary values
Date Input
Enter dates in a structured text format
Date Picker
Select dates from a calendar interface
Date Range
Select a range between two dates
File Input
Upload and handle files
Form Validation
Validate and provide feedback
Multi-select Input
Choose multiple items from a list
Phone Number
Format and validate phone numbers
Radio
Select a single option from a group
Rating Input
Rate something with a number of stars
Rich Text Editor
Edit and format text content
Search Field
Search through content efficiently
Signature Pad
Allow users to sign their name
Slider
Select values from a range
Tag Input
Enter and format tags
Textarea
Multi-line text input for longer content
Time Input
Enter time in a structured format
Toggle
Switch between two states
Layout & Navigation
Guide users through your application with intuitive navigation patterns and clear layout structures.
Hamburger Menu
Display a menu icon for mobile devices
Link
Create accessible and interactive links
Megamenu
Display a large number of links in a single menu
Navigation Menu
Organize and structure site navigation
Sidebar
Organize and structure site navigation
Tabs
Switch between different views
Content Management
Organize and present content effectively with patterns for layout, structure, and information hierarchy.
Drag and Drop
Allow users to reorder items intuitively
Data Display
Present data effectively with tables, charts, timelines, and other visualization patterns.
Calendar View
Display dates and events in calendar format
Card Grid
Display content in a responsive card layout
Charts & Graphs
Visualize data with graphs and charts
Comparison Table
Compare features and options side-by-side
Dashboard Layout
Comprehensive dashboard layouts
Filter Panel
Filter and refine data displays
Kanban Board
Organize tasks in columns and swimlanes
List View
Display data in vertical lists
Statistics Display
Display key metrics and statistics
Timeline
Display chronological events and activities
Tree View
Display hierarchical data structures
User Feedback
Keep users informed and engaged with responsive feedback mechanisms and clear status indicators.
Cookie Consent
Inform users about the use of cookies
Empty States
Guide users when no content is available
Loading Indicator
Show users that content is being loaded
Notification
Inform users about important updates
Progress Indicator
Show completion status of an operation
Skeleton
Show users that content is being loaded
Authentication
Secure user authentication patterns including login, registration, and account management.
Account Settings
User account configuration and preferences
Login Form
User authentication and sign-in forms
Password Reset
Password recovery and reset flows
Sign Up Flow
User registration and account creation
Social Login
OAuth and social media authentication
Two-Factor Authentication
Two-factor authentication setup and verification
User Profile
User profile and account management
AI & Intelligence
AI interaction patterns for chat interfaces, streaming responses, and intelligent features.
AI Chat Interface
Conversational AI chat interfaces
AI Error States
Handling AI-specific errors
AI Loading States
Loading states for AI operations
AI Suggestions
AI-powered autocomplete and suggestions
Context Window
Managing AI conversation context
Model Selector
AI model selection interface
Prompt Input
Enhanced text inputs for AI prompts
Response Feedback
Feedback mechanisms for AI responses
Streaming Response
Real-time AI response streaming
Token Counter
Display token usage and limits
Media
Media handling patterns for images, videos, and file uploads with rich interactions.
Image Gallery
Display and browse image collections
Image Upload
Upload and preview images
Video Player
Video playback with controls
E-commerce
Shopping and transaction patterns including product displays, carts, and checkout flows.
Checkout Flow
Multi-step checkout process
Product Card
Product display cards for e-commerce
Shopping Cart
Shopping cart and item management
Social
Social interaction patterns for comments, likes, sharing, and user engagement.
Activity Feed
Social activity and updates stream
Comment System
User comments and discussion threads
Like Button
Like and reaction buttons
Share Dialog
Social sharing functionality
Advanced
Advanced UI patterns for power users including search, wizards, and command interfaces.
Command Palette
Quick command execution interface
Search Results
Display and filter search results
Wizard / Stepper
Multi-step forms and processes
Get notified when new patterns are added!
Subscribe to our newsletter for the latest updates, new component releases, and UX pattern insights.