Flowbite HTML UI Components

Flowbite HTML UI Components

This skill provides comprehensive reference documentation for Flowbite, a component library built on top of Tailwind CSS. Use this skill when you need to create or work with Flowbite UI components in HTML.

When to Use This Skill

Use this skill when:

• Building HTML interfaces with Tailwind CSS and Flowbite
• Creating or modifying Flowbite components (buttons, modals, forms, etc.)
• Looking for Flowbite component examples and syntax
• Need guidance on Flowbite styling patterns and utility classes
• Working with Flowbite's responsive design patterns

Available Components and Documentation

Below is a complete index of all available Flowbite components and utilities. Each component has detailed documentation with examples, variants, and usage guidelines.

Components

• Accordion: Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options

  • Reference: components/accordion.md

• Alerts: Show contextual information to your users using alert elements based on Tailwind CSS

  • Reference: components/alerts.md

• Avatar: 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

  • Reference: components/avatar.md

• Badges: Use Tailwind CSS badges as elements to show counts or labels separately or inside other components

  • Reference: components/badge.md

• Bottom Navigation: Use the bottom navigation bar component to allow users to navigate through your website or create a control bar using a menu that is positioned at the bottom of the page

  • Reference: components/bottom-navigation.md

• Breadcrumbs: Show the location of the current page in a hierarchical structure using the Tailwind CSS breadcrumb components

  • Reference: components/breadcrumb.md

• Button Group: Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line

  • Reference: components/button-group.md

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

  • Reference: components/buttons.md

• Cards: Get started with a large variety of Tailwind CSS card examples for your web project

  • Reference: components/card.md

• Carousel: Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options

  • Reference: components/carousel.md

• Chat Bubble: Use the chat bubble component to show chat messages in your web application including voice notes, images, galleries and other attachments based on multiple styles and variations

  • Reference: components/chat-bubble.md

• Copy to Clipboard: Use the clipboard component to copy text, data or lines of code to the clipboard with a single click based on various styles and examples coded with Tailwind CSS and Flowbite

  • Reference: components/clipboard.md

• Datepicker: Start receiving date and time data from your users using this free datepicker element based on Tailwind utility-classes and vanilla JavaScript

  • Reference: components/datepicker.md

• Device Mockups: Use the device mockups component to add content and screenshot previews of your application inside phone and tablet frames coded with Tailwind CSS and Flowbite

  • Reference: components/device-mockups.md

• Drawer (offcanvas): The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements

  • Reference: components/drawer.md

• Dropdown: Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements

  • Reference: components/dropdowns.md

• Footer: Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo

  • Reference: components/footer.md

• Forms: Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users with Flowbite

  • Reference: components/forms.md

• Gallery (Masonry): Use the image gallery component based on a masonry grid layout using flex and grid classes from Tailwind CSS to show multiple pictures based on various styles

  • Reference: components/gallery.md

• Indicators: 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

  • Reference: components/indicators.md

• Jumbotron: Use the jumbotron component to show a marketing message to your users based on a headline and image inside of a card box based on Tailwind CSS

  • Reference: components/jumbotron.md

• KBD (Keyboard): Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components

  • Reference: components/kbd.md

• List Group: Use the list group component to display a series of items, buttons or links inside a single element

  • Reference: components/list-group.md

• Mega Menu: Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles.

  • Reference: components/mega-menu.md

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

  • Reference: components/modal.md

• Navbar: The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns

  • Reference: components/navbar.md

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

  • Reference: components/pagination.md

• Popover: Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles

  • Reference: components/popover.md

• Progress Bar: Use the progress bar component to show the completion rate of a data indicator or use it as a loader element

  • Reference: components/progress.md

• QR Code Generator: Use this component to generate and show QR codes based on text or URL that can be scanned with device phone cameras and other devices using the Flowbite library based on Tailwind CSS

  • Reference: components/qr-code.md

• Rating: Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes

  • Reference: components/rating.md

• Sidebar: Use the sidebar component to show a list of menu items and multi-level menu items on either side of the page to navigate on your website

  • Reference: components/sidebar.md

• Skeleton: The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video

  • Reference: components/skeleton.md

• Speed Dial: The speed dial component can be used as a quick way to show a list of action buttons to a user when hovering or clicking on the main trigger element.

  • Reference: components/speed-dial.md

• Spinner: Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS

  • Reference: components/spinner.md

• Stepper: Use the stepper component to show the number of steps required to complete a form inside your application based on Tailwind CSS

  • Reference: components/stepper.md

• Sticky Banner: Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS

  • Reference: components/banner.md

• Table: 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

  • Reference: components/tables.md

• Tabs: Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container

  • Reference: components/tabs.md

• Timeline: Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants

  • Reference: components/timeline.md

• Toast: Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions

  • Reference: components/toast.md

• Tooltip: Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element

  • Reference: components/tooltips.md

• Typography: Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class

  • Reference: components/typography.md

• Video: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS

  • Reference: components/video.md

Customize

• Colors: Customize the default colors of Flowbite using the default color variables from the Tailwind CSS framework

  • Reference: customize/colors.md

• Configuration: Learn how to customize the default Flowbite and Tailwind CSS options and styles

  • Reference: customize/configuration.md

• Dark Mode: Learn how to configure and build a dark mode switcher for Tailwind CSS using Flowbite and start developing with the components from the library

  • Reference: customize/dark-mode.md

• Icons: Use a free and open-source set of SVG icons built for Tailwind CSS and the Flowbite UI component library featuring hundreds of solid and outline styles

  • Reference: customize/icons.md

• Optimization: Optimize your project for production use by setting up Flowbite and Tailwind CSS using our guide

  • Reference: customize/optimization.md

• RTL (Right-To-Left): Learn how to setup and configure bidirectional text formats (RTL and LTR) in your project using native Tailwind CSS variants and the Flowbite UI components

  • Reference: customize/rtl.md

• Theming: Use the theming options from Tailwind CSS to set native CSS theme variables to add new colors, fonts, spacings and create new utility classes to customize your project

  • Reference: customize/theming.md

• Variables: Learn how to use the custom variables from Tailwind CSS to theme your project based on the additional theme variables provided by Flowbite

  • Reference: customize/variables.md

Forms

• Checkbox: Get started with the checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors

  • Reference: forms/checkbox.md

• File Input: Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes

  • Reference: forms/file-input.md

• Floating Label: Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes

  • Reference: forms/floating-label.md

• Input Field: Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types

  • Reference: forms/input-field.md

• Number Input: Use the number input component to set a numeric value inside a form field based on multiple styles, variants, and layouts that can be used in product pages, forms, and more

  • Reference: forms/number-input.md

• Phone Input: Use the phone number input component from Flowbite to set a phone number inside a form field and use a dropdown menu to select the country code based on various styles, sizes and colors

  • Reference: forms/phone-input.md

• Radio: Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors

  • Reference: forms/radio.md

• Range Slider: Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options

  • Reference: forms/range.md

• Search Input: Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes

  • Reference: forms/search-input.md

• Select: 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

  • Reference: forms/select.md

• Textarea: Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants

  • Reference: forms/textarea.md

• Timepicker: Use the timepicker component from Flowbite to select the time of the day in terms of hours, minutes and even seconds using an input selector based on Tailwind CSS

  • Reference: forms/timepicker.md

• Toggle: 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

  • Reference: forms/toggle.md

Plugins

• Charts: Use the chart and graph components from Flowbite built with Tailwind CSS and ApexCharts to choose from line, area, bar, column, pie, and radial charts and customize them using JavaScript

  • Reference: plugins/charts.md

• Datatables: Use the datatable component to search, sort, filter, export and paginate table data of rows and columns for your web application coded with the utility classes from Tailwind CSS

  • Reference: plugins/datatables.md

• Datepicker: Component documentation

  • Reference: plugins/datepicker.md

• WYSIWYG Text Editor: Use the wysiwyg text editor component from Flowbite to create and modify content by manipulating paragraphs, headings, images and styling them using all available options

  • Reference: plugins/wysiwyg.md

Typography

• Blockquote: The blockquote component can be used to quote text content from an external source that can be used for testimonials, reviews, and quotes inside an article

  • Reference: typography/blockquote.md

• Headings: The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts

  • Reference: typography/headings.md

• Horizontal Line (HR): Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS

  • Reference: typography/hr.md

• Images: The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations

  • Reference: typography/images.md

• Links: The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card

  • Reference: typography/links.md

• Lists: Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite

  • Reference: typography/lists.md

• Paragraphs: Use the paragraph component to create multiple blocks of text separated by blank lines and write content based on multiple layouts and styles based on Tailwind CSS

  • Reference: typography/paragraphs.md

• Text: Learn how to customize text-related styles and properties such as font size, font style, text decoration, font weight and more using Tailwind CSS classes

  • Reference: typography/text.md

• Text Decoration: Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class

  • Reference: typography/text-decoration.md

How to Use This Skill

When you need to work with a specific Flowbite component:

1. Identify the component you need from the index above
2. Reference the documentation by reading the corresponding markdown file
3. Adapt the examples to your specific use case
4. Apply Tailwind utility classes as shown in the examples

Example Usage Pattern

If you need to create a modal dialog:

1. Look for "Modal" in the Components section
2. Read references/components/modal.md for detailed examples
3. Copy and customize the appropriate example for your needs

Component Structure

Each component documentation includes:

• Default examples: Basic component implementation
• Variants: Different styles and configurations
• Sizes: Various size options
• Colors: Color scheme variations
• Customization: How to modify and extend components
• Accessibility: Proper ARIA labels and keyboard navigation
• Dark mode: Support for dark mode variants

Best Practices

• Always include proper Tailwind CSS utility classes as shown in examples
• Use semantic HTML elements for better accessibility
• Test components in both light and dark modes when applicable
• Ensure responsive design using Flowbite's responsive classes
• Follow the exact class names and structure from the documentation for best results

Additional Resources

For more complex implementations or combinations of components, consult multiple component documentation files as needed. The references folder structure mirrors Flowbite's official documentation organization.