NewestStepsAvatar GroupMulti-select
What’s this UI element called?
The visual dictionary of UI. Describe the thing in your own sloppy words; you get the real name, the API symbol, and a paste-ready prompt for your coding agent.
newCan’t name the look either? Try Name That Vibe
Double-press any word on the site for a plain-English definition.
- 1Cart
- 2Shipping
- 3Payment
- 4Review
Stepsweb
aria-current="step"
The numbered circles across the top of a checkout or wizard, one per stage
Avatar Groupweb
AvatarGroup
Overlapping profile circles with a ring between them and a +N at the end
Multi-selectweb
<select multiple>
One control holding several values: the checkbox dropdown, the chip field, and the two-pane transfer list
Overview
Setup
Scrollspyweb
IntersectionObserver
The On this page list whose current link follows what you're reading
Inline Alert vs. Callout vs. Bannerweb
<Alert severity="warning">
Three in-page notices named by where they sit, and none of them is a toast
Sign-in Formweb
autocomplete="current-password"
The login form's nameable parts — the eye, the OR line, and the Continue-with buttons
Paginationweb
<nav aria-label="pagination">
The numbered page buttons under a list — and the dot version, the page control
July 2026
Date Pickerweb
<input type="date">
The little calendar that pops up on a date field — and the highlighted stripe of a range
Field notes
Trail map
Packing list
Parallax Scrollingweb
animation-timeline: scroll()
Layers that scroll at different speeds — the background lags and depth appears
Carouselweb
aria-roledescription="carousel"
A strip of slides you page through with arrows or the little dots
Site Header vs. Navigation Barweb
<header>
The whole top strip is the header; the row of page links inside it is the nav
Case study
Redesigning checkout
Cardweb
<Card>
The rectangle with media, title, body, and a footer — every part has a name
Feedback
The export button is hard to find…
Resize Handle (Size Grip)web
resize
The three diagonal lines in a text box's corner that you drag to make it bigger
Insertion Caret (Insertion Point)macos
NSTextView.insertionPointColor
The blinking line inside text that marks where the next character will appear
Hamburger Menu (Nav Drawer)web
aria-expanded + aria-controls
The three-line button and the navigation panel it slides open
Revenue
$48.2k
Users
2.4k
Growth
↑ 12%
+9 signups today
Bento Gridweb
display: grid + grid-column: span 2
One grid, mixed tile sizes — a layout packed like a bento box
Masonry
Masonry Layout (Pinterest Grid)web
columns
Cards of different heights packed into columns with no row gaps
Easing (Timing Function)web
transition-timing-function
The speed curve of an animation — why motion feels smooth or robotic
Spring Animationweb
transition={{ type: "spring", stiffness, damping }}
Physics-based motion that overshoots the target and settles
Text Scramble (Decode Effect)web
ScrambleTextPlugin
Random characters churn and settle into the real text
Trip photos
Lightboxweb
<dialog>
The click-to-enlarge image overlay that dims the page behind it
Marqueeweb
animation + @keyframes translateX
Content that auto-scrolls sideways in an endless loop
Pointer (Cursor)macos
NSCursor
Every shape the mouse pointer takes — and the real name of each one
Empty the Trash?
You can’t undo this action.
Alertmacos
NSAlert
The small centered window with a badged icon, a bold line, and Cancel/OK buttons
Slidermacos
NSSlider
The round knob you drag along a track to pick a value from a range
Color Wellmacos
NSColorWell
The little swatch button that shows the current color and opens the picker
We’ll only use this to sign you in.
Form Fieldweb
<label for>
Every part of a labeled input — label, placeholder, helper text, and the red error line
text-overflow: ellipsis
line-clamp: 2
Truncation (Ellipsis & Line Clamp)web
text-overflow: ellipsis
Text cut short with … — at the end of the line, after N lines, or in the middle
To do
In review
Drag & Dropweb
ondrop
The grips, handles, previews, and landing cues around a drag interaction
Divider vs. Separator vs. Ruleweb
<hr>
The same thin line can mark a topic break, separate controls, or be decoration
Progress Ring vs. Spinner vs. Progress Barweb
<progress>
A spinner means wait; a ring or bar can show how much work is complete
Mac Windowmacos
NSWindow
The movable Mac app frame, from its title bar and toolbar to its resize edges
Inbox
Split Viewmacos
NSSplitView
Resizable panes separated by a draggable divider inside a Mac window
Scroll View (Scroller)macos
NSScrollView
A viewport whose AppKit scrollbar is called a scroller
Recent Searches
Search Fieldmacos
NSSearchField
A Mac text field with built-in search, clearing, and recent-query controls
Save Panelmacos
NSSavePanel
The standard Mac dialog for naming a file and choosing where to save it
Token Fieldmacos
NSTokenField
A text input that turns recognized values into removable rounded tokens
Combo Buttonmacos
NSComboButton
A primary action joined to a separate arrow that opens related actions
Level Indicatormacos
NSLevelIndicator
A Mac gauge rendered as a capacity bar, rating stars, or relevance meter
Column View (Browser)macos
NSBrowser
Finder-style columns that reveal each successive level of a hierarchy
Library
Outline Viewmacos
NSOutlineView
An indented tree of rows that expand to reveal nested children
Open which file?
Navigation
The Three Dots (Overflow Menu)web
<button>
Horizontal dots, vertical dots, three lines, and an ellipsis mean different things
Menu Barmacos
NSApp.mainMenu
The strip along the top of the Mac screen — every part, labeled
Context Menumacos
NSMenu
The menu opened at the pointer by right-clicking or Control-clicking an item
Disclosure Trianglemacos
NSOutlineView
The small rotating control that reveals or hides nested content
Dock Badgemacos
NSDockTile.badgeLabel
The red count or status label overlaid on an app's Dock icon
Focus Ringmacos
NSView.focusRingType
The accent-colored glow that identifies the control receiving keyboard input
⌄Style
Fill
Border
Shadow
Inspectormacos
View.inspector(isPresented:content:)
The right-hand panel for viewing and editing details of the current selection
Panel (Floating Window / HUD)macos
NSPanel
An auxiliary macOS window that floats above related document windows
Now Playing
Popovermacos
NSPopover
A floating bubble whose arrow points back to the control that opened it
Pop-Up Button vs. Pull-Down Button vs. Combo Boxmacos
NSPopUpButton
Three similar-looking macOS controls for choosing a value or invoking a menu action
Segmented Controlmacos
NSSegmentedControl
A row of connected choices with the current segment visibly selected
Delete “Q3 Report”?
Blocks only this window.
Sheetmacos
NSWindow.beginSheet(_:completionHandler:)
A modal panel attached to one macOS window rather than the whole app
Favorites
Desktop
Sidebar (Source List)macos
NavigationSplitView
The translucent navigation column along the left edge of a macOS window
Steppermacos
NSStepper
The compact up-and-down arrow pair used to increment or decrement a value
Toolbar (Unified Title Bar)macos
NSToolbar
A row of window actions integrated with the modern macOS title bar
Traffic Lights (Window Controls)macos
NSWindow.standardWindowButton(_:)
The red, yellow, and green controls at the top-left of a macOS window
Vibrancy on
The wallpaper bleeds through the frosted material.
Visual Effect Material (Vibrancy)macos
NSVisualEffectView
The adaptive translucent background used behind macOS sidebars, menus, and panels
Toast (Snackbar)web
role="status"
A brief, non-blocking message that appears after an action
Blocks everything behind it.
Blocks everything behind it.
Blocks everything behind it.
Modal Dialog vs. Drawer vs. Sheetweb
<dialog>
Three overlay patterns distinguished by placement, scope, and task depth
Filter projects
Popover vs. Dropdown Menu vs. Tooltipweb
popover
Three anchored overlays with different triggers, content, and dismissal rules
The translucent layer behind this card is the scrim.
Scrim (Backdrop / Overlay)web
::backdrop
The translucent layer that separates a modal surface from the page
Skeleton
Spinner
Skeleton vs. Spinnerweb
aria-busy="true"
Two loading indicators for predictable layouts and indeterminate waits
Combobox (Autocomplete / Typeahead)web
role="combobox"
A text input paired with a filtered list of selectable suggestions
Suggestions
Command Paletteweb
Command
A keyboard-first searchable launcher for actions and navigation
A reusable piece of interface with its own structure and behavior.
A named value for color, spacing, type, or another design decision.
Shared names make design and implementation prompts precise.
Accordion (Disclosure)web
<details>
Stacked sections whose headings expand and collapse their content
Weekly activity
1,248
+12% from last week
Tabsweb
role="tablist"
A single row of labels that switches one shared content region
Badge vs. Chip vs. Pill vs. Tagweb
Badge
Compact labels distinguished by meaning, shape, and interactivity
Breadcrumbsweb
<nav>
A hierarchy trail from the current page back to its ancestors
Scrollable pane
Component notes
Sticky vs. Fixed Positioningweb
position: sticky
Two ways to keep an element visible with different containing blocks
:focus-visible
Focus Ring (:focus-visible)web
:focus-visible
The keyboard-aware outline that identifies the active control
No projects yet
Empty Stateweb
<section>
Purposeful guidance shown when a view has no content yet
Designed by @jane
Jane Appleseed
@jane
Design systems engineer. Making interfaces easier to name and build.
Hover Cardweb
HoverCard
A rich, non-modal preview revealed from a hovered or focused reference
Switch vs. Checkbox vs. Radioweb
<input type="checkbox" role="switch">
Controls for an on/off setting, independent choices, or one choice from a group
Single selection · center
Toggle Group (Segmented Control)web
ToggleGroup
A connected row of compact options with one persistent selection
Menu Bar Extra (Status Item)macos
NSStatusItem
The icon that lives on the right side of the macOS menu bar