Don't Know the Name of That UI Component? NameThatUI Has You Covered

You're browsing a website, you spot a component you love, and you want to build something just like it — but you have no idea what it's called. Or someone on your team describes what they want, and neither of you knows the right term. You end up going back and forth, talking around the thing instead of naming it.

This is one of the most common pain points for people who have jumped into development through AI tools — often called "vibe coders."

Why Terminology Matters More Than You Think

An experienced frontend developer can decode a vague description quickly: "Oh, you mean a carousel" or "That's a loading skeleton." Their past experience gives them a mental library of components, their names, and how they're structured.

But if you've entered the development world primarily through AI, that library doesn't exist yet. You end up describing things like "make something slide in from the bottom" or "stack the user avatars on top of each other" — and AI, like a human collaborator, has to guess what you mean. That leads to longer feedback loops and mismatched results.

What Is NameThatUI?

namethatui.com is a free website that teaches you the names of UI components through a game-like interface. You see a component, you learn what it's called, and you build your vocabulary over time.

Real Examples That Show Why This Matters

Avatar Group

Imagine someone asking you to "show user avatars stacked behind each other, and when there are eight users, show a +4 that expands when clicked." That's an avatar group. And it's made up of specific sub-elements:

• Avatar stack / overlap: The layered, overlapping arrangement
• Separation ring: The circular border that visually separates each avatar
• Fallback: The initials or icon shown when no image is available
• Overflow avatar: The "+4" element that reveals the rest on click

Knowing the name means you can describe the whole thing to AI in one sentence.

Modal vs. Drawer vs. Sheet

Most people say "open a popup" for all three. But they're different:

• Modal / Dialog: Opens in the center of the screen, asks a single question, closes when you click outside
• Drawer: Slides in from the side (usually right)
• Sheet: Slides up from the bottom

Tell AI you want a "drawer" and you'll get a side panel. Say "something sliding from the bottom" and AI has to interpret — which introduces room for error.

Bento Grid

That modular layout with cards of different sizes arranged in a grid? It's called a bento grid. Prompt AI with "I want a bento grid layout" and it knows exactly what to build.

Bonus: UI Style Names

NameThatUI also covers visual styles, which is just as useful when you're setting the overall direction of a project:

• Neo-brutalism: Bold borders, high contrast, raw and intentional roughness
• Minimalism: Clean, content-first, Notion-style
• Glassmorphism: Frosted glass effect, common in health and productivity apps

Once you know the style name, paste it into Google Images to instantly see what it looks like in practice — then use it confidently in your prompts.

Conclusion

Knowing UI terminology isn't just for developers. Whether you're briefing a designer, communicating with a developer, or crafting AI prompts, using the right name gets you to the right result on the first try.

If you know other useful sites like this one, share them in the comments — the more people who benefit, the better.