Common UI elements, labeled with canonical names
Use this as a shared language with designers/devs. Each card shows the element preview, the canonical name, and any common synonyms.
Tip: press ? to toggle labels, T to cycle theme accents.
Legend
a11y-friendly / no deps
Canonical name
What I'll call it in conversation & code.
Synonyms
Alternative terms you might hear.
Interactive
Click to see behavior.
Layout
Spacing & structure primitives.
Layout primitives
Container · Grid · Card · Section · Toolbar
Container
Container
Synonyms: page wrapper, max-width container
This page uses a .container to center content.
Grid
Grid
Synonyms: layout grid, columns
Column A
Column B
Card
Card
Synonyms: tile, panel
Cards bundle content & actions.
Form / Input controls
TextField · TextArea · Select · Checkbox · Radio · Switch · Slider · ComboBox
Text Field
Text Field
Synonyms: input, text input
Text Area
Text Area
Synonyms: multiline input
Select
Select
Synonyms: dropdown, native select
Checkbox
Checkbox
Synonyms: box
Radio Group
Radio Group
Synonyms: radio buttons
Switch
Switch
Synonyms: toggle
Slider
Slider
Synonyms: range
ComboBox (Autocomplete)
ComboBox
Synonyms: autocomplete, typeahead
Button
Buttons
Synonyms: primary, secondary, ghost
Data display
Table · List · Card · Avatar · Badge · Chip · Tag
Table
Table
Synonyms: data grid (basic)
| User | Status | Role |
|---|---|---|
| Jane | Active | Admin |
| Raj | Invited | Member |
Chip
Chips / Tags
Synonyms: token, pill
analytics
billing
security
Carousel
Carousel
Synonyms: slider (content)
Feedback & status
Alert · Toast · Tooltip · Popover · Progress · Spinner · Skeleton
Alert
Alert
Synonyms: banner
Success alert — saved.
Warning alert — check settings.
Error alert — something failed.
Tooltip
Tooltip
Synonyms: hover hint
Tooltip content
Popover is a click-triggered panel:
Popover — lightweight contextual content.
Progress & Loaders
Progress / Spinner / Skeleton
Overlays
Modal/Dialog · Drawer/Sidebar · Accordion · Steps
Accordion
Accordion
Synonyms: expander, disclosure
Section A
Expandable content block.
Section B
More content here.
Stepper
Stepper
Synonyms: wizard, progress steps
1 Account
2 Profile
3 Confirm
Date Picker (mock)
Date Picker
Synonyms: calendar picker
Real apps use richer calendars; this shows the control's name.