UI Terms visual dictionary

UI Terms

Find the name for any UI pattern. 64 components, layouts, and interactions, with live demos you can poke at.

Start browsing

Layouts

How a page is laid out. Holy grail, bento, split view, and the rest.

Asymmetric grid

A grid whose columns are intentionally uneven in width, creating visual hierarchy through imbalance.
Revenue
$24.8k
↑ 12%
⌖
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.

Hero

A large introductory section at the top of a page that sets the tone and message.

Holy grail layout

A page layout with a full-width header and footer, plus three columns of content between them.

Master-detail

A two-pane layout with a list of items on one side and the selected item's details on the other.

Off-canvas

A layout pattern where content lives outside the visible viewport and slides in on demand.

Split view

A layout that divides the viewport into two side-by-side panes, often resizable.

Sticky header

A header that stays attached to the top of the viewport as the user scrolls.

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.

Action sheet

A sheet that slides up from the bottom of the screen with a list of buttons, used to confirm or pick from a few related actions.
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.
AM
JK
RP
SD
+4
EM

Avatar

A small image that represents a user, account, or entity, usually circular and used next to names or actions.
12
3
2
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.

Breadcrumbs

A horizontal list of links showing the user's location in a site's hierarchy, with each level clickable to navigate up.
Article
3 min
Guide
8 min

Card

A bounded rectangular container that groups related content and actions as a single unit.
01
02
03
04

Carousel

A horizontally scrolling row of items that the user pages through, often with dots or arrows to navigate.

Chip

A small pill-shaped element that represents an input, attribute, selection, or filter, often interactive.

Combobox

A text input combined with a dropdown list of suggestions that filter as the user types.

Command palette

A searchable launcher that lets users type to find and run actions, navigate, or jump to records.

Dialog

A window that appears over the rest of the UI to prompt the user for input or attention before they can continue.

Drawer

A panel that slides in from the edge of the screen, holding secondary content or navigation.

Floating action button

A circular, elevated button anchored to a corner of the screen that triggers the most common action on the current view.

Pagination

A control that splits a long list into numbered pages, with links to jump between them.

Popover

A small floating panel anchored to a trigger element, used for short contextual content.

Segmented control

A row of joined buttons that act as a mutually-exclusive selector — exactly one segment is active at a time.
Volume
62
62
Brightness
38

Slider

A draggable handle on a track that lets the user pick a value, or range of values, from a continuous scale.
1 Account
2 Payment
3 Review

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.
Home

Tab bar

A persistent row of top-level destinations along the bottom of a mobile app, with one item selected at a time.

Tabs

A row of labeled buttons that each show a different panel of content, with only one panel visible at a time.

Toast

A short, self-dismissing message that appears at the edge of the screen to confirm an action or report a status.
Bold

Tooltip

A small text label that appears next to an element on hover or focus, briefly explaining what it does.

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.
Tab cycles focus

Focus ring

The visible outline drawn around the element that currently has keyboard focus.
Confirm
Tab stays inside the dialog

Focus trap

Keeping keyboard focus inside a specific region (typically a modal dialog) until that region is dismissed.

Inline validation

Form-field feedback that appears as the user types, rather than waiting until they submit.
Welcome to Flux
A faster way to track what your team is shipping.
Connect your tools
Pull data from GitHub, Linear, and Slack in one click.
You're all set
Your team's first dashboard is ready to view.

Onboarding flow

The guided sequence of screens that walks a user through first use of a product.
Nael
2h ago
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
By Alex Morgan · 6 min read
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.
Keep reading with a free account
Already a member? Sign in.

Paywall

A UI that blocks access to content or features until the user pays or subscribes.

Shimmer

An animated gradient that sweeps across a skeleton placeholder to signal that content is loading.
Sarah Chen
2 min read
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.
Tab reveals 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 in last week.

Hover card

A preview panel that appears when the user hovers over a link or reference, showing richer content than a tooltip.

Infinite scroll

A list that automatically loads more items as the user scrolls toward the bottom.
Project Mobile App
Title
Untitled document
Status In 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.

Pull to refresh

An interaction where the user drags the top of a scrollable list downward to trigger a refresh.
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.
▶
Intro
0:00
0:00
3:24

Scrubber

A draggable indicator on a timeline that lets the user move through time-based media.
Archive
Delete
Archive

Swipe to dismiss

A horizontal swipe gesture on a list item that removes, archives, or otherwise dismisses it.

Animations

Motion between states. Push, fade, stagger, spring, shared element.

Container transform

A motion where one element morphs into a new view, preserving its identity as it grows.
Inbox
Sent

Crossfade

A transition where one element fades out as another fades in, the two briefly overlapping in opacity.
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.

Parallax scroll

An effect where layers on a page move at different speeds during scroll, creating a sense of depth.
Articles

Push transition

A transition where a new view slides in from the side, pushing the current view off-screen.
animation-timeline: scroll()

Scroll-driven animation

An animation whose progress is tied to scroll position rather than time, advancing as the user scrolls.

Shared element transition

A transition where an element persists visually across two views, moving from its position in one to its position in the next.
Spring
Linear

Spring easing

An animation curve based on the physics of a spring rather than a fixed cubic-bezier function.

Stagger

An animation pattern where a group of elements animates one after another with a small delay between each.
startViewTransition()

View transition

A browser-native transition between two states of a page, where the browser animates the difference automatically.