Components

The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page.

Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.

Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows

Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.

The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode.

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.

Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS

The input field is an important part of the form element that can be used to create interactive controls to accept data from the user based on multiple input types, such as text, email, number, password, URL, phone number, and more.

The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.

A text element that identifies form controls and other content.

Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles

Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes

The radio component can be used to allow the user to choose a single option from one or more available options coded with the utility classes from Tailwind CSS and available in multiple styles, variants, and colors and support dark mode.

Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants

Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.

An indicator that can be used to show a loading state.

Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells

Use the following default tabs component example to show a list of links that the user can navigate from on your website.

The textarea component is a multi-line text field input that can be used to receive longer chunks of text from the user in the form of a comment box, description field, and more.

Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors