Glossary

Plain definitions of the UI patterns and front-end terms that come up when you build product interfaces with React and Tailwind CSS. Each one links to components that put it into practice.

#

:focus-visible: :focus-visible is a CSS pseudo-class that matches a focused element only when the browser decides focus should be shown, typically during keyboard use.

A

Accordion: An accordion is a vertical stack of headings that each expand or collapse a section of content, so users reveal only the parts they need.
ARIA: ARIA (Accessible Rich Internet Applications) is a W3C set of HTML attributes that tells assistive technology what custom UI elements are and their state.

B

backdrop-filter (CSS): backdrop-filter is a CSS property that applies filters such as blur or saturate to whatever is rendered behind an element, the basis of frosted glass UI.
Base UI: Base UI is an open source library of unstyled, accessible React components from the team behind Radix, Floating UI and Material UI.
Bento grid: A bento grid is a layout of rectangular tiles in different sizes on one shared grid, used to show several features or stats at once, like a bento box.
Breadcrumbs: Breadcrumbs are a row of links showing where the current page sits in a site's hierarchy, letting users jump back to any parent level.

C

Combobox: A combobox is an input paired with a popup list of options, where typing filters the list and the user picks a value with the mouse or keyboard.
Command palette: A command palette is a searchable modal, usually opened with Cmd+K or Ctrl+K, that lets users run actions and jump to pages by typing.
Component library: A component library is a collection of reusable, tested UI components, such as buttons, inputs and dialogs, that teams assemble interfaces from.
CSS variables (custom properties): CSS variables, or custom properties, are author-defined properties named with two leading dashes whose values you reuse with var() and that inherit.

D

Dark mode: Dark mode is a color scheme that renders light text on dark surfaces, chosen by the user or taken from the operating system's preference.
Data table: A data table is an interactive grid of records with columns you can sort, filter, paginate and select, built for scanning and acting on structured data.
Design system: A design system is the shared set of principles, tokens, components and guidelines a team uses to build consistent products at scale.
Design tokens: Design tokens are named, platform-agnostic values for design decisions such as colors, spacing, type and shadows, shared between design and code.

E

Empty state: An empty state is what a screen shows when there is no data to display yet, explaining why it is empty and offering the next useful action.

F

FOUC (flash of unstyled content): FOUC (flash of unstyled content) is when a browser briefly paints a page before its styles apply, so users see raw or wrong-looking content flicker.

G

Glassmorphism: Glassmorphism is a UI style that draws panels as frosted glass: a translucent fill, a background blur from backdrop-filter, and a thin light edge.

H

Headless components: Headless components provide behavior, state and accessibility for UI widgets without any styles, so you supply all of the visual design yourself.
Hero section: A hero section is the first full-width block of a landing page, stating what the product does and offering one primary action above the fold.
Hydration (React): Hydration is the process where React attaches event handlers and state to HTML rendered on the server, making the static markup interactive.

I

Infinite scroll: Infinite scroll loads the next batch of content automatically as the user nears the end of a list, instead of asking them to click to another page.

K

Kanban board: A kanban board shows work items as cards in columns that represent stages, so moving a card to another column changes its status.

M

Micro-interactions: Micro-interactions are small, single-purpose moments of feedback, like a toggle sliding or a copy icon becoming a check, that confirm what just happened.
Modal dialog: A modal dialog is a window layered over the page that blocks interaction with everything behind it until the user completes or dismisses it.

N

Neumorphism: Neumorphism is a soft UI style where elements look extruded from or pressed into the background, using paired light and dark shadows on one color.

O

OKLCH: OKLCH is a CSS color space that describes colors by perceptual lightness, chroma and hue, so equal numeric steps look like equal visual steps.
Optimistic UI: Optimistic UI updates the interface immediately as if an action succeeded, then syncs with the server and rolls back if the request fails.

P

Pagination: Pagination splits a long set of results into numbered pages with controls to move between them, so each view loads a fixed, predictable amount.
prefers-reduced-motion: prefers-reduced-motion is a CSS media feature that reports whether the user has asked the operating system to minimize nonessential animation.

R

Radix UI: Radix UI is an open source library of unstyled, accessible React primitives, widely known as the original foundation of shadcn/ui.
React Server Components: React Server Components render only on the server and send their output, not their code, to the browser, which cuts the JavaScript users download.

S

Semantic tokens: Semantic tokens are design tokens named for their purpose, such as fg-muted or danger, rather than their value, so themes can change values safely.
shadcn registry: A shadcn registry is a set of JSON files describing components and their dependencies that the shadcn CLI can install directly into a project.
shadcn/ui: shadcn/ui is an open source collection of React and Tailwind CSS components that you copy into your project with a CLI instead of installing a package.
Skeleton screen: A skeleton screen is a placeholder layout of gray shapes that mirrors a page's structure while its content loads, instead of a blank screen or spinner.
Split-flap display: A split-flap display shows characters on hinged flaps that flip in sequence to change, like a train station departure board, often recreated in CSS.
Stepper (multi-step form): A stepper splits a long form or process into ordered steps and shows progress through them, with one step's fields visible at a time.

T

Tailwind CSS v4: Tailwind CSS v4 is the fourth major version of the utility-first CSS framework, with a faster engine and configuration written in CSS instead of JavaScript.
Toast notification: A toast is a brief, non-modal message that appears at the edge of the screen to confirm an action or report status, then dismisses itself.
Tooltip: A tooltip is a small text label that appears when a control is hovered or focused, describing it briefly without taking space in the layout.

W

WCAG color contrast: WCAG color contrast is the minimum luminance ratio between text or UI and its background: 4.5:1 for body text, 3:1 for large text and UI parts at AA.