UX Patterns for Devs
Build Better User Experiences
A collection of UX patterns for developers to build effective, accessible, and usable UI components.
Content Management
Organize and present content effectively with patterns for layout, structure, and information hierarchy.
Drag and Drop
Allow users to reorder items intuitively
Layout & Navigation
Guide users through your application with intuitive navigation patterns and clear layout structures.
Hamburger Menu
Display a menu icon for mobile devices
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
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
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
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
Input Selection Guide
Choose the right input type for your form
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