https://github.com/thedaviddias/ux-patterns-for-developers
🧩 Collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable.
https://github.com/thedaviddias/ux-patterns-for-developers
best-practices documentation-website frontend patterns ux ux-design ux-patterns web-design web-development
Last synced: 12 months ago
JSON representation
🧩 Collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable.
- Host: GitHub
- URL: https://github.com/thedaviddias/ux-patterns-for-developers
- Owner: thedaviddias
- License: other
- Created: 2024-12-07T19:31:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-23T12:09:47.000Z (over 1 year ago)
- Last Synced: 2025-03-23T13:20:54.593Z (over 1 year ago)
- Topics: best-practices, documentation-website, frontend, patterns, ux, ux-design, ux-patterns, web-design, web-development
- Language: MDX
- Homepage: https://uxpatterns.dev
- Size: 16.6 MB
- Stars: 61
- Watchers: 2
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/funding.yml
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# UX Patterns for Devs
🎨 A comprehensive collection of UX patterns for developers who want to build effective, accessible, and usable UI components.
[](https://opensource.org/licenses/MIT)
[](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)
[](https://github.com/thedaviddias/ux-patterns-for-developers)
[](https://twitter.com/thedaviddias)
[View Documentation](https://uxpatterns.dev) · [Report Bug](https://github.com/thedaviddias/ux-patterns-for-developers/issues) · [Request Pattern](https://github.com/thedaviddias/ux-patterns-for-developers/issues/new)
## ✨ 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](https://uxpatterns.dev/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](https://uxpatterns.dev/patterns/content-management/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](https://uxpatterns.dev/patterns/content-management/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](https://uxpatterns.dev/patterns/content-management/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](https://uxpatterns.dev/patterns/content-management/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](https://uxpatterns.dev/patterns/content-management/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](https://uxpatterns.dev/patterns/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](https://uxpatterns.dev/patterns/forms/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](https://uxpatterns.dev/patterns/forms/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](https://uxpatterns.dev/patterns/forms/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](https://uxpatterns.dev/patterns/forms/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](https://uxpatterns.dev/patterns/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](https://uxpatterns.dev/patterns/navigation/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](https://uxpatterns.dev/patterns/navigation/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](https://uxpatterns.dev/patterns/navigation/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](https://uxpatterns.dev/patterns/navigation/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:
```bash
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.
```bash
pnpm run generate
```
## ✨ Contributors
You are welcome to contribute to this project!
- 🐛 [Report bugs](https://github.com/thedaviddias/ux-patterns-for-developers/issues)
- 💡 [Suggest new patterns](https://github.com/thedaviddias/ux-patterns-for-developers/issues/new)
- 📝 [Improve documentation](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)
- 🔧 [Submit pull requests](https://github.com/thedaviddias/ux-patterns-for-developers/pulls)
Please read our [Contributing Guide](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md) 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](./LICENCE.md)
### 2. Commercial License
- 💼 Required for commercial use
- 🏢 Suitable for businesses and commercial projects
- 🔒 Includes additional rights and support
- [View Commercial License Details](.github/COMMERCIAL-LICENSE.md)
---
If you find this project useful, please consider giving it a ⭐️