{"id":29687410,"url":"https://github.com/thedaviddias/ux-patterns-for-developers","last_synced_at":"2025-07-23T04:37:17.175Z","repository":{"id":267071488,"uuid":"900071219","full_name":"thedaviddias/ux-patterns-for-developers","owner":"thedaviddias","description":"🧩 Collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable.","archived":false,"fork":false,"pushed_at":"2025-03-23T12:09:47.000Z","size":17407,"stargazers_count":61,"open_issues_count":7,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-23T13:20:54.593Z","etag":null,"topics":["best-practices","documentation-website","frontend","patterns","ux","ux-design","ux-patterns","web-design","web-development"],"latest_commit_sha":null,"homepage":"https://uxpatterns.dev","language":"MDX","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thedaviddias.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/funding.yml","license":null,"code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"thedaviddias"}},"created_at":"2024-12-07T19:31:24.000Z","updated_at":"2025-03-23T12:08:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"d4efdfde-08b6-4faa-ab15-3c93f210820c","html_url":"https://github.com/thedaviddias/ux-patterns-for-developers","commit_stats":null,"previous_names":["thedaviddias/ux-patterns-for-developers"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thedaviddias/ux-patterns-for-developers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedaviddias%2Fux-patterns-for-developers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedaviddias%2Fux-patterns-for-developers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedaviddias%2Fux-patterns-for-developers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedaviddias%2Fux-patterns-for-developers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedaviddias","download_url":"https://codeload.github.com/thedaviddias/ux-patterns-for-developers/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedaviddias%2Fux-patterns-for-developers/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266619199,"owners_count":23957274,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-23T02:00:09.312Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["best-practices","documentation-website","frontend","patterns","ux","ux-design","ux-patterns","web-design","web-development"],"created_at":"2025-07-23T04:37:05.680Z","updated_at":"2025-07-23T04:37:17.157Z","avatar_url":"https://github.com/thedaviddias.png","language":"MDX","funding_links":["https://github.com/sponsors/thedaviddias"],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# UX Patterns for Devs\n\n🎨 A comprehensive collection of UX patterns for developers who want to build effective, accessible, and usable UI components.\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Contributions Welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)\n[![GitHub Stars](https://img.shields.io/github/stars/thedaviddias/ux-patterns-for-developers?style=social)](https://github.com/thedaviddias/ux-patterns-for-developers)\n[![Twitter Follow](https://img.shields.io/twitter/follow/thedaviddias?style=social)](https://twitter.com/thedaviddias)\n\n[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)\n\n![Screenshot of the homepage of UX Patterns for Devs](https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/public/img/ux-patterns-developers-2.jpeg)\n\n\u003c/div\u003e\n\n## ✨ Features\n\n- 📚 **Comprehensive Documentation**: Detailed guides for each pattern with best practices\n- ♿️ **Accessibility-First**: Every pattern follows WCAG guidelines and includes ARIA best practices\n- 🎯 **Real-World Examples**: Interactive examples and code snippets you can copy and use\n- 🔍 **SEO Optimized**: Guidelines for making each pattern search-engine friendly\n- 📱 **Responsive Patterns**: Mobile-first approach with cross-device compatibility\n- 🎨 **Design Tokens**: Customizable design system integration\n- 📊 **Analytics Ready**: Built-in tracking recommendations for each pattern\n- 🌍 **Internationalization**: i18n considerations and best practices\n- ⚡️ **Performance Focused**: Optimization guidelines for each component\n\n## 🎯 Available Patterns\n\n\u003e [!NOTE]\n\u003e This project is a work in progress. New content and updates should be expected regularly.\n\n\u003c!-- PATTERNS-LIST:START - Do not remove or modify this section --\u003e\n\nThis is an updated list of available and incoming patterns.\n\n### Content Management\n\n#### [Accordion](https://uxpatterns.dev/patterns/content-management/accordion)\n\n\u003e Expand and collapse content sections\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready\u003c/sub\u003e\n\nCreate effective accordion components for your web applications. Learn best practices for implementing expandable content sections with proper accessibility and keyboard support.\n\n#### [Carousel](https://uxpatterns.dev/patterns/content-management/carousel)\n\n\u003e Display multiple items in a rotating view\n\n\u003csub\u003e🛠️ Complex implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nBuild effective carousel components for your web applications. Learn best practices for implementing accessible, responsive carousels with proper navigation and touch support.\n\n#### Drag And Drop\n\n\u003e Coming soon\n\n#### [Expandable Text](https://uxpatterns.dev/patterns/content-management/expandable-text)\n\n\u003e Show or hide additional text content on demand\n\n\u003csub\u003e⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nLearn how to implement expandable text components in your web applications. Discover best practices for progressive disclosure, accessibility, and user experience with practical examples.\n\n#### [Modal](https://uxpatterns.dev/patterns/content-management/modal)\n\n\u003e Display focused content or actions\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nCreate effective modal dialogs for your web applications. Learn best practices for implementing accessible modal windows with proper focus management and keyboard interactions.\n\n#### [Popover](https://uxpatterns.dev/patterns/content-management/popover)\n\n\u003e Display focused content or actions\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nImplement user-friendly popover components in your web applications. Learn best practices for contextual information display, positioning, and accessibility with practical examples.\n\n#### [Tooltip](https://uxpatterns.dev/patterns/content-management/tooltip)\n\n\u003e Provide additional context on hover or focus\n\n\u003csub\u003e⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nImplement effective tooltip components in your web applications. Learn best practices for contextual help, positioning strategies, and accessibility considerations.\n\n### Forms\n\n#### [Autocomplete](https://uxpatterns.dev/patterns/forms/autocomplete)\n\n\u003e Suggest options as users type\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 💻 Examples\u003c/sub\u003e\n\nImplement user-friendly autocomplete functionality in your web applications. Learn best practices for search suggestions, keyboard navigation, and accessibility with practical examples.\n\n#### [Button](https://uxpatterns.dev/patterns/forms/button)\n\n\u003e Trigger actions and submit forms\n\n\u003csub\u003e⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nLearn 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.\n\n#### Checkbox\n\n\u003e Coming soon\n\n#### Code Confirmation\n\n\u003e Coming soon\n\n#### Color Picker\n\n\u003e Coming soon\n\n#### Currency Input\n\n\u003e Coming soon\n\n#### Date Input\n\n\u003e Coming soon\n\n#### Date Picker\n\n\u003e Coming soon\n\n#### Date Range\n\n\u003e Coming soon\n\n#### File Input\n\n\u003e Coming soon\n\n#### Form Validation\n\n\u003e Coming soon\n\n#### Input Selection Guide\n\n\u003e Coming soon\n\n#### Multi Select Input\n\n\u003e Coming soon\n\n#### [Password](https://uxpatterns.dev/patterns/forms/password)\n\n\u003e Secure password entry with feedback\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1\u003c/sub\u003e\n\nImplement secure and user-friendly password fields in your web applications. Learn best practices for password validation, strength indicators, and accessibility with practical examples.\n\n#### Phone Number\n\n\u003e Coming soon\n\n#### Radio\n\n\u003e Coming soon\n\n#### Rating Input\n\n\u003e Coming soon\n\n#### Rich Text Editor\n\n\u003e Coming soon\n\n#### Search Field\n\n\u003e Coming soon\n\n#### [Selection Input](https://uxpatterns.dev/patterns/forms/selection-input)\n\n\u003e Choose from predefined options\n\n\u003csub\u003e📚 Full guide • ♿️ WCAG 2.1 • 💻 Examples\u003c/sub\u003e\n\nLearn 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.\n\n#### Signature Pad\n\n\u003e Coming soon\n\n#### Slider\n\n\u003e Coming soon\n\n#### Tag Input\n\n\u003e Coming soon\n\n#### [Text Field](https://uxpatterns.dev/patterns/forms/text-field)\n\n\u003e Enter and edit text content\n\n\u003csub\u003e⚡️ Simple implementation • 📚 Full guide • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nLearn how to implement accessible text input fields in your web applications. Discover best practices for validation, error handling, and user experience with practical examples.\n\n#### Time Input\n\n\u003e Coming soon\n\n#### Toggle\n\n\u003e Coming soon\n\n### Navigation\n\n#### [Back To Top](https://uxpatterns.dev/patterns/navigation/back-to-top)\n\n\u003e Quickly navigate back to the top of the page\n\n\u003csub\u003e⚡️ Simple implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nLearn 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.\n\n#### [Breadcrumb](https://uxpatterns.dev/patterns/navigation/breadcrumb)\n\n\u003e Help users understand their current location\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nCreate effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation.\n\n#### Hambuger Menu\n\n\u003e Coming soon\n\n#### [Infinite Scroll](https://uxpatterns.dev/patterns/navigation/infinite-scroll)\n\n\u003e Loads additional content automatically as users scroll down.\n\n\u003csub\u003e🛠️ Complex implementation • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready\u003c/sub\u003e\n\nImplement infinite scroll for seamless content loading in your web applications. Learn best practices for performance, accessibility, and user experience with practical code examples.\n\n#### [Load More](https://uxpatterns.dev/patterns/navigation/load-more)\n\n\u003e Load additional content on user demand\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready\u003c/sub\u003e\n\nLearn how to implement a Load More pattern for efficient content pagination. Discover best practices for user experience, accessibility, and performance when loading content incrementally.\n\n#### Megamenu\n\n\u003e Coming soon\n\n#### Navigation Menu\n\n\u003e Coming soon\n\n#### [Pagination](https://uxpatterns.dev/patterns/navigation/pagination)\n\n\u003e Navigate through multiple pages of content\n\n\u003csub\u003e🔧 Moderate complexity • 📚 Full guide • ♿️ WCAG 2.1 • 📱 Mobile-ready • 💻 Examples\u003c/sub\u003e\n\nMaster pagination implementation in web applications. Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design, accessibility, and performance.\n\n#### Sidebar\n\n\u003e Coming soon\n\n#### Tabs\n\n\u003e Coming soon\n\n### User Feedback\n\n#### Cookie Consent\n\n\u003e Coming soon\n\n#### Empty States\n\n\u003e Coming soon\n\n#### Loading Indicator\n\n\u003e Coming soon\n\n#### Notification\n\n\u003e Coming soon\n\n#### Progress Indicator\n\n\u003e Coming soon\n\n#### Skeleton\n\n\u003e Coming soon\n\n\u003c!-- PATTERNS-LIST:END --\u003e\n\n## Getting Started\n\nTo start the project locally, run:\n\n```bash\npnpm run dev\n```\n\n### Generate new pattern\n\nThis command will generate a new pattern template. Simply specify the language, the category and the name of the pattern starting with a capital letter.\n\n```bash\npnpm run generate\n```\n\n## ✨ Contributors\n\nYou are welcome to contribute to this project!\n\n- 🐛 [Report bugs](https://github.com/thedaviddias/ux-patterns-for-developers/issues)\n- 💡 [Suggest new patterns](https://github.com/thedaviddias/ux-patterns-for-developers/issues/new)\n- 📝 [Improve documentation](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md)\n- 🔧 [Submit pull requests](https://github.com/thedaviddias/ux-patterns-for-developers/pulls)\n\nPlease read our [Contributing Guide](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md) before submitting a pull request.\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n## 📄 Dual License\n\nThis project is available under a dual license:\n\n### 1. MIT License (Non-Commercial)\n\n- ✅ Free for personal use and non-commercial projects\n- ✅ Attribution required\n- ✅ Modifications and distributions allowed\n- ❌ Commercial use not permitted\n- [View MIT License Details](./LICENCE.md)\n\n### 2. Commercial License\n\n- 💼 Required for commercial use\n- 🏢 Suitable for businesses and commercial projects\n- 🔒 Includes additional rights and support\n- [View Commercial License Details](.github/COMMERCIAL-LICENSE.md)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\nIf you find this project useful, please consider giving it a ⭐️\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedaviddias%2Fux-patterns-for-developers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedaviddias%2Fux-patterns-for-developers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedaviddias%2Fux-patterns-for-developers/lists"}