The final part of the patterns series: a library of the UI patterns you will actually use on web and mobile, grouped so you can find them fast.
UI patterns are recognized, recurring interface solutions users already understand, like cards, modals, breadcrumbs, accordions and shopping carts. This library groups 60+ of them by purpose: communication, content, e-commerce, forms, interaction, navigation, security, social and user-related. Unlike UX patterns, UI patterns are visual and belong in a design system.
This closes the three-part series that began with UX patterns: how to take advantage of them and the UX pattern library. It covers web and mobile only; physical, haptic and aural patterns are out of scope here. Categorization is adapted from the excellent UI Patterns site.
The UI pattern library
| Pattern | Definition | Category |
|---|---|---|
| Chat | Real-time messaging between users or with a chatbot. | Communication |
| Notifications | Alerts that inform users of updates, events or actions. | Communication |
| Archive | A collection of past content, often by date or topic. | Content |
| Categorization | Grouping content by shared characteristics. | Content |
| Sort By Column | Arranging content by a chosen column or criterion. | Content |
| Tag Cloud | A visual cluster of tags for discovery. | Content |
| Tagging | Assigning keywords to content for retrieval. | Content |
| Article List | A structured list of posts in chronological or thematic order. | Content |
| Cards | Content containers with title, image and short text. | Content |
| Carousel | A rotating series of images or items, space-efficient. | Content |
| Event Calendar | A calendar of scheduled events or activities. | Content |
| Gallery | A display of images or media with thumbnails. | Content |
| Pagination | Splitting content into numbered pages. | Content |
| Slideshow | An auto-cycling display of images or content. | Content |
| Structured Format | Well-organized content for readability. | Content |
| Thumbnail | A small preview image of larger content. | Content |
| Search Filters | Criteria users apply to refine search results. | Content |
| Table Filter | Filtering and refining data within a table. | Content |
| Cart | A container of selected items for purchase. | E-commerce |
| Coupon | A discount code applied at checkout. | E-commerce |
| Checkout Process | Where customers finalize a purchase (shipping, billing, payment). | E-commerce |
| Order Confirmation | Final step summarizing the purchase and order number. | E-commerce |
| Payment Options | The methods available to complete a purchase. | E-commerce |
| Paywall | Restricting premium content behind payment. | E-commerce |
| Pricing Table | A visual comparison of pricing plans. | E-commerce |
| Product Page | A detailed page for a specific product. | E-commerce |
| Product Recommendations | Automated suggestions based on user data. | E-commerce |
| Quick View | Previewing product details in a modal without leaving the page. | E-commerce |
| Wishlist | Saving desired items for future reference. | E-commerce |
| Calendar Picker | Selecting dates from a calendar view. | Forms |
| Copy Box | One-click copying of text or code. | Forms |
| Expandable Input | An input field that grows with content. | Forms |
| Autocomplete | Real-time suggestions as the user types. | Forms |
| Input Feedback | Cues showing the status or correctness of input. | Forms |
| Input Prompt | Label or placeholder guiding what to enter. | Forms |
| Completeness Meter | A progress indicator for a task or profile. | Interaction |
| Drag and Drop | Moving objects by clicking and dragging. | Interaction |
| Image Zoom | Enlarging images for a closer look. | Interaction |
| Modal | A temporary overlay that needs interaction before returning. | Interaction |
| Morphing Controls | Elements that transform during interaction (Dorve’s signature homepage shapes). | Interaction |
| Progressive Disclosure | Revealing information gradually to avoid overload. | Interaction |
| Breadcrumbs | Showing the user’s path in a hierarchy. | Navigation |
| Fat Footer | An expanded footer with extra links and navigation. | Navigation |
| Home Link | A direct link back to the homepage. | Navigation |
| Horizontal Dropdown Menu | A menu that expands horizontally to reveal options. | Navigation |
| Module Tabs | Tabs organizing content into modules. | Navigation |
| Navigation Tabs | Tabs for moving between sections or pages. | Navigation |
| Vertical Dropdown Menu | A menu that expands vertically to reveal options. | Navigation |
| Accordion | A collapsible element that hides content until selected. | Navigation |
| Captcha | A challenge to tell humans from bots. | Security |
| Password Strength Meter | An indicator of password strength. | Security |
| Follow | Subscribing to another user’s updates. | Social |
| Friend | Adding a user as a mutual connection. | Social |
| Reaction | Expressing a response with emojis or reactions. | Social |
| Settings | Where users customize preferences and options. | User |
| Rate Content | Letting users rate content, products or services. | User |
| Account Registration | Creating an account or profile. | User |
| Blank Slate | An empty state that guides users on how to begin. | User |
| Coachmarks | Highlighted on-screen cues guiding new users. | User |
| Inline Hints | Small contextual tips within the interface. | User |
| Playthrough | A step-by-step interactive learning experience. | User |
| Walkthrough | A guided tour introducing app features. | User |
| Favorites | Marking and saving items for easy access. | User |
A recognized, recurring interface solution that users already understand, such as a card, modal, breadcrumb or shopping cart. It solves a common design problem in a predictable way.
An element is a single component, like a button or a font. A pattern is a recurring, recognizable way of arranging and using elements to solve a problem.
Communication, content, e-commerce, forms, interaction, navigation, security, social and user-related patterns.
Yes. Unlike UX patterns, UI patterns are visual and belong in a design system so teams can reuse them consistently.
Cards, modals, accordions, breadcrumbs, autocomplete, carts, checkout flows and progressive disclosure appear in almost every product.
Want a design system built on proven patterns your devs can reuse? Talk to Dorve.
Start a project