Comprehensive UI / UX / GUI Component Inventory (Web, Mobile & Desktop)

1. Introduction

This document is a complete inventory of User Interface (UI), User Experience (UX), and Graphical User Interface (GUI) components. It is intended as a foundational specification for design systems, product requirements, and frontend architecture across web, mobile, and desktop applications.

2. Typography

  1. Heading (H1–H6)
  2. Subheading
  3. Paragraph
  4. Text Block
  5. Rich Text
  6. Markdown Text
  7. Inline Text
  8. Label
  9. Caption
  10. Hint Text
  11. Helper Text
  12. Placeholder Text
  13. Quote
  14. Code Block
  15. Inline Code
  16. Link
  17. External Link
  18. Email Link
  19. Phone Link
  20. Badge Text

3. Input Controls

  1. Text Field
  2. Text Box
  3. Text Area
  4. Rich Text Editor
  5. Password Field
  6. Email Input
  7. Number Input
  8. URL Input
  9. Phone Input
  10. Search Box
  11. Search with Suggestions
  12. Combo Box
  13. Autocomplete Input
  14. Select Dropdown
  15. Multi-Select Dropdown
  16. Dropdown Menu
  17. List Box
  18. Checkbox
  19. Radio Button
  20. Toggle Switch
  21. Slider
  22. Range Slider
  23. Stepper Input
  24. Date Picker
  25. Date Range Picker
  26. Time Picker
  27. DateTime Picker
  28. Calendar Picker
  29. Color Picker
  30. File Upload Input
  31. Drag & Drop Upload
  32. Signature Pad
  33. PIN Input
  34. OTP Input
  35. CAPTCHA
  36. Rating Control
  37. Emoji Picker

4. Buttons

  1. Button
  2. Primary Button
  3. Secondary Button
  4. Tertiary Button
  5. Ghost Button
  6. Outline Button
  7. Text Button
  8. Icon Button
  9. Floating Action Button (FAB)
  10. Split Button
  11. Dropdown Button
  12. Toggle Button
  13. Button Group
  14. Speed Dial Button

5. Navigation

  1. Navigation Bar
  2. Top Navigation
  3. Bottom Navigation
  4. Side Navigation
  5. Sidebar
  6. Navigation Drawer
  7. Hamburger Menu
  8. Mega Menu
  9. Dropdown Menu
  10. Context Menu
  11. Command Menu
  12. Breadcrumb Navigation
  13. Pagination
  14. Tabs
  15. Tab Panel
  16. Stepper Navigation
  17. Wizard Flow
  18. Anchor Navigation
  19. Scrollspy
  20. Back Button
  21. Next / Previous Controls
  22. Tree View Navigation
  23. Sitemap

6. Containers & Layout

  1. Card
  2. Panel
  3. Container
  4. Section
  5. Grid System
  6. Flex Layout
  7. Stack Layout
  8. Split View
  9. Accordion
  10. Collapse Component
  11. Disclosure
  12. Expansion Panel
  13. Tile
  14. List
  15. Table
  16. Data Grid
  17. Data Table
  18. Timeline
  19. Kanban Board

7. Dialogs & Overlays

  1. Modal
  2. Dialog
  3. Popup
  4. Popover
  5. Tooltip
  6. Hover Card
  7. Drawer
  8. Bottom Sheet
  9. Side Sheet
  10. Overlay Layer
  11. Backdrop
  12. Lightbox
  13. Fullscreen Modal

8. Feedback & Notifications

  1. Alert
  2. Banner
  3. Toast
  4. Snackbar
  5. Notification
  6. Confirmation Dialog
  7. Success Message
  8. Warning Message
  9. Error Message
  10. Info Message
  11. Inline Validation Message
  12. Validation Summary

9. Loading Indicators

  1. Spinner
  2. Progress Bar
  3. Circular Progress Indicator
  4. Skeleton Loader
  5. Shimmer Effect
  6. Loading Overlay
  7. Busy Indicator

10. Display Components

  1. Avatar
  2. Avatar Group
  3. Image
  4. Image Gallery
  5. Carousel
  6. Slider Gallery
  7. Video Player
  8. Audio Player
  9. Map View
  10. Icon
  11. Illustration
  12. Logo
  13. Badge
  14. Chip
  15. Tag
  16. Pill
  17. Divider
  18. Separator

11. Data Presentation

  1. List Item
  2. Description List
  3. Statistics Block
  4. KPI Card
  5. Dashboard Widget
  6. Chart
  7. Line Chart
  8. Bar Chart
  9. Pie Chart
  10. Donut Chart
  11. Area Chart
  12. Heatmap
  13. Gauge
  14. Calendar View
  15. Gantt Chart

12. Search & Filtering

  1. Search Component
  2. Search Results
  3. Filter Component
  4. Advanced Filter
  5. Sort Control
  6. Faceted Search
  7. Saved Search
  8. Filter Chips
  9. Search Suggestions

13. User Account Components

  1. Login Form
  2. Registration Form
  3. Password Reset Form
  4. User Profile
  5. User Card
  6. Session Timeout Screen
  7. Multi-Factor Authentication Prompt
  8. Account Menu

14. E-Commerce Components

  1. Product Card
  2. Product Gallery
  3. Product Variant Selector
  4. Shopping Cart
  5. Wishlist
  6. Checkout Stepper
  7. Price Tag
  8. Coupon Input Field
  9. Quantity Selector

15. File Management

  1. File Browser
  2. Folder Tree
  3. Drag & Drop Area
  4. Upload Queue
  5. Download Button
  6. File Preview

16. Mobile-Specific Components

  1. Bottom Sheet
  2. Swipe Action
  3. Pull to Refresh
  4. Floating Navigation
  5. Floating Action Button
  6. Gesture Area
  7. Swipe Carousel

17. System Components

  1. Empty State
  2. Error State
  3. Offline State
  4. Maintenance Screen
  5. Onboarding Flow
  6. Walkthrough
  7. Coach Marks
  8. Feature Tour
  9. Permission Prompt
  10. Cookie Consent Banner
  11. GDPR Consent Dialog
  12. Status Indicator
  13. Presence Indicator

18. Developer & Architecture Components

  1. Component
  2. Widget
  3. Control
  4. Form
  5. Fieldset
  6. Template
  7. Layout
  8. Grid System
  9. Design Token
  10. Theme
  11. Variant
  12. State
  13. Responsive Container

19. Component States

  1. Default State
  2. Hover State
  3. Focus State
  4. Active State
  5. Pressed State
  6. Selected State
  7. Disabled State
  8. Read-Only State
  9. Loading State
  10. Error State
  11. Success State
  12. Warning State
  13. Empty State
  14. Expanded State
  15. Collapsed State
  16. Checked State
  17. Unchecked State
  18. Indeterminate State
  19. Dragging State
  20. Dropping State
  21. Visited State
  22. Hidden State

20. Motion & Micro-Interactions

  1. Button Hover Lift
  2. Button Press Shrink
  3. Icon Rotate on Hover
  4. Underline Slide-In
  5. Card Elevation on Hover
  6. Image Zoom-In Hover
  7. Glow Pulse Hover
  8. Shake Error Feedback
  9. Bounce Success Feedback

21. Loading & Progress Motion

  1. Spinner Rotation
  2. Dots Wave Loader
  3. Skeleton Shimmer
  4. Progress Bar Fill Animation
  5. Circular Progress Sweep
  6. Pulsing Loader
  7. Breathing Placeholder
  8. Wave Loading Cards

22. Page & Layout Transitions

  1. Fade Page Transition
  2. Slide Page Left / Right
  3. Zoom Transition
  4. Blur-In Content Load
  5. Staggered List Reveal
  6. Grid Cascade Animation
  7. Route Transition Animation

23. Overlay, Modal & Navigation Motion

  1. Scale-In Modal
  2. Fade + Blur Backdrop
  3. Bottom Sheet Slide-Up
  4. Drawer Slide-In
  5. Popover Spring Open
  6. Tooltip Fade + Offset Shift
  7. Tab Underline Glide
  8. Sidebar Collapse / Expand
  9. Menu Morph Animation
  10. Hamburger Morph to Close Icon
  11. Breadcrumb Fade Shift
  12. Scrollspy Highlight Transition

24. Data Visualization Motion

  1. Bar Chart Grow Animation
  2. Line Chart Draw Animation
  3. Pie Chart Rotate Reveal
  4. Counter Increment Animation
  5. Gauge Sweep Animation
  6. Heatmap Fade Intensity

25. Gesture-Based & Mobile Interaction Motion

  1. Swipe to Delete
  2. Pull-to-Refresh Animation
  3. Drag Reorder List
  4. Long Press Reveal Menu
  5. Swipe Card Deck
  6. Pinch Zoom Interaction
  7. Momentum Scroll

26. Feedback Animation Patterns

  1. Success Checkmark Draw
  2. Error Shake + Red Flash
  3. Warning Pulse
  4. Toast Slide In / Out
  5. Notification Stack Animation
  6. Inline Validation Fade

Main UI/UX + AI design modes

Neumorphism Liquid Glass Soft UI Minimalism Maxmimalism Brutalism Flat UI Claymorphism Bento Grid Material UI Skeuomorphism Glassmorphism Spatial UI

Principles

UI/UX: <-Liiga kirju pilt… Vähe kirju / liiga lihtne -> UI/UX: Eeldatav info koheselt UI/UX: Vähem klikke eeldatava infoni või funktsionaalsuseni. Ideal 0, normal 2, abnormal already 3. UI/UX: Darkmode, Lihtmode UI/UX: Shortcut, shorthand to resources UI/UX: look and feel anf experience as App - Users want App experience REQ: Ui view shouldwork in FF Reader mode also. Brauser is for humans. At least at the moment.

See also