AI DevDictionary
Decode AI terminology with interactive examples. Understand what AI really means when it suggests UI components and development patterns.
Modal
A window that appears on top of the main content, requiring user interaction before continuing
Card
A rectangular container that groups related information together, like a playing card
Avatar
A small image or icon representing a user
Chip
Small, interactive element often used for tags or filters that can be removed
Floating Action Button
Circular button that floats above content, usually in the bottom corner
Table
Displays data in rows and columns, like an Excel spreadsheet
List
A vertical arrangement of items, like a shopping list or to-do list
Carousel
A rotating display of images or content, like a photo slideshow
Virtual List
List that only renders visible items for better performance
Data Grid
Advanced table with sorting, filtering, and editing capabilities
Timeline
Visual representation of events in chronological order
Tree View
Hierarchical view of nested items, like file explorers
Checkbox
A small box that can be checked or unchecked, allowing multiple selections
Radio Button
Circular buttons where only one option can be selected from a group
Switch
A sliding button that toggles between on and off states
Input Field
A box where users can type text, like their name or email
Select Box
A dropdown list where users can choose one option from many
Date Picker
A calendar interface for selecting dates
Floating Label
Input label that moves above the field when focused or filled
Form Validation
Checking user input for errors and showing helpful messages
Autocomplete
Suggests options as the user types, like Google search
Multi-step Form
Form divided into multiple steps or pages
Tag Input
Input field for adding multiple tags or keywords
Range Slider
Slider for selecting a value or range between minimum and maximum
Sidebar
A vertical panel on the side of the page, often used for navigation
Header
The top section of a page, usually containing logo and main navigation
Footer
The bottom section of a page, often containing links and copyright info
Grid Layout
A layout system that arranges content in rows and columns
Hero Section
The large, prominent section at the top of a homepage
Sticky Header
Header that stays at the top of the page when scrolling
Navigation Bar
The main navigation menu, usually at the top of a website
Breadcrumb
Shows the user's location in a website hierarchy, like a trail of breadcrumbs
Pagination
Controls to navigate through multiple pages of content
Stepper
Shows progress through a multi-step process, like a checkout flow
Mega Menu
Large dropdown menu with multiple columns and sections
Toast
A brief message that appears temporarily, usually at the edge of the screen
Alert
A prominent message box that displays important information or warnings
Badge
Small label or indicator often used to show status, count, or category
Progress Bar
Visual indicator showing the completion status of a task or process
Spinner
Animated indicator that shows something is loading or processing
Skeleton
Placeholder UI that shows the structure of content while it's loading
Empty State
Message or illustration shown when there's no data to display
Push Notification
System-level notifications that appear outside the browser
Loading Overlay
Full-screen or partial overlay showing content is loading
Confirmation Modal
Modal asking user to confirm an action before proceeding
Success State
Visual feedback showing an action completed successfully
Dropdown
A menu that appears when clicked, showing a list of actions or options
Accordion
Expandable/collapsible content sections that show or hide information
Tabs
Navigation component that switches between different views or content sections
Tooltip
Small text that appears when hovering over an element to provide additional information
Drawer
A panel that slides in from the edge of the screen
Infinite Scroll
Automatically loads more content as the user scrolls down, like social media feeds
Lazy Loading
Loading content only when needed, improving initial page load speed
Drag and Drop
Interface allowing users to drag items and drop them in different locations
Swipe Gesture
Touch or mouse gesture to trigger actions by swiping
Pull to Refresh
Pulling down on content to refresh or reload it
Search with Filters
Search functionality combined with multiple filter options
Live Search
Search that shows results instantly as you type
Bottom Sheet
Panel that slides up from the bottom of the screen