thedaviddias/ux-patterns-for-developers

1

ux-patterns Use when choosing, comparing, or implementing UX patterns across the UX Patterns for Developers corpus.

thedaviddias/ux-patterns-for-developers

51

2

sidebar Use when you need to organize and structure site navigation.

thedaviddias/ux-patterns-for-developers

22

3

skeleton Use when implementing show users that content is being loaded.

thedaviddias/ux-patterns-for-developers

19

4

table Use when you need to display structured data in rows and columns.

thedaviddias/ux-patterns-for-developers

18

5

empty-states Use when implementing guide users when no content is available.

thedaviddias/ux-patterns-for-developers

17

6

form-validation Use when you need to validate and provide feedback.

thedaviddias/ux-patterns-for-developers

17

7

navigation-menu Use when you need to organize and structure site navigation.

thedaviddias/ux-patterns-for-developers

17

8

progress-indicator Use when implementing show completion status of an operation.

thedaviddias/ux-patterns-for-developers

17

9

wizard Use when implementing multi-step forms and processes.

thedaviddias/ux-patterns-for-developers

17

10

ai-loading-states Use when implementing loading states for AI operations.

thedaviddias/ux-patterns-for-developers

16

11

button Use when you need to trigger actions and submit forms.

thedaviddias/ux-patterns-for-developers

16

12

checkout Use when implementing multi-step checkout process.

thedaviddias/ux-patterns-for-developers

16

13

login Use when implementing user authentication and sign-in forms.

thedaviddias/ux-patterns-for-developers

16

14

autocomplete Use when implementing suggest options as users type.

thedaviddias/ux-patterns-for-developers

15

15

breadcrumb Use when implementing help users understand their current location.

thedaviddias/ux-patterns-for-developers

15

16

account-settings Use when implementing user account configuration and preferences.

thedaviddias/ux-patterns-for-developers

14

17

drag-and-drop Use when implementing allow users to reorder items intuitively.

thedaviddias/ux-patterns-for-developers

14

18

modal Use when you need to display focused content or actions.

thedaviddias/ux-patterns-for-developers

14

19

notification Use when you need to inform users about important updates.

thedaviddias/ux-patterns-for-developers

14

20

product-card Use when implementing product display cards for e-commerce.

thedaviddias/ux-patterns-for-developers

14

21

search-field Use when you need to search through content efficiently.

thedaviddias/ux-patterns-for-developers

14

22

search-results Use when you need to display and filter search results.

thedaviddias/ux-patterns-for-developers

14

23

tabs Use when you need to switch between different views.

thedaviddias/ux-patterns-for-developers

14

24

timeline Use when you need to display chronological events and activities.

thedaviddias/ux-patterns-for-developers

14

25

tooltip Use when implementing provide additional context on hover or focus.

thedaviddias/ux-patterns-for-developers

14

26

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

thedaviddias/ux-patterns-for-developers

13

27

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

thedaviddias/ux-patterns-for-developers

13

28

dashboard Use when implementing comprehensive dashboard layouts.

thedaviddias/ux-patterns-for-developers

13

29

file-input Use when you need to upload and handle files.

thedaviddias/ux-patterns-for-developers

13

30

pagination Use when implementing navigate through multiple pages of content.

thedaviddias/ux-patterns-for-developers

13

31

selection-input Use when you need to choose from predefined options.

thedaviddias/ux-patterns-for-developers

13

32

shopping-cart Use when implementing shopping cart and item management.

thedaviddias/ux-patterns-for-developers

13

33

signup Use when implementing user registration and account creation.

thedaviddias/ux-patterns-for-developers

13

34

toggle Use when you need to switch between two states.

thedaviddias/ux-patterns-for-developers

13

35

ai-error-states Use when implementing handling AI-specific errors.

thedaviddias/ux-patterns-for-developers

12

36

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

thedaviddias/ux-patterns-for-developers

12

37

chart Use when implementing visualize data with graphs and charts.

thedaviddias/ux-patterns-for-developers

12

38

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

thedaviddias/ux-patterns-for-developers

12

39

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

thedaviddias/ux-patterns-for-developers

12

40

image-upload Use when you need to upload and preview images.

thedaviddias/ux-patterns-for-developers

12

41

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

thedaviddias/ux-patterns-for-developers

12

42

link Use when you need to create accessible and interactive links.

thedaviddias/ux-patterns-for-developers

12

43

list-view Use when you need to display data in vertical lists.

thedaviddias/ux-patterns-for-developers

12

44

password-reset Use when implementing password recovery and reset flows.

thedaviddias/ux-patterns-for-developers

12

45

rating-input Use when implementing rate something with a number of stars.

thedaviddias/ux-patterns-for-developers

12

46

social-login Use when implementing oAuth and social media authentication.

thedaviddias/ux-patterns-for-developers

12

47

text-field Use when implementing enter and edit text content.

thedaviddias/ux-patterns-for-developers

12

48

tree-view Use when you need to display hierarchical data structures.

thedaviddias/ux-patterns-for-developers

12

49

user-profile Use when implementing user profile and account management.

thedaviddias/ux-patterns-for-developers

12

50

accordion Use when implementing expand and collapse content sections.

thedaviddias/ux-patterns-for-developers

11