UI Terms
Find the name for any UI pattern. 64 components, layouts, and interactions, with live demos you can poke at.
Start browsingLayouts
How a page is laid out. Holy grail, bento, split view, and the rest.
Revenue
$24.8k
⌖
Active users
★
Top rated
This week
Bento grid
A grid layout of varying-size cards arranged like the compartments of a bento box.
@container (inline-size > 16em)
Container query layout
A layout pattern where components style themselves based on the size of their container rather than the size of the viewport.
Components
Reusable bits of UI with names you'll find in design systems.
›What's a popover?
A small panel anchored to a trigger element.
›How does it differ from a modal?
Popovers are non-blocking and dismiss on outside click.
›Native HTML support?
Yes — the `popover` attribute now ships in major browsers.
Accordion
A vertically stacked set of headings that each toggle a region of content open or closed.
Delete this project?
This will permanently delete the project and all its files. This cannot be undone.
Alert dialog
A dialog that interrupts the user to confirm a consequential or destructive action before it happens.
Inbox
Email
Alerts
Cart
Badge
A small label, often a number or a dot, that sits on or beside another element to indicate status or count.
Sort by
Newest first
Oldest first
A → Z
Bottom sheet
A panel that slides up from the bottom of the screen, often draggable to expand or dismiss.
⌕▾
- Australia
- Brazil
- Canada
- France
- Germany
- India
- Japan
- Spain
Combobox
A text input combined with a dropdown list of suggestions that filter as the user types.
⌕
- Create new project⌘N
- Open file⌘O
- Settings⌘,
- Toggle theme⌘T
- Invite teammate
- Sign out
No results
Command palette
A searchable launcher that lets users type to find and run actions, navigate, or jump to records.
Edit profile
Name
Alex Mercer
Email
Dialog
A window that appears over the rest of the UI to prompt the user for input or attention before they can continue.
⚙Settings
⌗Billing
⇄Switch team
⏻Sign out
Popover
A small floating panel anchored to a trigger element, used for short contextual content.
1Account
2Payment
3Review
Stepper
An ambiguous term used for two different controls: a numeric +/- input, or a multi-step progress indicator.
Notifications
Email and push
Dark mode
Use system theme
Auto-save
Every 30 seconds
Switch
A control with two mutually exclusive states (on or off) that takes effect immediately when toggled.
Patterns
Common solutions that show up across products. Empty states, paywalls, onboarding.
No projects yet
Create your first project to get started.
Empty state
The UI shown when a list, section, or screen has no items to display.
Tabcycles focus
Focus ring
The visible outline drawn around the element that currently has keyboard focus.
Confirm
Tabstays inside the dialog
Focus trap
Keeping keyboard focus inside a specific region (typically a modal dialog) until that region is dismissed.
Spent the morning rewriting form validation. Inline errors are doing a lot of heavy lifting here.
Optimistic UI
A pattern where the UI shows the result of an action immediately, before the server has confirmed it.
The case for boring software
Most production systems don't break because of clever code. They break because clever code accumulates without anyone noticing. The cure isn't more rigor — it's choosing the boring path more often.
When you reach for an exciting new library, ask: is this solving a problem I have today, or one I imagine I'll have next quarter? The boring answer is usually the right answer.
Boring software is software you understand. Software you can debug at 2am. Software that doesn't surprise the next engineer.
Paywall
A UI that blocks access to content or features until the user pays or subscribes.
Sarah Chen
Designing for clarity over cleverness
A short note on resisting the temptation to over-engineer interface surface area when the job is to help people get something done.
Skeleton screen
A placeholder UI of gray shapes shown while real content loads.
Tabreveals the skip link first
Skip link
A link, usually hidden until focused, that lets keyboard and screen reader users jump past repeated navigation to the main content.
First time here
Welcome to your dashboard
Connect your first data source to see your team's activity here.
Zero state
The screen shown when a user opens a feature for the first time, before they've created any data.
Interactions
Things users do. Swipes, drags, pulls, right-clicks, scrubs.
Right-click anywhere
Context menu
A menu that appears at the cursor or touch point, listing actions relevant to the clicked element.
Design review
Write release notes
Update changelog
Deploy to staging
Drag handle
A visual affordance — usually a small grip icon or texture — signaling that an element can be dragged.
Mentioned inlast week.
Alex Mercer
@alex
Product designer. Writes about systems and craft.
412 following8.2k followers
Hover card
A preview panel that appears when the user hovers over a link or reference, showing richer content than a tooltip.
ProjectMobile App
Title
Untitled document
StatusIn review
Inline edit
An interaction where text or fields become editable in place when the user clicks them, rather than opening a separate edit form.
A
B
C
D
E
scroll-snap-type: x mandatory
Scroll snap
Scrolling behavior where the viewport rests on specific positions instead of stopping anywhere the user releases.
Animations
Motion between states. Push, fade, stagger, spring, shared element.
Share with
Team
Design
Engineering
Modal presentation
A transition where a new view slides up over the current view to present a self-contained task.
animation-timeline: scroll()
Scroll-driven animation
An animation whose progress is tied to scroll position rather than time, advancing as the user scrolls.
