UX Patterns for Devs

🎨 A comprehensive collection of UX patterns for developers who want to build effective, accessible, and usable UI components.

View Documentation · Report Bug · Request Pattern

✨ Features

• 📚 Comprehensive Documentation: Detailed guides for each pattern with best practices
• ♿️ Accessibility-First: Every pattern follows WCAG guidelines and includes ARIA best practices
• 🎯 Real-World Examples: Interactive examples and code snippets you can copy and use
• 🔍 SEO Optimized: Guidelines for making each pattern search-engine friendly
• 📱 Responsive Patterns: Mobile-first approach with cross-device compatibility
• 🎨 Design Tokens: Customizable design system integration
• 📊 Analytics Ready: Built-in tracking recommendations for each pattern
• 🌍 Internationalization: i18n considerations and best practices
• ⚡️ Performance Focused: Optimization guidelines for each component

🎯 Available Patterns

Note

This project is a work in progress. New content and updates should be expected regularly.

This is an updated list of available and incoming patterns.

Content Management

Accordion

Expand and collapse content sections

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready}

Create effective accordion components for your web applications. Learn best practices for implementing expandable content sections with proper accessibility and keyboard support.

Carousel

Display multiple items in a rotating view

_{🛠️ Complex implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Build effective carousel components for your web applications. Learn best practices for implementing accessible, responsive carousels with proper navigation and touch support.

Drag And Drop

Coming soon

Expandable Text

Show or hide additional text content on demand

_{⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Create expandable text components with progressive disclosure and accessibility features for better content management.

Modal

Display focused content or actions

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Build accessible modal dialogs with proper focus management, keyboard interactions, and user experience best practices.

Popover

Display focused content or actions

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Implement user-friendly popover components in your web applications. Learn best practices for contextual information display, positioning, and accessibility with practical examples.

Tooltip

Provide additional context on hover or focus

_{⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Implement effective tooltip components in your web applications. Learn best practices for contextual help, positioning strategies, and accessibility considerations.

Forms

Autocomplete

Suggest options as users type

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 💻 Examples}

Build user-friendly autocomplete with search suggestions, keyboard navigation, and accessibility features.

Button

Trigger actions and submit forms

_{⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Create accessible and user-friendly buttons with proper states, design patterns, and implementation guidelines.

Checkbox

Coming soon

Code Confirmation

Coming soon

Color Picker

Coming soon

Currency Input

Coming soon

Date Input

Coming soon

Date Picker

Coming soon

Date Range

Coming soon

File Input

Coming soon

Form Validation

Coming soon

Input Selection Guide

Coming soon

Multi Select Input

Coming soon

Password

Secure password entry with feedback

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1}

Build secure and user-friendly password fields with validation, strength indicators, and accessibility features.

Phone Number

Coming soon

Radio

Coming soon

Rating Input

Coming soon

Rich Text Editor

Coming soon

Search Field

Coming soon

Selection Input

Choose from predefined options

_{📚 Full guide • ♿️ WCAG 2.1 • 💻 Examples}

Learn how to implement user-friendly selection inputs in your web applications. Discover best practices for dropdowns, comboboxes, and list boxes with accessibility and usability guidelines.

Signature Pad

Coming soon

Slider

Coming soon

Tag Input

Coming soon

Text Field

Enter and edit text content

_{⚡️ Simple implementation • 📚 Full guide • 📱 Mobile-ready • 💻 Examples}

Implement accessible text input fields with validation, error handling, and user experience best practices.

Textarea

Coming soon

Time Input

Coming soon

Toggle

Coming soon

Navigation

Back To Top

Quickly navigate back to the top of the page

_{⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Implement a Back to Top button for enhanced navigation on long pages with best practices for placement and accessibility.

Breadcrumb

Help users understand their current location

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Create effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation.

Hambuger Menu

Coming soon

Infinite Scroll

Loads additional content automatically as users scroll down.

_{🛠️ Complex implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready}

Create seamless content loading with infinite scroll, focusing on performance, accessibility, and user experience best practices.

Load More

Load additional content on user demand

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready}

Build efficient content loading with the Load More pattern, focusing on user experience and performance optimization.

Megamenu

Coming soon

Navigation Menu

Coming soon

Pagination

Navigate through multiple pages of content

_{🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples}

Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design and performance.

Sidebar

Coming soon

Tabs

Coming soon

User Feedback

Cookie Consent

Coming soon

Empty States

Coming soon

Loading Indicator

Coming soon

Notification

Coming soon

Progress Indicator

Coming soon

Skeleton

Coming soon

Getting Started

To start the project locally, run:

pnpm run dev

Generate new pattern

This command will generate a new pattern template. Simply specify the language, the category and the name of the pattern starting with a capital letter.

pnpm run generate

✨ Contributors

You are welcome to contribute to this project!

• 🐛 Report bugs
• 💡 Suggest new patterns
• 📝 Improve documentation
• 🔧 Submit pull requests

Please read our Contributing Guide before submitting a pull request.

📄 Dual License

This project is available under a dual license:

1. MIT License (Non-Commercial)

• ✅ Free for personal use and non-commercial projects
• ✅ Attribution required
• ✅ Modifications and distributions allowed
• ❌ Commercial use not permitted
• View MIT License Details

2. Commercial License

• 💼 Required for commercial use
• 🏢 Suitable for businesses and commercial projects
• 🔒 Includes additional rights and support
• View Commercial License Details

---

If you find this project useful, please consider giving it a ⭐️