A navbar (navigation bar) is a horizontal bar typically positioned at the top of a webpage. It contains links to the main sections of the website, providing easy navigation for users. Navbars often include a logo, menu items, and other elements such as search bars or login buttons.

Navbar

A hero section is a large, prominent area at the top of a webpage, often featuring a compelling image or video, a headline, and a call-to-action button. 

Hero

The features section highlights the key features or benefits of a product or service. It often includes icons, images, and brief descriptions to illustrate the unique selling points and advantages.

Features

The pricing section provides detailed information about the cost of products or services, including different pricing tiers, features included at each level, and any special offers or discounts.

Pricing

The FAQ (Frequently Asked Questions) section addresses common questions and concerns that users might have. It provides concise and helpful answers to improve user understanding and reduce support inquiries.

The blog section is the part of the webpage where blog posts are displayed. It typically includes a list of recent posts, categories, and search functionality to help users find relevant content.

Blog

The article section is the part of the webpage where individual articles are displayed. It often includes the article's title, author, publication date, and the main content.

Article

The team section showcases the people behind a company or project. It typically includes photos, names, roles, and brief bios of team members, helping to build trust and personal connection with users.

Team

The testimonials section features quotes and reviews from satisfied customers or clients. It serves to build credibility and trust by showcasing positive experiences and endorsements.

Testimonials

The clients section lists the companies or individuals who use a product or service. It often includes logos or names of prominent clients to build credibility and demonstrate the user base.

Clients

The galleries section is the part of the webpage where image or media collections are presented. It is used to showcase visual content in a structured and appealing way.

Galleries

The contact section provides users with ways to get in touch with the company or organization. It typically includes a contact form, phone number, email address, and physical address.

Contact

The login section allows users to enter their credentials to access a restricted area of the website. It typically includes fields for a username and password and may offer options for password recovery or account creation.

Login

A footer is a section at the bottom of a webpage, containing supplementary information such as copyright notices, links to privacy policies, contact information, and additional navigation links.

Footer

The call to action section is the part of the webpage dedicated to presenting one or more CTAs. It is strategically placed to motivate users to engage with the website's offerings.

Call to Action

A product card component is a versatile UI element used to display essential information about a product in a compact and visually appealing format. It is designed to provide users with a quick overview of the product, including images, titles, descriptions, prices, and call-to-action buttons.

Product Card

An error section displays messages when something goes wrong on a webpage, such as a broken link or a failed form submission. It provides users with information about the error and guidance on how to proceed.

Error

Online stores where products or services are sold. Examples include Amazon, eBay, and Shopify stores.

E-commerce Websites

AI Websites

Websites where users can create profiles, connect with others, and share content. Examples include Facebook, Twitter, and LinkedIn.

Social Media Platforms

Sites that offer entertainment content such as videos, games, music, and other media. Examples include YouTube, Netflix, and gaming sites.

Entertainment Websites

Platforms dedicated to learning and education, offering courses, tutorials, and resources. Examples include Khan Academy, Coursera, and educational institution websites

Educational Websites

Websites that showcase the work, projects, or achievements of individuals or companies. These are often used by artists, designers, photographers, and freelancers.

Portfolio Websites

Websites providing information, advice, and resources related to health, fitness, nutrition, and wellness. Examples include WebMD, Healthline, and fitness blogs.

Health and Wellness Websites

Platforms where individuals or groups regularly publish articles, opinions, or other content. Examples include WordPress blogs, Medium, and Tumblr.

Blog Websites

Online discussion platforms where users can post questions, share opinions, and engage in conversations with others. Examples include Reddit, Quora, and Stack Overflow.


Forum Websites

Websites created by businesses or organizations to provide information about their products, services, and activities. These can range from small business sites to large corporate portals.


Corporate Websites

Websites of newspapers, magazines, TV channels, and other media outlets that provide news, articles, and multimedia content.

Media Websites

Websites created by individuals to showcase their personal interests, hobbies, or achievements. These can include personal blogs, online resumes, and hobbyist sites.

Personal Websites

Platforms offering travel-related information, booking services, reviews, and recommendations for destinations, accommodations, and activities. Examples include Expedia, Booking.com, and Lonely Planet.

Travel Websites

Websites dedicated to buying, selling, renting, or leasing properties. Examples include Zillow, Realtor.com, and apartment listing sites.

Real Estate Websites

Websites where employers can post job openings and job seekers can search for employment opportunities. Examples include LinkedIn, Indeed, and Monster.

Job Portals

Platforms focused on video games, offering news, reviews, forums, and downloads. Examples include IGN, Gamespot, and Steam.

Gaming Websites

Platforms offering recipes, cooking tips, restaurant reviews, and food-related content. Examples include AllRecipes, Food Network, and cooking blogs

Food and Cooking Websites

Platforms offering news, reviews, and analysis related to technology products, gadgets, and trends. Examples include The Verge, TechCrunch, and tech blogs.

Technology Websites

Websites dedicated to pets, including pet care tips, product reviews, and pet adoption resources. Examples include Petfinder, Chewy, and pet care blogs.

Pet Websites

An accordion is a vertically stacked list of items that allows the user to toggle the display of additional information. Each item can be expanded or collapsed to show or hide its content, providing an efficient way to manage space on the webpage.

Accordion

Alerts are used to provide feedback messages to users. They typically appear as a block of text with a background color that indicates the type of message, such as success, error, warning, or informational.

Alerts

An avatar is a graphical representation of a user or an entity. It is often a circular image or icon used in profiles, user menus, or messaging applications to represent the user visually.

Avatar

An avatar group displays multiple avatars together, often in a clustered or overlapping manner. This is useful for representing multiple users, such as members of a team or participants in a group chat.

Avatar Group

A badge is a small, visual indicator often used to show a count, status, or label. It can be attached to another element, such as an icon or a button, to highlight important information like notifications or unread messages.

Badge

A blockquote is a section of text that is quoted from another source. It is typically displayed with indentation and may include citation information. This element is used to highlight and give visual emphasis to the quoted text.

Blockquote

Buttons are interactive elements that users can click to perform an action or trigger an event. They come in various styles and sizes, and can include icons, text, or both. Buttons are fundamental for user interaction on a website.

Buttons

A button group is a set of buttons grouped together in a single line or block. This is useful for organizing related actions and providing a more cohesive and streamlined user interface.

Button Group

A card is a container that holds a variety of content and actions about a single subject. Cards can include text, images, links, and buttons. They are used to group related information in a visually appealing way.

Card

Chat bubbles are used in messaging interfaces to display individual messages. Each bubble represents a message sent by a user, often styled to differentiate between messages from different users.

Chat Bubbles

A carousel is a rotating set of images or content, typically displayed one at a time. Users can navigate through the carousel using controls like arrows or dots. It is used to showcase multiple items in a limited space.

Carousel

A collapse component allows content to be toggled between a hidden and visible state. It is often used to create expandable sections within a webpage, providing a way to show or hide content as needed.

Collapse

A datepicker is an interactive element that allows users to select a date from a calendar interface. It simplifies date input by providing an easy and intuitive way for users to choose dates.

Datepicker

The devices component is used to showcase how a website or application looks on different devices such as desktops, tablets, and mobile phones. It is often used for responsive design demonstrations.

Devices

Lists are used to display a collection of items in a specific order. They can be ordered (numbered) or unordered (bulleted). Lists are a fundamental way to organize and present information.

Lists

List groups are a more advanced version of lists that provide additional styling and functionality. They can include badges, icons, and other elements to enhance the visual presentation and interactivity of list items.

Lists Group

A legend indicator is used to explain the meaning of various colors, symbols, or styles used in charts, graphs, or maps. It helps users understand the data representation.

Legend Indicator

Progress bars visually represent the completion status of a task or process. They are used to provide feedback to users about the progress of an ongoing operation.

Progress

File uploading components allow users to upload files from their local device to a server. This can include drag-and-drop interfaces, progress indicators, and file type validation.

File Uploading

Ratings components enable users to provide feedback in the form of stars, numbers, or other symbols. They are often used for reviews, surveys, and feedback forms.

Ratings

Spinners are animated indicators used to show that a process is ongoing. They are often displayed while content is loading or a task is being processed.

Spinners

Static icons are graphical elements that represent actions, objects, or concepts. They are used to enhance the visual appeal and usability of a user interface.

Static Icons

A stepper component displays a sequence of steps in a process. It helps users navigate through a multi-step workflow, indicating their current position and progress.

Stepper

Toasts are small, transient notification messages that appear on the screen to provide feedback or updates to the user. They automatically disappear after a short period.

Toasts

A timeline component visually represents chronological events or steps in a process. It is useful for displaying historical data, project milestones, or any sequence of events.

Timeline

Skeleton components are placeholders that provide a visual indication of content loading. They are often used to improve perceived loading times by showing a basic structure of the content before it fully loads.

Skeleton

A tree view displays hierarchical data in a collapsible tree structure. It allows users to expand and collapse nodes to navigate through nested data, such as file directories or organizational structures.

Tree View

A banner is a prominent, large section of a webpage, often positioned at the top. It is used to display important messages, promotional content, or branding.

Banner

Bottom navigation is a user interface element located at the bottom of the screen, providing easy access to key navigation destinations. It is commonly used in mobile applications and responsive web designs to allow users to quickly switch between different sections or views.

Bottom Navigation

The clipboard component enables users to copy text or other content to their system's clipboard. 

Clipboard

A gallery component displays a collection of images or media in an organized and visually appealing layout. Galleries can include features like lightbox previews, slideshows, and thumbnail navigation to enhance the user experience when viewing media content.

Gallery

A jumbotron is a large, full-width section used to showcase key content, such as a hero message or a primary call to action. It often includes a prominent heading, supporting text, and buttons. 

Jumbotron

The <kbd> (keyboard input) element is used to display text that represents user input via a keyboard. It is often styled to resemble actual keyboard keys, providing a visual cue that the text is meant to be typed by the user. 

A speed dial component provides quick access to a set of frequently used actions or options. It is typically represented as a floating action button that, when clicked, expands to reveal additional actions.  

Speed Dial

Headings are used to define the titles and subtitles within a webpage. They range from <h1> to <h6>, with <h1> being the most important and typically the largest, and <h6> being the least important and smallest. Headings help organize content, improve readability, and enhance SEO by providing a clear structure.

Headings

Paragraphs are blocks of text used to present written content in a clear and readable format. In HTML, paragraphs are defined using the <p> tag. They help break down text into manageable sections, making it easier for users to read and understand the information.

Paragraphs

Images are visual elements embedded in webpages to support content, enhance aesthetics, and convey information. In HTML, images are added using the <img> tag, with attributes such as src (source), alt (alternative text), and title (tooltip text). Proper use of images can significantly improve user engagement and comprehension.

Images

Text refers to any written content on a webpage, including headings, paragraphs, lists, and other typographic elements. Properly formatted text, using tags such as <strong>, <em>, <u>, and <span>, helps convey meaning, emphasize important points, and improve the overall readability and accessibility of the content.

Text

The <hr> (horizontal rule) element is used to create a thematic break or divider between sections of content. It visually separates different parts of a webpage, enhancing the organization and readability. 

A mega menu is an expandable menu that provides a large panel for navigation links and content. It often includes multiple columns and can feature images, icons, and various types of content. 

Mega Menu

Navs, short for navigations, are components that provide links for navigating between different sections or pages of a website. They can be styled as horizontal or vertical menus and are often used to create tabbed interfaces.

Navs

Tabs are components that allow users to switch between different sections of content within the same page. Each tab, when clicked, displays a different content panel while hiding the others. Tabs are useful for organizing content and improving user experience by keeping related information together.

Tabs

A sidebar is a vertical column usually positioned on the left or right side of a webpage. It contains supplementary content such as navigation links, advertisements, or additional information.

Sidebar

Scrollspy is a component that automatically updates navigation or indicator elements based on the user's scroll position. It highlights the section currently being viewed, making it easier for users to understand their location on the page and navigate to different sections.

Scrollspy

Breadcrumbs are a type of navigation aid that displays the user's current location within the website's hierarchy.

Breadcrumb

Pagination is a component that divides content into discrete pages, allowing users to navigate through large sets of data or content one page at a time. It typically includes controls such as previous, next, and numbered page links.

Pagination

An input component is a field where users can enter data. It is a fundamental element in forms, allowing users to provide information such as text, numbers, email addresses, and more.

Input

An input group is a set of input elements grouped together to enhance the functionality and user experience.

Input Group

A textarea is an input component that allows users to enter multi-line text. It is used for collecting longer pieces of information, such as comments, messages, or descriptions.

Textarea

A file input component allows users to upload files from their local device. It is typically represented by a button or an input field that opens a file dialog when clicked.

File Input

A checkbox is an input component that allows users to select one or more options from a set. Each checkbox operates independently, enabling multiple selections.

Checkbox

A radio button is an input component that allows users to select only one option from a predefined set. Radio buttons are grouped together, ensuring that only one selection can be made at a time.

Radio

A switch is a toggle input component that allows users to switch between two states, such as on and off. It provides a more visual and interactive alternative to checkboxes for binary choices.

Switch

A select component is a dropdown menu that allows users to choose one option from a list. It is created using the <select> tag along with <option> tags for each choice.

Select

A range slider is an input component that allows users to select a value or range of values by sliding a handle along a track. 

Range Slider

A color picker is an input component that allows users to select a color from a palette or by entering a color code.

Color Picker

Our form component provides a user-friendly and responsive interface for collecting data from users. It includes features such as validation, error handling, and customizable styling to ensure a seamless experience for both users and developers.

Form

Our grid component offers a flexible and responsive layout system for organizing content on web pages. It supports features such as responsive breakpoints, custom column widths, and nested grids to help developers create visually appealing and well-structured layouts.

Grid

Dropdown

Modal

Offcanvas

Popover

Tooltip

Tables are used to display data in a structured, grid-like format, consisting of rows and columns. Each cell within a table can contain text, images, or other elements. Tables are useful for organizing and presenting information in a clear and concise manner, making it easy for users to compare data.

Tables

The "Others" category encompasses various components and features that do not fit neatly into specific predefined categories. 

Others

Miscellaneous components are additional elements or features that may not fall under conventional categories but are essential for the website’s functionality or aesthetics.

Examples

100s of free responsive and accessible tailwindcss, bootstrap and many more components and examples.

Blocks