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}

Learn how to implement expandable text components in your web applications. Discover best practices for progressive disclosure, accessibility, and user experience with practical examples.

Modal

Display focused content or actions

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

Create effective modal dialogs for your web applications. Learn best practices for implementing accessible modal windows with proper focus management and keyboard interactions.

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}

Implement user-friendly autocomplete functionality in your web applications. Learn best practices for search suggestions, keyboard navigation, and accessibility with practical examples.

Button

Trigger actions and submit forms

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

Learn how to implement accessible and user-friendly buttons in your web applications. Discover best practices for button design, states, accessibility, and implementation with code examples and 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}

Implement secure and user-friendly password fields in your web applications. Learn best practices for password validation, strength indicators, and accessibility with practical examples.

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}

Learn how to implement accessible text input fields in your web applications. Discover best practices for validation, error handling, and user experience with practical examples.

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}

Learn how to implement a Back to Top button pattern to enhance user navigation on long pages. Discover best practices for placement, accessibility, and user experience with code examples and implementation guidelines.

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}

Implement infinite scroll for seamless content loading in your web applications. Learn best practices for performance, accessibility, and user experience with practical code examples.

Load More

Load additional content on user demand

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

Learn how to implement a Load More pattern for efficient content pagination. Discover best practices for user experience, accessibility, and performance when loading content incrementally.

Megamenu

Coming soon

Navigation Menu

Coming soon

Pagination

Navigate through multiple pages of content

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

Master pagination implementation in web applications. Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design, accessibility, 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 ⭐️