thedaviddias/ux-patterns-for-developers

breadcrumb

Use when implementing help users understand their current location.

accordion

Use when implementing expand and collapse content sections.

account-settings

Use when implementing user account configuration and preferences.

activity-feed

Use when implementing social activity and updates stream.

ai-chat

Use when implementing conversational AI chat interfaces.

ai-error-states

Use when implementing handling AI-specific errors.

ai-loading-states

Use when implementing loading states for AI operations.

ai-suggestions

Use when implementing aI-powered autocomplete and suggestions.

autocomplete

Use when implementing suggest options as users type.

back-to-top

Use when implementing quickly navigate back to the top of the page.

button

Use when you need to trigger actions and submit forms.

calendar

Use when you need to display dates and events in calendar format.

card-grid

Use when you need to display content in a responsive card layout.

carousel

Use when you need to display multiple items in a rotating view.

chart

Use when implementing visualize data with graphs and charts.

checkbox

Use when implementing enable single or multiple selections.

checkout

Use when implementing multi-step checkout process.

code-confirmation

Use when implementing verify codes with segmented input.

color-picker

Use when implementing select colors with visual feedback.

command-palette

Use when implementing quick command execution interface.

comment-system

Use when implementing user comments and discussion threads.

comparison-table

Use when you need to compare features and options side-by-side.

context-window

Use when implementing managing AI conversation context.

cookie-consent

Use when you need to inform users about the use of cookies.

currency-input

Use when implementing enter and format monetary values.

dashboard

Use when implementing comprehensive dashboard layouts.

date-input

Use when implementing enter dates in a structured text format.

date-picker

Use when implementing select dates from a calendar interface.

date-range

Use when implementing select a range between two dates.

drag-and-drop

Use when implementing allow users to reorder items intuitively.

empty-states

Use when implementing guide users when no content is available.

expandable-text

Use when implementing show or hide additional text content on demand.

file-input

Use when you need to upload and handle files.

filter-panel

Use when implementing filter and refine data displays.

form-validation

Use when you need to validate and provide feedback.

hambuger-menu

Use when you need to display a menu icon for mobile devices.

image-gallery

Use when you need to display and browse image collections.

image-upload

Use when you need to upload and preview images.

infinite-scroll

Use when implementing loads additional content automatically as users scroll down.

kanban-board

Use when you need to organize tasks in columns and swimlanes.