UI Vocabulary Reference

UI Elements Cheat Sheet

Learn the proper names for UI components so you can prompt AI tools more effectively. Click on any card to see details and prompt suggestions.

Successfully saved!
Error occurred

Toast / Snackbar

Feedback
Logo
HomeAboutContact

Navigation Bar (Navbar)

Navigation
What is an accordion?
How does it work?
Click to expand or collapse content sections.

Accordion

Layout

Delete item?

This cannot be undone.

Modal / Dialog

Overlays

Product Name

Short description

$29.99

Card

Data Display
HomeProductsDetails

Breadcrumbs

Navigation
Tab content appears here...

Tabs

Navigation
Select option

Dropdown / Select

Input Fields

Toggle / Switch

Input Fields
Notifications

Tooltip

Overlays
NewActive3Premium

Badge / Chip

Data Display
JD

Avatar

Data Display

Progress Bar

Feedback

Spinner / Loader

Feedback

Skeleton

Feedback
Your trial expires in 3 days

Alert / Banner

Feedback
Dashboard
Profile
Settings

Sidebar

Navigation

Input Field

Input Fields

Carousel / Slider

Data Display

Pagination

Navigation

Button

Actions

Checkbox

Input Fields

Radio Button

Input Fields
$0$60$100

Range Slider

Input Fields
Cart
2
Shipping
3
Payment

Stepper / Wizard

Navigation
4.0 (128 reviews)

Rating

Input Fields
Name
Status
Role
John Doe
Active
Admin
Jane Smith
Pending
User

Table / Data Table

Data Display
OR

Divider / Separator

Layout

Context Menu

Overlays

Popover Title

This is additional content in a popover.

Popover

Overlays

Filter Options

Drag down to close

Drawer / Sheet

Overlays
December 2024
Su
Mo
Tu
We
Th
Fr
Sa
1
2
3
4
5
6
7

Date Picker / Calendar

Input Fields
⌘K

Search Bar

Input Fields

Drop files here or click to upload

PNG, JPG up to 10MB

File Upload / Dropzone

Input Fields

Order placed

Dec 20, 2024

Shipped

Pending

Timeline

Data Display
Suggestions

Command Palette

Navigation

Autocomplete / Combobox

Input Fields
0/500

Textarea

Input Fields

Company

About

Careers

Support

Help

Contact

© 2024 Company Inc.

Footer

Layout
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Scroll Area

Layout
@username

John Doe

@username

Full-stack developer. Building cool stuff.

Hover Card

Overlays
2

Number Input / Quantity Selector

Input Fields
4
2
0

OTP / Verification Input

Input Fields
Panel A
Panel B

Resizable Panels

Layout

Bottom Navigation

Navigation

No documents yet

Get started by creating your first document

Empty State

Feedback
A
B
C
+5

Avatar Group / Stack

Data Display
⌘K
Ctrl+C

Keyboard Shortcut / Kbd

Data Display
React TypeScript

Chip Input / Tag Input

Input Fields
16:9
1:1

Aspect Ratio Container

Layout
Hidden content that can be expanded or collapsed.

Collapsible Section

Layout

Color Picker

Input Fields
3
Messages

Notification Dot / Indicator

Feedback

Ready to build amazing UIs?

Now that you know the vocabulary, check out our prompt templates to start creating.

Browse Prompt Templates