Real-world UI

UI parts you actually ship, in 9 real situations

Inputs2026-09-129 items

9 Multi Step Form UI Patterns — Branch and Resume

A multi step form ui splits one long form into screens and collects answers in order. All nine read real values, run rea

Read

Auth UI2026-09-12

Account security settings cover everything after the login screen: devices still signed in, two-factor, the password. Al

Pickers2026-09-12

A time picker ui is the part of a screen where someone sets a time without typing it. These nine go past a single time o

A data table ui is a grid of rows and columns you can reorder, narrow, and pull values out of by hand. All nine sort a r

gallery2026-09-12

An image zoom viewer is the layer between a picture and the person studying it: it magnifies, turns, or lights up one pa

Inputs2026-09-129 items

Form validation UI is the layer that checks a typed value against a rule and reports the verdict on screen. All nine run

interaction2026-09-129 items

Breadcrumb UI is the trail of links at the top of a page showing where you are, from Home to the item in view. Nine work

interaction2026-09-129 items

A resizable split pane is a layout whose panes share one draggable boundary, so widening one side narrows the other. Eig

Pickers2026-09-129 items

Map UI design is the layer that turns "where should this go?" into one point a person can hand back to you, and these ni

interaction2026-09-129 items

Mobile touch gestures turn the distance and speed of a finger on glass into a change on screen. Nine of them are below,