Skip to content
Index730 resources
NameThatUI

NameThatUI

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

Tier S · Best in classReferencePrompt Packnamethatui.com

(Visit namethatui.com ↗)(Docs)
Preview image from namethatui.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.

Facts

License
Unknown
Pricing
Free, Sponsor or ad supported
Framework
Vanilla JS, SwiftUI
Styling
Vanilla CSS, Tailwind CSS
Distribution
Web app / online tool
Platform
Web, macOS
Content type
Prose / writing, Code, Prompts
Agent readiness
Ships a ready LLM prompt, llms.txt, Structured documentation, Copy-paste ready code
Accessibility
Unknown
Maturity
Actively maintained
Pricing detail
Free to read. Three founding-sponsor slots sold via /sponsor.

Components it ships

76 total
AccordionAlertBannerAvatar GroupBadgeChipBento GridBreadcrumbsCardCarouselComboboxCommand PaletteDate PickerDialogDrawerSheetSeparatorDrag And DropAnimationEmpty StateFocus RingFormNavbarHeaderHover CardLightboxMarqueeMasonryMulti SelectPaginationParallaxPopoverDropdown MenuTooltipProgress BarSpinnerResizableBackdropIn Page NavigationLogin FormSkeletonTransitionProgress StepperStickySwitchCheckboxRadio ButtonTabsText EffectToastToggle GroupTypographyAlert DialogColor PickerColumn ViewSplit ButtonContext MenuCollapsibleDockMenubarTree ViewPanelMeterCustom CursorSelectScroll AreaSearch InputSegmented ControlSidebarSliderSplit ViewQuantity StepperTag InputToolbarGlassmorphismFloating Window

Helps you build

3
Login Web AppCommand PaletteEmpty State

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)

Also in Design Systems & Brand Guidelines

6
namethatui.comTier S