Skip to content
IndexDesign corpus
Design Systems & Brand GuidelinesReferencePrompt PackFreeVanilla JS

NameThatUI

Visual dictionary that maps 76 web and macOS UI elements to their real names and code

Aboutnamethatui.com

NameThatUI is a reference site that answers "what is this thing called?" for 44 web elements and 32 macOS elements. Each entry names the pattern, breaks down its anatomy part by part, lists the phrases people mistakenly use for it, and gives the exact API symbol in CSS, Tailwind, SwiftUI, AppKit and Electron. Every page ships a paste-ready build prompt and a separate debug prompt listing the classic failure modes. It also carries 14 visual-style pages ("Name That Vibe") and 18 head-to-head "X vs Y" disambiguation pages.

For an agent

Use this as the disambiguation layer before you write component code: when a user says "the grid with one big box" or "the thing that slides up from the bottom", look up the element here to get the canonical name, then use the page's own paste-ready prompt as your build spec. The 'In code' table is the real value — it gives the literal API symbol per framework (CSS grid-column, Tailwind col-span, SwiftUI, AppKit), which stops you from hallucinating a React idiom into a SwiftUI file. Every page has 'Copy page as Markdown' and the site serves llms.txt, so fetch the page directly rather than guessing; the debug prompts are worth pasting verbatim when a layout misbehaves.

Why it is here. It is the only resource that translates a user's vague description into a canonical component name AND the exact per-framework API symbol, which is precisely the lookup an AI coding agent needs and normally has to guess at.

Install command, framework, licence and component list.
Components it ships76 total
Helps you build3
Notable for
  • 44 web + 32 macOS elements named
  • paste-ready build and debug prompts per element
  • cross-framework API symbol translation table
  • 18 'X vs Y' disambiguation pages
  • llms.txt and copy-as-Markdown on every page
Provenance

Verified 2026-08-15. HTTP 200. https://namethatui.com/, https://namethatui.com/sitemap.xml, https://namethatui.com/web/bento-grid, https://namethatui.com/llms.txt (HEAD 200)

Related resourcesDesign Systems & Brand Guidelines