# NameThatUI

> The visual dictionary of UI terms: see it, name it, and prompt with it. Every entry names one UI element someone can see but can't describe: the canonical name, alternate names, the folk phrasings people actually use ("the pale pill behind the menu bar icon"), the API symbols (AppKit, SwiftUI, HTML, ARIA, CSS), and a paste-ready prompt for a coding agent.

Use this site when a user describes a piece of UI without knowing its name, or when you need the exact API symbol for a visual element they pointed at. Each entry page is also available with all content inline in [llms-full.txt](https://namethatui.com/llms-full.txt). Programmatic search: POST https://namethatui.com/api/search with JSON {"q": "<description in any language>"}.

## macOS elements

- [Menu Bar](https://namethatui.com/macos/menu-bar): The strip along the top of the Mac screen — every part, labeled
- [Context Menu](https://namethatui.com/macos/context-menu): The menu opened at the pointer by right-clicking or Control-clicking an item
- [Disclosure Triangle](https://namethatui.com/macos/disclosure-triangle): The small rotating control that reveals or hides nested content
- [Dock Badge](https://namethatui.com/macos/dock-badge): The red count or status label overlaid on an app's Dock icon
- [Focus Ring](https://namethatui.com/macos/focus-ring): The accent-colored glow that identifies the control receiving keyboard input
- [Inspector](https://namethatui.com/macos/inspector): The right-hand panel for viewing and editing details of the current selection
- [Insertion Caret (Insertion Point)](https://namethatui.com/macos/insertion-caret): The blinking line inside text that marks where the next character will appear
- [Menu Bar Extra (Status Item)](https://namethatui.com/macos/menu-bar-extra): The icon that lives on the right side of the macOS menu bar
- [Panel (Floating Window / HUD)](https://namethatui.com/macos/panel): An auxiliary macOS window that floats above related document windows
- [Popover](https://namethatui.com/macos/popover): A floating bubble whose arrow points back to the control that opened it
- [Pop-Up Button vs. Pull-Down Button vs. Combo Box](https://namethatui.com/macos/popup-pulldown-combo): Three similar-looking macOS controls for choosing a value or invoking a menu action
- [Segmented Control](https://namethatui.com/macos/segmented-control): A row of connected choices with the current segment visibly selected
- [Sheet](https://namethatui.com/macos/sheet): A modal panel attached to one macOS window rather than the whole app
- [Sidebar (Source List)](https://namethatui.com/macos/sidebar): The translucent navigation column along the left edge of a macOS window
- [Stepper](https://namethatui.com/macos/stepper): The compact up-and-down arrow pair used to increment or decrement a value
- [Toolbar (Unified Title Bar)](https://namethatui.com/macos/toolbar): A row of window actions integrated with the modern macOS title bar
- [Traffic Lights (Window Controls)](https://namethatui.com/macos/traffic-lights): The red, yellow, and green controls at the top-left of a macOS window
- [Visual Effect Material (Vibrancy)](https://namethatui.com/macos/vibrancy): The adaptive translucent background used behind macOS sidebars, menus, and panels
- [Mac Window](https://namethatui.com/macos/window): The movable Mac app frame, from its title bar and toolbar to its resize edges
- [Split View](https://namethatui.com/macos/split-view): Resizable panes separated by a draggable divider inside a Mac window
- [Scroll View (Scroller)](https://namethatui.com/macos/scroll-view): A viewport whose AppKit scrollbar is called a scroller
- [Search Field](https://namethatui.com/macos/search-field): A Mac text field with built-in search, clearing, and recent-query controls
- [Save Panel](https://namethatui.com/macos/save-panel): The standard Mac dialog for naming a file and choosing where to save it
- [Token Field](https://namethatui.com/macos/token-field): A text input that turns recognized values into removable rounded tokens
- [Combo Button](https://namethatui.com/macos/combo-button): A primary action joined to a separate arrow that opens related actions
- [Level Indicator](https://namethatui.com/macos/level-indicator): A Mac gauge rendered as a capacity bar, rating stars, or relevance meter
- [Column View (Browser)](https://namethatui.com/macos/column-view): Finder-style columns that reveal each successive level of a hierarchy
- [Outline View](https://namethatui.com/macos/outline-view): An indented tree of rows that expand to reveal nested children
- [Pointer (Cursor)](https://namethatui.com/macos/pointer): Every shape the mouse pointer takes — and the real name of each one
- [Alert](https://namethatui.com/macos/alert): The small centered window with a badged icon, a bold line, and Cancel/OK buttons
- [Slider](https://namethatui.com/macos/slider): The round knob you drag along a track to pick a value from a range
- [Color Well](https://namethatui.com/macos/color-well): The little swatch button that shows the current color and opens the picker

## Web elements

- [The Three Dots (Overflow Menu)](https://namethatui.com/web/three-dots): Horizontal dots, vertical dots, three lines, and an ellipsis mean different things
- [Drag & Drop](https://namethatui.com/web/drag-and-drop): The grips, handles, previews, and landing cues around a drag interaction
- [Divider vs. Separator vs. Rule](https://namethatui.com/web/divider): The same thin line can mark a topic break, separate controls, or be decoration
- [Progress Ring vs. Spinner vs. Progress Bar](https://namethatui.com/web/progress-indicators): A spinner means wait; a ring or bar can show how much work is complete
- [Toast (Snackbar)](https://namethatui.com/web/toast): A brief, non-blocking message that appears after an action
- [Modal Dialog vs. Drawer vs. Sheet](https://namethatui.com/web/dialog-drawer-sheet): Three overlay patterns distinguished by placement, scope, and task depth
- [Popover vs. Dropdown Menu vs. Tooltip](https://namethatui.com/web/popover-dropdown-tooltip): Three anchored overlays with different triggers, content, and dismissal rules
- [Scrim (Backdrop / Overlay)](https://namethatui.com/web/scrim): The translucent layer that separates a modal surface from the page
- [Skeleton vs. Spinner](https://namethatui.com/web/skeleton-spinner): Two loading indicators for predictable layouts and indeterminate waits
- [Combobox (Autocomplete / Typeahead)](https://namethatui.com/web/combobox): A text input paired with a filtered list of selectable suggestions
- [Command Palette](https://namethatui.com/web/command-palette): A keyboard-first searchable launcher for actions and navigation
- [Accordion (Disclosure)](https://namethatui.com/web/accordion): Stacked sections whose headings expand and collapse their content
- [Tabs](https://namethatui.com/web/tabs): A single row of labels that switches one shared content region
- [Badge vs. Chip vs. Pill vs. Tag](https://namethatui.com/web/badge-chip-pill): Compact labels distinguished by meaning, shape, and interactivity
- [Breadcrumbs](https://namethatui.com/web/breadcrumbs): A hierarchy trail from the current page back to its ancestors
- [Sticky vs. Fixed Positioning](https://namethatui.com/web/sticky-fixed): Two ways to keep an element visible with different containing blocks
- [Focus Ring (:focus-visible)](https://namethatui.com/web/focus-ring-web): The keyboard-aware outline that identifies the active control
- [Empty State](https://namethatui.com/web/empty-state): Purposeful guidance shown when a view has no content yet
- [Hover Card](https://namethatui.com/web/hover-card): A rich, non-modal preview revealed from a hovered or focused reference
- [Switch vs. Checkbox vs. Radio](https://namethatui.com/web/switch-checkbox-radio): Controls for an on/off setting, independent choices, or one choice from a group
- [Toggle Group (Segmented Control)](https://namethatui.com/web/toggle-group): A connected row of compact options with one persistent selection
- [Form Field](https://namethatui.com/web/form-field): Every part of a labeled input — label, placeholder, helper text, and the red error line
- [Truncation (Ellipsis & Line Clamp)](https://namethatui.com/web/truncation): Text cut short with … — at the end of the line, after N lines, or in the middle
- [Hamburger Menu (Nav Drawer)](https://namethatui.com/web/hamburger-menu): The three-line button and the navigation panel it slides open
- [Lightbox](https://namethatui.com/web/lightbox): The click-to-enlarge image overlay that dims the page behind it
- [Marquee](https://namethatui.com/web/marquee): Content that auto-scrolls sideways in an endless loop
- [Bento Grid](https://namethatui.com/web/bento-grid): One grid, mixed tile sizes — a layout packed like a bento box
- [Masonry Layout (Pinterest Grid)](https://namethatui.com/web/masonry): Cards of different heights packed into columns with no row gaps
- [Easing (Timing Function)](https://namethatui.com/web/easing): The speed curve of an animation — why motion feels smooth or robotic
- [Spring Animation](https://namethatui.com/web/spring): Physics-based motion that overshoots the target and settles
- [Text Scramble (Decode Effect)](https://namethatui.com/web/text-scramble): Random characters churn and settle into the real text
- [Carousel](https://namethatui.com/web/carousel): A strip of slides you page through with arrows or the little dots
- [Site Header vs. Navigation Bar](https://namethatui.com/web/header-navbar): The whole top strip is the header; the row of page links inside it is the nav
- [Card](https://namethatui.com/web/card): The rectangle with media, title, body, and a footer — every part has a name
- [Resize Handle (Size Grip)](https://namethatui.com/web/resize-handle): The three diagonal lines in a text box's corner that you drag to make it bigger
- [Sign-in Form](https://namethatui.com/web/sign-in-form): The login form's nameable parts — the eye, the OR line, and the Continue-with buttons
- [Pagination](https://namethatui.com/web/pagination): The numbered page buttons under a list — and the dot version, the page control
- [Date Picker](https://namethatui.com/web/date-picker): The little calendar that pops up on a date field — and the highlighted stripe of a range
- [Parallax Scrolling](https://namethatui.com/web/parallax): Layers that scroll at different speeds — the background lags and depth appears
- [Steps](https://namethatui.com/web/steps): The numbered circles across the top of a checkout or wizard, one per stage
- [Avatar Group](https://namethatui.com/web/avatar-group): Overlapping profile circles with a ring between them and a +N at the end
- [Multi-select](https://namethatui.com/web/multi-select): One control holding several values: the checkbox dropdown, the chip field, and the two-pane transfer list
- [Scrollspy](https://namethatui.com/web/scrollspy): The On this page list whose current link follows what you're reading
- [Inline Alert vs. Callout vs. Banner](https://namethatui.com/web/alert-callout-banner): Three in-page notices named by where they sit, and none of them is a toast
- [Bottom Navigation (Tab Bar)](https://namethatui.com/web/bottom-navigation): The row of three to five icons pinned to the bottom of a phone app that switches sections
- [Timeline](https://namethatui.com/web/timeline): A vertical line of dots with one dated event beside each, in the order things happened
- [Status Dot (Presence Indicator)](https://namethatui.com/web/status-dot): The tiny colored circle on an avatar or row that says online, away, busy or live
- [Chat Bubble (Message Bubble)](https://namethatui.com/web/chat-bubble): The rounded box around one message in a conversation, yours on one side, theirs on the other
- [Data Table (Table View)](https://namethatui.com/web/data-table): Rows and columns of records, with column names you click to sort

## Visual styles (Name That Vibe)

Styles are looks, not controls — each entry gives the canonical name, terminology status, defining visual signals, the closest look-alike and the decisive difference, plus a framework-neutral style brief to paste into a coding agent.

- [Skeuomorphism](https://namethatui.com/styles/skeuomorphism): UI that imitates real-world materials and objects — leather, paper, glass, stitched edges
- [Neumorphism](https://namethatui.com/styles/neumorphism): Controls softly extruded from — or pressed into — one continuous matte surface
- [Glassmorphism](https://namethatui.com/styles/glassmorphism): Frosted translucent panels floating over a vivid backdrop that blurs through
- [Liquid Glass](https://namethatui.com/styles/liquid-glass): Apple's adaptive glass material for the control layer floating above content
- [Web Brutalism](https://namethatui.com/styles/web-brutalism): Raw browser defaults as the design — bare HTML structure, system type, honest utility
- [Neobrutalism](https://namethatui.com/styles/neobrutalism): Saturated color blocks, thick black outlines, and hard offset shadows — a designed loudness
- [Y2K Digital Aesthetic](https://namethatui.com/styles/y2k): Chrome, gel buttons, and iridescent cyber-optimism from the millennium turn
- [Frutiger Aero](https://namethatui.com/styles/frutiger-aero): Glossy eco-tech optimism — skies, water, grass, and bubbles behind clean humanist UI
- [Flat Design](https://namethatui.com/styles/flat-design): Solid 2D color fills and simple glyph icons — no gloss, no bevels, no simulated depth
- [Minimalism](https://namethatui.com/styles/minimalism): Strip the interface to only what earns its place — negative space, few elements, dramatic type
- [Claymorphism](https://namethatui.com/styles/claymorphism): Puffy, inflated 3D controls that look molded from soft clay — big radii, pastel colors, floating objects
- [Vernacular Web](https://namethatui.com/styles/vernacular-web): The homemade GeoCities-era personal page — starry tiled backgrounds, sparkle GIFs, a visitor counter, an under-construction sign
- [Aqua](https://namethatui.com/styles/aqua): Early Mac OS X's candy-gel language — luminous blue gel buttons, pinstripes, gumdrop window controls, a pulsing default button
- [Windows Aero](https://namethatui.com/styles/windows-aero): Vista and Windows 7's glass language — transparent blurred window frames, specular sweeps, luminous gradients, glowing controls

## Guides

- [Methodology](https://namethatui.com/methodology): how UI terms, behaviors, anatomy, API symbols, and real-world search language are researched and verified
- [The Translation Table](https://namethatui.com/translate): every Mac element in three columns — plain name, AppKit symbol, SwiftUI symbol
- [AppKit vs SwiftUI](https://namethatui.com/appkit-vs-swiftui): the same Mac element has two real names — which one to say in a prompt
- [Swift vs Electron](https://namethatui.com/swift-vs-electron): native app or web-in-a-shell — the first fork, and the vocabulary it decides

## Optional

- [llms-full.txt](https://namethatui.com/llms-full.txt): every entry in full — descriptions, anatomy parts, API symbols, prompts