Avatar ui-001
A small circular image showing a user's photo or initials.
Reference · UX pattern catalogueGeneral interface patterns
72 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/ui-patterns.json.
Data
Badge ui-002
A small colored label showing status or category. Use for status indicators, counts, or tags.
Calendar ui-003
A month grid showing dates. Use for inline date selection or scheduling displays.
Card ui-004
A bordered box containing related information. Use for product displays, content previews, or dashboard widgets.
Carousel ui-005
A sliding gallery showing one item at a time with navigation arrows. Use sparingly.
Chart ui-006
A visual graph showing data trends and comparisons. Always provide a table alternative for accessibility.
Data Table ui-007
A table with sorting, filtering, and pagination. Use for structured data with 5+ columns.
Table ui-008
A simple table for displaying rows of data. Use for static displays, comparison tables, or pricing.
Progress ui-009
A bar showing how far along a task is. Use for file uploads, multi-step processes, or loading.
Skeleton ui-010
A placeholder shape that shows where content will appear while loading. Replaces spinners for layout-aware loading.
Navigation
Breadcrumb ui-011
A trail showing where you are in the site hierarchy.
Command ui-012
A keyboard-triggered search box for finding actions and content quickly (Ctrl/Cmd+K).
Dropdown Menu ui-013
A menu that appears when you click a button, showing a list of actions.
Menubar ui-014
A horizontal bar of menus like File, Edit, View — for complex desktop-style applications.
Navigation Menu ui-015
The main site navigation with links and optional dropdown sections.
Pagination ui-016
Page numbers for navigating between pages of a long list. Default choice over infinite scroll.
Sidebar ui-017
A navigation panel on the left side of the screen. Use for dashboard apps and admin panels.
Tabs ui-018
Tabs along the top that switch between different content sections.
Feedback
Alert ui-019
A colored banner showing an important inline message — warnings, success, errors, or info.
Alert Dialog ui-020
A popup asking you to confirm a significant action before it happens. Use for destructive or irreversible operations.
Sonner (Toast) ui-021
A small popup message that appears briefly and disappears. Use for action confirmations and non-critical errors.
Empty State ui-022
A friendly message shown when there's no data yet, with a clear next step. Never show a blank page.
Overlay
Dialog ui-023
A popup window that appears on top of the page with a backdrop. Focus is trapped inside until closed.
Drawer ui-024
A panel that slides in from the bottom or side. Great for mobile-friendly detail views and filters.
Popover ui-025
A small floating panel next to a button. Use for rich tooltips, mini-forms, or extra controls.
Sheet ui-026
A panel that slides in from the side. Use for settings, detail views, or shopping carts.
Tooltip ui-027
A small label that appears on hover or focus. Use for icon-only buttons or additional context.
Context Menu ui-028
A menu that appears on right-click. Use for desktop app-like interfaces. Always provide alternative access.
Hover Card ui-029
A preview card that appears when you hover over a link. Use for user profiles or entity summaries.
Layout
Accordion ui-030
Sections that expand and collapse when you click their headings. Use for FAQs or grouped settings.
Aspect Ratio ui-031
A container that keeps images or videos at the right proportions regardless of screen size.
Collapsible ui-032
A section you can expand or collapse with a single toggle. Use for optional details or advanced options.
Resizable ui-033
A divider between panels you can drag to resize. Use for code editors or comparison views.
Scroll Area ui-034
A container with custom scrollbars for overflowing content like chat windows or code blocks.
Separator ui-035
A visual line separating sections of content. Use between content groups or menu sections.
Interaction
Optimistic UI ui-036
Updates the interface instantly when you perform an action. If something goes wrong on the server, it quietly retries or rolls back.
Skeleton Loading ui-037
Shows the page shape while content loads, so the layout doesn't jump around when data arrives.
Import on Interaction ui-038
Heavy components like date pickers or rich text editors load only when you click on them.
Import on Visibility ui-039
Content below the fold loads as you scroll to it, keeping the initial page load fast.
List Virtualization ui-040
Only renders the rows you can see — handles thousands of items smoothly without slowing down.
Prefetch on Hover ui-041
Starts loading the next page when you hover a link, so navigation feels instant.
Progressive Disclosure ui-042
Shows simple view first, details on demand. Keeps interfaces approachable without hiding power.
Stale-While-Revalidate ui-043
Shows cached data immediately, refreshes in the background. Dashboards and feeds feel instant.
Debounced Search ui-044
Waits until you stop typing before searching. Prevents unnecessary requests while you compose your query.
Infinite Scroll vs Pagination ui-045
Paginated by default (better for SEO and accessibility). Infinite scroll only when explicitly chosen for feed-type content.
Route-Based Splitting ui-046
Each page only loads the code it needs. Automatic in Next.js, Remix, and SvelteKit.
Page Transitions ui-047
Smooth animations between page navigations. Respects user's reduced-motion preference.
Keyboard
Focus Trapping ui-048
Tab stays inside the popup until you close it. Every modal, dialog, drawer, and sheet must trap focus.
Focus Restoration ui-049
When a popup closes, focus returns to the button that opened it. Maintains keyboard user's place on the page.
Arrow Key Navigation ui-050
Arrow keys move between items in a list, menu, or grid. The standard keyboard pattern for grouped elements.
Roving Tabindex ui-051
Tab enters a group of items, arrow keys move within it, Tab leaves. Prevents excessive tab stops.
Skip Link ui-052
A hidden link that lets keyboard users jump past navigation to the main content. Must be the first focusable element.
Visible Focus Ring ui-053
A clear outline shows which element is currently focused. Never remove focus styles without providing a visible replacement.
Escape to Close ui-054
Pressing Escape closes any overlay — popovers, dialogs, drawers, dropdowns, and tooltips.
Enter/Space to Activate ui-055
Enter or Space triggers buttons and links. Every clickable element must respond to both keys.
Live Regions ui-056
Screen readers announce dynamic changes — toast notifications, form errors, loading states — without moving focus.
Responsive
Mobile-First Layout ui-057
Write base CSS for mobile, then add min-width media queries to enhance for larger screens. Forces content prioritization.
Breakpoint System ui-058
Standard breakpoints at 360/768/1024/1440px. Use content-driven breakpoints when the design breaks at non-standard widths.
Container Query ui-059
Component adapts to its container width instead of the viewport. Essential for reusable components in different layout contexts.
Fluid Typography ui-060
Font sizes scale smoothly between breakpoints using clamp(min, preferred, max). Never use raw vw units alone for text.
Touch Target Sizing ui-061
All interactive elements must be at least 44×44px with 8px gaps between adjacent targets (WCAG 2.5.8).
Responsive Images ui-062
Use srcset + sizes for resolution switching, <picture> for art direction, loading="lazy" for below-fold, and aspect-ratio to prevent layout shift.
Responsive Navigation ui-063
Desktop: persistent top bar or sidebar. Mobile: bottom tab bar (3—5 items) or hamburger menu. Never hide-only on desktop.
Logical Properties ui-064
Use margin-inline, padding-block, border-inline-start instead of physical directions. Automatically adapts to RTL and vertical writing modes.
Error
Error Boundary ui-065
Component-level error catching with fallback UI, error logging, and reset/retry actions. Prevents a single broken component from crashing the page.
Retry Pattern ui-066
Retry failed network requests with exponential backoff (1s → 2s → 4s). Show a retry button after max attempts. Never retry indefinitely.
Offline Indicator ui-067
Detect offline status and show a persistent banner. Serve cached content via service worker. Queue mutations for sync-on-reconnect.
Custom 404 ui-068
Friendly 404 page with search bar, popular links, and a clear path home. Never show a raw server error page.
Custom 500 ui-069
Apologetic 500 page with retry button and status page link. Log the error server-side. Show a reference ID for support.
Empty State — First Use ui-070
When there is no data yet: show an illustration, explain what will appear here, and provide a primary CTA to create the first item.
Empty State — No Results ui-071
When a search or filter returns nothing: show the query, suggest alternatives, and offer a way to clear filters.
Network Error Toast ui-072
Non-blocking toast for transient network errors with a retry action. For persistent failures, escalate to a full-page error state.