Tailwind CSS

Types

Buttons

Sizes

Solid Color Variants

Outline Color Variants

Ghost Color Variants

Soft Color Variants

White Color Variants

Link Color Variants

Use the `.rounded-full` utility class to make buttons circular.

Pilled Button

`.w-full` or `.grid` classes will make the button fit to its parent width.

Block Button

Icon

Icon And Spinner

Sizes With Icon

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.

Loading

Make buttons look inactive by adding the `disabled` boolean attribute to any `<button>` element.
`<a>`s don't support the `disabled` attribute.

Disabled

Circlular like and dislike button styles.

Button Examples

These beautifully colored buttons built with the gradient color stops utility classes from Tailwind CSS can be used as a creative alternative to the default button styles.

Gradient Monochrome

These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.

Gradient Duotone

This is a special button style that incorporates a gradient color for the outline that can be used as a secondary style to the fully colored gradient buttons.

Gradient Outline

These beautiful button elements with color shadows can be used since the release of Tailwind v3.0.

Colored Shadows

Use these button styles when building social media login forms using Facebook, Twitter, GitHub, Google, and Apple. These buttons use the new bg-[#hex] utility classes from Tailwind CSS v3.0.

Social Buttons

Use these payment buttons for your product checkout or NFT minting landing page including MetaMask, Opera, Bitcoin, Ethereum, Paypal, Visa, Mastercard, and American Express.

Payment Buttons

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.

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.

Buttons Components

Under Development | Component not Exist