UX Patterns for Developers

• llms-full.txt: Expanded AI-friendly index with per-pattern skills, install commands, and reference links.

pattern-guide

• Text vs Number vs Email Input: When to Use Each HTML5 Type: Select the most appropriate HTML input type based on your data collection needs and user experience requirements
• Choose the Right Pattern: Comparison guides for common product decisions, from overlays and search to loading and data display.
• Dropdown vs Radio vs Checkbox: Choosing the Right Form Input: Learn how to select the most appropriate input types for your web forms. Get guidance on when to use text fields, dropdowns, checkboxes, and other form controls.
• Load More vs Show More vs View More vs See More: Which Button Label Should You Use?: Choose the right progressive disclosure label for loading more items, expanding hidden content, or navigating to a broader collection.
• Modal vs Drawer: Which Overlay Pattern Should You Use?: Choose between modal and drawer patterns based on task focus, context preservation, screen size, and interruption level.
• Modal vs Popover vs Tooltip: Which Overlay Pattern Should You Use?: Choose the overlay pattern that matches attention level, interaction complexity, and contextual relevance.
• Pagination vs Infinite Scroll vs Load More: Which Pattern Should You Use?: Choose the right content loading pattern based on user intent, navigation needs, SEO, and implementation trade-offs.
• Pagination vs Infinite Scroll: When to Use Each Pattern: Choose the right content loading pattern based on your user needs and content type
• Search Field vs Command Palette: Which Pattern Should You Use?: Choose between visible search and a keyboard-first command surface based on user intent, product complexity, and discoverability.
• Table vs List View vs Card Grid: Which Data Display Pattern Should You Use?: Choose the right data display pattern based on comparison needs, scanability, visual density, and device constraints.
• Tooltip vs Popover: Which Overlay Pattern Should You Use?: Choose between tooltip and popover patterns based on content length, interaction needs, trigger behavior, and accessibility risk.

patterns

• UX Books for Developers: A curated list of essential UX books to help developers improve their design and implementation skills.
• Getting Started: UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components
• Introduction to Patterns: A library of UX patterns for developers building effective, accessible, and usable interfaces.
• When to Use What?: Guide for choosing the right UI pattern for your needs
• Command Palette: Learn how to implement command palettes. Discover best practices for keyboard shortcuts, fuzzy search, and command discovery.
• Search Results: Learn how to implement search results pages. Discover best practices for result ranking, filtering, and pagination.
• Wizard / Stepper: Learn how to implement wizards and steppers. Discover best practices for multi-step forms, progress tracking, and step validation.
• AI Chat Interface: Learn how to implement AI chat interfaces. Discover best practices for message threading, context management, and conversational UX.
• AI Error States: Learn how to implement AI error states. Discover best practices for rate limits, model errors, and graceful degradation.
• AI Loading States: Learn how to implement AI-specific loading states. Discover best practices for thinking animations, progress indicators, and stream initialization.
• AI Suggestions: Learn how to implement AI suggestions. Discover best practices for predictive text, smart completions, and recommendation interfaces.
• Context Window: Learn how to implement context window management. Discover best practices for conversation history, context limits, and memory management.
• Model Selector: Learn how to implement model selectors. Discover best practices for model comparison, capability display, and settings management.
• Prompt Input: Learn how to implement prompt input interfaces. Discover best practices for multiline inputs, prompt templates, and input enhancements.
• Response Feedback: Learn how to implement response feedback. Discover best practices for ratings, regeneration, and improvement signals.
• Streaming Response: Learn how to implement streaming AI responses. Discover best practices for progressive rendering, markdown formatting, and stream interruption.
• Token Counter: Learn how to implement token counters. Discover best practices for usage indicators, limit warnings, and cost estimation.
• Account Settings: Learn how to implement account settings. Discover best practices for preference management, privacy controls, and account configuration.
• Login Form: Learn how to implement secure and user-friendly login forms. Discover best practices for authentication, password fields, and remember me functionality.
• Password Reset: Learn how to implement secure password reset functionality. Discover best practices for recovery emails, token validation, and security considerations.
• Sign Up Flow: Learn how to implement effective sign-up flows. Discover best practices for user registration, form validation, and onboarding experiences.
• Social Login: Learn how to implement social login. Discover best practices for OAuth flows, provider integration, and account linking.
• Two-Factor Authentication: Learn how to implement two-factor authentication. Discover best practices for TOTP, SMS verification, and security keys.
• User Profile: Learn how to implement user profile interfaces. Discover best practices for displaying user information, avatars, and account settings.
• Accordion: Create effective accordion components for your web applications. Learn best practices for implementing expandable content sections with proper accessibility and keyboard support.
• Carousel: 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: Build intuitive drag and drop functionality with accessibility and touch support.
• Expandable Text: Create expandable text components with progressive disclosure and accessibility features for better content management.
• Modal: Build accessible modal dialogs with proper focus management, keyboard interactions, and user experience best practices.
• Popover: Implement user-friendly popover components in your web applications. Learn best practices for contextual information display, positioning, and accessibility with practical examples.
• Tooltip: Implement effective tooltip components in your web applications. Learn best practices for contextual help, positioning strategies, and accessibility considerations.
• Calendar View: Learn how to implement calendar views. Discover best practices for date navigation, event display, and calendar interactions.
• Card Grid: Learn how to implement card grids for content display. Discover best practices for responsive layouts, card designs, and grid systems.
• Charts & Graphs: Learn how to implement accessible charts and graphs. Discover best practices for data visualization, chart types, and responsive designs.
• Comparison Table: Learn how to implement comparison tables. Discover best practices for feature comparisons, pricing tables, and decision matrices.
• Dashboard Layout: Learn how to implement dashboard layouts. Discover best practices for widget organization, responsive grids, and data visualization.
• Filter Panel: Learn how to implement filter panels for data refinement. Discover best practices for faceted search, filter UI, and dynamic filtering.
• Kanban Board: Learn how to implement kanban boards. Discover best practices for drag-and-drop, task management, and workflow visualization.
• List View: Learn how to implement list views for data display. Discover best practices for list layouts, item selection, and virtual scrolling.
• Statistics Display: Learn how to implement statistics displays. Discover best practices for metric cards, KPI dashboards, and data visualization.
• Data Table: Learn how to implement accessible and performant data tables. Discover best practices for sorting, filtering, pagination, and responsive table designs.
• Timeline: Learn how to implement timelines for showing chronological data. Discover best practices for activity feeds, history logs, and event sequences.
• Tree View: Learn how to implement tree views for hierarchical data. Discover best practices for expandable nodes, selection states, and keyboard navigation.
• Checkout Flow: Learn how to implement checkout flows. Discover best practices for payment forms, order review, and conversion optimization.
• Product Card: Learn how to implement effective product cards. Discover best practices for product images, pricing display, and quick actions.
• Shopping Cart: Learn how to implement shopping cart functionality. Discover best practices for cart management, item updates, and persistent storage.
• Autocomplete: Build user-friendly autocomplete with search suggestions, keyboard navigation, and accessibility features.
• Button: Create accessible and user-friendly buttons with proper states, design patterns, and implementation guidelines.
• Checkbox: Learn how to implement accessible checkbox inputs in your web applications. Discover best practices for multiple selection controls, states handling, and accessibility.
• Code Confirmation: Implement user-friendly code confirmation inputs for verification codes and OTPs. Learn best practices for segmented inputs, auto-focus behavior, and accessibility.
• Color Picker: Select colors with visual feedback
• Currency Input: Create currency input fields with number formatting and international currency handling.
• Date Input: Build date input fields with validation, formatting, and localization features.
• Date Picker: Create user-friendly date pickers with calendar interfaces and keyboard navigation.
• Date Range: Build date range selection with calendar interfaces and validation features.
• File Input: Create user-friendly file upload components for your web applications. Learn best practices for file selection, drag-and-drop, progress indicators, and validation.
• Form Validation: Learn how to implement effective form validation in your web applications. Discover best practices for error handling, real-time validation, and user feedback.
• Multi-select Input: Implement multi-select components for multiple item selection in your web applications. Learn best practices for list management, keyboard navigation, and accessibility.
• Password: Build secure and user-friendly password fields with validation, strength indicators, and accessibility features.
• Phone Number: Create phone number inputs with international format support and validation features.
• Radio Button: Implement accessible radio button groups in your web applications. Learn best practices for single-choice selection controls, keyboard navigation, and ARIA attributes.
• Rating Input: Build user-friendly rating components with star ratings and accessibility features.
• Rich Text Editor: Create accessible rich text editors with text formatting tools and keyboard shortcuts.
• Search Field: Learn how to implement effective search fields in your web applications. Discover best practices for search input design, real-time suggestions, and accessibility.
• Selection Input: 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: Build touch-enabled signature capture with canvas drawing and validation features.
• Slider: Learn how to implement accessible range slider inputs in your web applications. Discover best practices for continuous value selection, touch interactions, and accessibility.
• Tag Input: Create tag input components for dynamic keyword entry with validation and accessibility support.
• Text Field: Implement accessible text input fields with validation, error handling, and user experience best practices.
• Textarea: Learn how to implement accessible textarea components for collecting long-form content, comments, and detailed responses. Discover best practices for multi-line text input with proper validation and user experience.
• Time Input: Build user-friendly time input fields with validation and accessibility features.
• Toggle: Implement toggle switches for binary state control in your web applications. Learn best practices for toggle buttons, state management, and accessibility.
• Image Gallery: Learn how to implement image galleries. Discover best practices for lightboxes, thumbnails, and image navigation.
• Image Upload: Learn how to implement image upload interfaces. Discover best practices for drag-and-drop, preview, and validation.
• Video Player: Learn how to implement video players. Discover best practices for playback controls, captions, and responsive video.
• Back to Top: Implement a Back to Top button for enhanced navigation on long pages with best practices for placement and accessibility.
• Breadcrumb: Create effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation.
• Hamburger Menu: Create accessible mobile menus with smooth animations and touch-friendly interactions.
• Infinite scroll: Create seamless content loading with infinite scroll, focusing on performance, accessibility, and user experience best practices.
• Link: Build accessible links with proper styling, hover states, and keyboard navigation support.
• Load More: Build efficient content loading with the Load More pattern, focusing on user experience and performance optimization.
• Megamenu: Build accessible and responsive megamenus with keyboard navigation and mobile-friendly adaptations.
• Navigation Menu: Build effective navigation menus for your website. Learn best practices for creating accessible, responsive navigation with proper keyboard support and mobile-friendly interactions.
• Pagination: Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design and performance.
• Sidebar: Build responsive and accessible sidebar navigation with collapsible sections and keyboard navigation support.
• Tabs: Create accessible tab interfaces with keyboard navigation, ARIA attributes, and responsive design patterns.
• Activity Feed: Learn how to implement activity feeds. Discover best practices for real-time updates, infinite scrolling, and engagement tracking.
• Comment System: Learn how to implement comment systems. Discover best practices for threaded discussions, moderation, and user interactions.
• Like Button: Learn how to implement like buttons and reactions. Discover best practices for engagement tracking, animations, and accessibility.
• Share Dialog: Learn how to implement share dialogs. Discover best practices for social media integration, copy links, and sharing analytics.
• Cookie Consent: Implement effective cookie consent banners in your web applications. Learn best practices for GDPR compliance, user privacy, and consent management.
• Empty States: Create effective empty state experiences in your web applications. Learn best practices for handling no-content scenarios with helpful messaging and clear actions.
• Loading Indicator: Build effective loading indicators for your web applications. Learn best practices for implementing loading states, spinners, and progress feedback with proper accessibility.
• Notification: Implement effective notification systems in your web applications. Learn best practices for toast messages, alerts, and user notifications with proper timing and accessibility.
• Progress Indicator: Create effective progress indicators for your web applications. Learn best practices for implementing progress bars, step indicators, and completion feedback with proper accessibility.
• Skeleton: Build effective skeleton loading states for your web applications. Learn best practices for implementing content placeholders and loading animations with proper accessibility.

glossary

• UX Patterns Glossary: A comprehensive glossary of UX patterns, design principles, and web development terminology.
• ARIA Attributes: HTML attributes that provide accessibility information to assistive technologies
• Canonical Tags: HTML elements that specify the preferred URL for duplicate or similar content to prevent SEO issues
• CLS (Cumulative Layout Shift): A Core Web Vital metric that measures visual stability by quantifying unexpected layout shifts during page load
• Design Tokens: Platform-agnostic variables that store design decisions for consistent implementation across products and teams
• DOM (Document Object Model): A programming interface that represents HTML and XML documents as a tree structure, allowing JavaScript to interact with and modify page content
• Keyboard Navigation: The ability to navigate and interact with a website or application using only keyboard input, without requiring a mouse
• Lazy Loading: A performance optimization technique that delays loading of non-critical resources until they are needed
• Live Regions: ARIA attributes that announce dynamic content changes to screen reader users without requiring focus
• Pagination: A navigation pattern that divides content into separate pages to improve usability and performance
• Progressive Loading: A technique that loads content gradually to improve initial page load times and user experience
• Screen Reader: Assistive technology that converts digital text and interface elements into speech or braille output for users with visual impairments
• Semantic HTML: HTML elements that carry meaning about their content structure and purpose
• Skeleton Screen: A loading state UI pattern that displays placeholder content shapes while actual content is being fetched
• Throttle and Debounce: Performance optimization techniques that limit how often a function can be executed in response to continuous events
• Touch Targets: Interactive UI elements sized and spaced appropriately for touch interaction on mobile devices
• Viewport: The visible area of a web page within a browser window or mobile device screen