Ui Component

Navigation and Header Components

  1. Navbar (Main Navigation)
  2. Breadcrumbs
  3. Mega Menu
  4. Search Bar
  5. Top Bar (e.g., announcements, contact info)
  6. Hero Section (with a big banner or call-to-action)
  7. Sticky Header
  8. Language Switcher

Introduction and Presentation Components

  1. Hero Slider (Image/Video Slider)
  2. About Section (Company/Personal Introduction)
  3. Intro with Image/Text
  4. Highlight/Feature Boxes
  5. Video Presentation
  6. Tagline or Motto

Content Display Components

  1. Card Component (for displaying content snippets)
  2. Accordion or FAQ Section
  3. Tabs Component
  4. Testimonials
  5. Team Members Section
  6. Portfolio or Gallery
  7. Pricing Tables
  8. Services Overview
  9. Case Studies

Marketing and Call-to-Action Components

  1. Call-to-Action (CTA) Section (e.g., “Sign Up Now”)
  2. Newsletter Signup
  3. Promo Banners
  4. Offers or Discounts
  5. Lead Capture Forms
  6. Comparison Tables

E-Commerce Specific Components

  1. Product Cards
  2. Product Sliders
  3. Product Details Section
  4. Shopping Cart
  5. Wishlist
  6. Checkout Form
  7. Order Summary
  8. Category Listing
  9. Search and Filters

Engagement Components

  1. Live Chat Widget
  2. Contact Forms
  3. Social Media Links
  4. Reviews and Ratings
  5. Polls and Surveys
  6. Events Calendar
  7. Discussion Forums

Media Display Components

  1. Image Galleries
  2. Video Player
  3. Audio Player
  4. Carousels
  5. Lightbox Modal

Blog and Article Components

  1. Blog Post List
  2. Article Content
  3. Author Bio
  4. Comment Section
  5. Related Posts

Footer Components

  1. Footer Navigation
  2. Contact Info
  3. Quick Links
  4. Social Media Icons
  5. Copyright Notice
  6. Back-to-Top Button

Utility Components

  1. Loading Spinner
  2. 404 Error Page
  3. Search Results
  4. Pagination
  5. Filter and Sorting
  6. Notifications/Alerts

Custom Components

  1. Countdown Timer
  2. Progress Bars
  3. Milestones/Stats
  4. Timeline
  5. Event Schedules
  6. Interactive Maps
  7. Forms (Login, Signup, Feedback, etc.)

Interactive Components

  1. Hover Effects
  2. Flip Cards
  3. Animated Counters
  4. Interactive Charts
  5. Dynamic Tabs

Advanced Components

  1. Dynamic Table (e.g., for admin panels)
  2. Dashboard Widgets
  3. File Upload
  4. Notifications (Toast, Snackbar)
  5. Modals and Dialogs
  6. Date Picker

This list is a mix of essential and advanced components to cover various types of websites like e-commerce, portfolios, corporate, blogs, or applications. Let me know if you need detailed examples or code snippets for any specific component!

Leave a Comment