# Flowbite Documentation > Flowbite is a free and open-source UI component library based on Tailwind CSS and it provides ready-to-use HTML components with data attributes to enable interactive components and plugins for building modern and responsive websites. This documentation covers all basic aspects and components of Flowbite. ## Documentation sections ### Getting started #### Introduction Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, templates, and more. It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, but also some more advanced interactive elements such as datepickers. All of the elements are built using the utility classes from Tailwind CSS and vanilla JavaScript with support for TypeScript. Here's a quick overview of the Flowbite ecosystem including the open source Tailwind components library, the Figma design files, and the pro version.

}}" class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">

Quickstart

Learn how to get started by downloading and configuring Flowbite locally on your machine and start developing.

}}" class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">

Components

Explore the Tailwind CSS elements such as buttons, navbars, alerts, dropdowns and use them to build your website.

Figma design files

Prototype and design your website before coding with the Flowbite Figma file which is based on the Tailwind CSS classes.

Flowbite Icons

Free and open-source collection of over 430 solid and outline styled SVG icons to use with our UI component library and Figma.

Flowbite Blocks

Take your Figma and Tailwind CSS development to the next level with thousands more elements and pages with Flowbite Pro.

Upgrade to Pro

Check out over 450+ website sections and advanced UI components built with Tailwind CSS and the Flowbite Library.

##### Using Flowbite One of the disadvantages of Tailwind CSS compared to other frameworks is that it doesn't have a base set of components. This makes it really hard to quickly prototype a user interface. This is where Flowbite comes into play: it's basically Tailwind CSS, but you get all of the components that you would normally get with a classic CSS framework like Bootstrap or Bulma. There are over 56 types of UI components including buttons, alerts, breadcrumbs, pagination, and navbars. Flowbite also includes some custom JavaScript that enables interactive components, such as dropdowns, modals, tooltips, and many more. ##### Getting started Flowbite is technically a plugin that can be included into any existing Tailwind CSS project. To get started, you first need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine. ##### Install using NPM Make sure that you have Node.js and Tailwind CSS installed. This guide works with Tailwind v4. 1. Install Flowbite as a dependency using NPM by running the following command: ```bash npm install flowbite ``` 2. Import the default theme variables from Flowbite inside your main `input.css` CSS file: ```css @import "flowbite/src/themes/default"; ``` 3. Import the Flowbite plugin file in your CSS: ```css @plugin "flowbite/plugin"; ``` 4. Configure the source files of Flowbite in your CSS: ```css @source "../node_modules/flowbite"; ``` 5. Include the JavaScript code that powers the interactive elements before the end of your `` tag: ```html ``` Learn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/). If you have and old project with Tailwind CSS v3 then [check out this guide](#tailwind-css-v3-to-v4) to learn how to upgrade to v4. ##### Include using CDN The quickest way to get started working with Flowbite is to include the CSS and JS into your project via CDN. Require the following minified stylesheet inside the `head` tag: ```html ``` And include the following JavaScript file before the end of the `body` element: ```html ``` Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes. ##### Bundled JavaScript One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box. You can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this: ```javascript import 'flowbite'; ``` This file has access to all of the components and it automatically applies event listeners to the data attributes. ##### Data attributes The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy. For example, to set up a modal component all you need to do is use `data-modal-target` and `data-modal-{toggle|show|hide}` to toggle, show, or hide the component by clicking on any trigger element. ##### Init functions You can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt: ```javascript ``` The `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`. You can view more examples by browsing the [components from Flowbite](#components). ##### ESM and CJS Flowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks. Here's an example how you can import and create a new Modal component inside JavaScript: ```javascript import { Modal } from 'flowbite' const $modalElement = document.querySelector('#modalEl'); const modalOptions = { placement: 'bottom-right', backdrop: 'dynamic', backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40', onHide: () => { console.log('modal is hidden'); }, onShow: () => { console.log('modal is shown'); }, onToggle: () => { console.log('modal has been toggled'); } } const modal = new Modal($modalElement, modalOptions); modal.show(); ``` Check out the JavaScript behaviour section of each component's page to learn how you can use this. ##### TypeScript Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite. Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`: ```javascript import { Modal } from 'flowbite' import type { ModalOptions, ModalInterface } from 'flowbite' import type { InstanceOptions } from 'flowbite'; // other code ``` Learn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/). ##### Figma Design System The components from Flowbite are first conceptualized and designed in Figma using the latest features such as variants, auto-layout, grids, responsive layouts, and more. Learn more by checking out Flowbite's Figma design system and start designing your Tailwind CSS projects before actually coding them. ##### Flowbite SVG Icons Check out a free and open-source collection of over 430 SVG icons with solid and outline styles to integrate with the UI components from Flowbite. Learn more by browsing the Flowbite Icons page and interface to directly copy-paste the icons into your project as raw SVGs or React (JSX) code. ##### Flowbite GPT We've developed a custom trained ChatGPT model that you can use to generate website sections and pages based on the resources from Flowbite and Tailwind CSS. Start generating with [Flowbite GPT](https://chat.openai.com/g/g-y7yC35HB9-flowbite-gpt). ##### Pro version If you want to take your Tailwind development workflow to the next level you can check out the [pro version of Flowbite]({{< param homepage >}}/pro/) which includes fully coded pages and layouts for application, marketing, and e-commerce user interfaces. ##### Work with us If you're ready to take your application to the next level you can [work with us](https://flowbite.com/work-with-us/) on your project with developers who have been using Flowbite and Tailwind CSS. ##### Learn Design Concepts If you want to create even better Flowbite pages, learn design fundamentals from [Teach Me Design - Enhance UI](https://www.enhanceui.com/?ref=flowbite-introduction), a book that covers color theory, typography, UI and UX so you can make the most to implement the Flowbite Ecosystem! ##### Tailwind CSS v3 to v4 If you want to upgrade v3 from Tailwind CSS with Flowbite you have to follow the v4 upgrade guide. 1. Install the next versions of Tailwind CSS and Flowbite using NPM: ```bash npm install tailwindcss @tailwindcss/postcss postcss ``` 2. Add the PostCSS plugin inside the `postcss.config.js` file: ```bash export default { plugins: { '@tailwindcss/postcss': {}, }, }; ``` 3. Remove the old directives in your main CSS file and import Tailwind: ```bash @import "tailwindcss"; ``` 4. Use the `@config` directive to import the old configuration file from your project: ```bash /* add this to copy the configuration settings from your project */ @config "../tailwind.config.js"; ``` 5. Compile the source CSS file using NPX: ```bash npx @tailwindcss/cli -i input.css -o output.css ``` Now you should be good to go! Check the deprecated changes from v3 to learn more about the new features. ##### Tailwind CSS v3 We recommend you to follow the upgrade guide from v3 to v4 since Flowbite works with both. ##### Tailwind CSS v2 Flowbite works with the 2.x version of Tailwind CSS. ##### WindiCSS Flowbite also works with WindiCSS by including the plugin inside the `windi.config.js` file: ```bash plugins: [ require('flowbite/plugin-windicss') ], ``` ##### React If you're using React as a front-end library you can also use the components from Flowbite including the interactive ones such as the dropdowns, modals, and tooltips as long as you install Tailwind CSS and Flowbite in an existing project. Learn how to }}">install Tailwind CSS and Flowbite with React. ##### Next.js If you're using React as a front-end library and Next.js as a framework you can also use the components from Flowbite React such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS. Learn how to }}">install Tailwind CSS and Flowbite with Next.js and React. ##### Vue.js The components from Flowbite can also be used any new or existing Vue 3 projects as long as you install Tailwind CSS and Flowbite. Learn how to }}">install Tailwind CSS and Flowbite with Vue.js. ##### Nuxt If you're using Vue 3 as a front-end library and Nuxt as a framework you can also use the components from Flowbite Vue such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS. Learn how to }}">install Tailwind CSS and Flowbite with Nuxt and Vue 3. ##### Laravel If you're running a Laravel application you can easily set up Tailwind CSS and Flowbite and start developing user interfaces based on the utility-first classes and components. Learn how to }}">install Tailwind CSS and Flowbite with Laravel. ##### Svelte If you're using a Svelte application you can install a standalone Flowbite Svelte library and start developing modern websites using the components from Flowbite and the utility classes from Tailwind CSS. Learn how to }}">install Tailwind CSS and Flowbite with Svelte. ##### Angular You can read our official guide to learn how to set up a new Angular project together with Tailwind CSS and Flowbite to start building advanced web applications with Google's framework. Learn how to }}">install Tailwind CSS and Flowbite with Angular. ##### Ruby on Rails If you're using a Ruby on Rails project you can install Tailwind CSS with Flowbite and start building web pages using the utility-first classes and the interactive UI compnonents from Flowbite. Learn how to }}">install Tailwind CSS and Flowbite with Ruby on Rails. ##### Django Check out the Django integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing even faster using the UI components from Flowbite. Learn how to }}">install Tailwind CSS and Flowbite with Django. ##### Flask Check out the Flask integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing with a micro framework combined with the UI components from Flowbite. Learn how to }}">install Tailwind CSS and Flowbite with Flask. ##### Licensing The library of components from Flowbite is open source under the [MIT License]({{< ref "getting-started/license" >}}). ##### Contributions Flowbite is an open source library under the MIT license and anyone who would like to contribute to the codebase or design is welcome to do so. Please reach out to us via the official Github repository and the main development team will get in touch as soon as possible. ##### Discord community Feel free to join our community on Discord to receive help, contribute to the project, or just discuss about Flowbite, Tailwind CSS, and web development in general. ##### YouTube channel You can also subscribe to the official [Flowbite YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A) to view tutorials on how you can use the Flowbite ecosystem to design and build websites. ##### Authors - Zoltán Szőgyényi (web developer) - Robert Tanislav (web designer) #### JavaScript [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) is one of the most popular programming languages in the world, basically powering the client side of nearly 98% percent of all websites alongside HTML and CSS. It is a high-level language which uses dynamic typing and supports features such as object orientation, first-class functions and the web based API allows you access to the DOM (Document Object Model). Flowbite uses JavaScript to power the interactivity of the more complex UI components such as datepickers, dropdowns, and modals while also leveraging the utility classes from Tailwind CSS. There are two main ways you can use JavaScript to power the interactive UI components: - use the data attributes interface and include the Flowbite JavaScript via NPM or CDN - programmatically create instances of the UI components and call methods and attach events to elements On this page you will learn how to leverage the Flowbite API to work with the interactivity part of the UI library and how you can customize the default behaviour of the UI components using JavaScript. ##### Flowbite API Flowbite is written in JavaScript with optional support for TypeScript and provides an extensive API for the interactive UI components that you use by creating new instances of the objects, setting them up with various options, calling methods such as to show or hide a component and even access a global instance manager to get access to the initialised objects. Each component page on the documentation has a section called "JavaScript Behaviour" that documents how you can create and manage an object such as a Modal, Carousel, Dropdown, or any other interactive UI components that requires JavaScript to function. Here is an extensive example on how you can work with the Modal component: ```javascript // set the modal menu element const $targetEl = document.getElementById('modalEl'); // options with default values const options = { placement: 'bottom-right', backdrop: 'dynamic', backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40', closable: true, onHide: () => { console.log('modal is hidden'); }, onShow: () => { console.log('modal is shown'); }, onToggle: () => { console.log('modal has been toggled'); } }; ``` Create a new Modal object based on the options above. ```javascript import { Modal } from 'flowbite'; /* * $targetEl: required * options: optional */ const modal = new Modal($targetEl, options); ``` Use the `show` and `hide` methods to show and hide the modal component directly from JavaScript. ```javascript // show the modal modal.show(); // hide the modal modal.hide(); ``` Use the `toggle` method to toggle the visibility of the modal. ```javascript // toggle the modal modal.toggle(); ``` Use the `isHidden` or `isVisible` method to check if the modal is visible or not. ```javascript // true if hidden modal.isHidden(); // true if visible modal.isVisible(); ``` Please take into consideration that for this example you also need to have the appropriate HTML markup available on the page where the JS is loaded: ```html ``` Each component that requires JavaScript is well documented on their respective pages under the "JavaScript Behaviour" section as described above. ##### Data attributes The recommended and quickest way of using Flowbite is to use the data attributes interface that automatically creates instances and behaviour for the UI components by applying inline data attributes to the HTML elements, thus making them interactive via the Flowbite JavaScript API. All of the examples on the Flowbite Docs already have the data attributes applied and they are also documented just above the component preview. Here's an example of how you can set up the modal behaviour and apply "show" and "hide" actions: {{< example id="default-modal-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="600" >}} {{< /example >}} In order to create a modal with Tailwind CSS you only have to add `data-modal-target="modalId"` data attribute where `modalId` is the ID of the modal that you are targeting. If you want to toggle the visibility, show, or hide the modal you can use the following data attributes where the value is the unique ID of the modal component: - `data-modal-toggle="modalID"` - toggle the modal - `data-modal-show="modalID"` - show the modal This is just one example that shows you how Flowbite leverages the data attributes and sets up the JavaScript API, without having to create new instances of the objects yourself. ##### Init functions If you want to programmatically call the initialisation functions when using data attributes (for example, you might want to call it after the DOM re-rendered) then you can use the `initFlowbite()` function or the separate component initialisation functions such as `initModals()` or `initDropdowns()` wherever you want in your JS code: ```javascript ``` Basically, the `initFlowbite()` function parses your DOM for all of the data attributes and creates new instances of the appropriate components like modals or dropdowns and sets up the behaviour of the examples from the Flowbite Docs - applying the functionality of showing and hiding the components such as hiding the modal when clicking on the "X" (close) button. ##### Instance manager Since version `2.0.0`, the Flowbite JS API also provides a way to globally access all of the instances even if they were created via the data attributes interface. This allows you to programmatically handle the components while also giving you the possibility to use the recommended and quick way of accessing the data attributes interface and UI component examples. After the window has loaded and the UI components from Flowbite have been initialised (either via CDN or the `initFlowbite()` function) you can use the following global object and methods to get access to the object instances: ```javascript window.addEventListener('load', function() { const modal = FlowbiteInstances.getInstance('Modal', 'modal-id'); }) ``` As you can see, the `FlowbiteInstances` global object has two main parameters: - the first parameter is the component type which can be `Modal`, `Carousel`, `Dropdown` (ie. the name of the object class) - the second parameter is the target ID or parent ID of the main element and it's always a string If you provide the wrong category or ID then the console will give you a warning. If you have provided the correct category and element ID then you can now access the object as if you've created it yourself and work with it programmatically via JavaScript: ```javascript // show the modal modal.show(); // hide the modal modal.hide(); ``` You can even remove the instance from the instance manager: ```javascript // remove the instance object from the global FlowbiteInstances manager modal.removeInstance(); ``` You can also both destroy and remove the instance at the same time: ```javascript modal.destroyAndRemoveInstance(); ``` This in turn will basically remove the object instance from the global `flowbiteStorage` instance manager - you might want to do this if you want to reset certain elements from the DOM in single page applications. Another example if you want to show or hide a tooltip that was created via data attributes would be: ```javascript const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-id'); ``` And now you can show or hide the tooltip programmatically: ```javascript // show the tooltip tooltip.show(); // hide the tooltip tooltip.hide(); ``` You can call the `destroy()` and `init()` methods to re-calculate the positioning of the tooltip: ```javascript // destroy the tooltip event listeners tooltip.destroy(); // re-init the tooltip object and event listeners tooltip.init(); // show the tooltip tooltip.show(); ``` A component is added to the `flowbiteStorage` global instance manager automatically when it's created via the `constructor` method of the object class, regardless of which component is being used from Flowbite. Finally, you can also access all of the instances by calling the following method: ```javascript FlowbiteInstances.getAllInstances(); ``` Alternatively, you can also get all of the instances from one component pool such as from the modals: ```javascript FlowbiteInstances.getInstances('Modal'); ``` ##### Instance options When creating a new object you can also use the last parameter to set the `instanceOptions` object through which you can set custom options for the Instance manager: ```javascript import type { InstanceOptions } from 'flowbite'; const instanceOptions: InstanceOptions = { id: "my-unique-id", override: true, }; const modal = new Modal($targetEl, options, instanceOptions); ``` In this example, the ID of the instance that you can get it from the `FlowbiteInstances` global instance manager object will be `my-unique-id` instead of the `$targetEl` unique ID. This can be used to override existing instances if you want to re-initialise the same component with different options, such as when using the collapse object for the same object ID. In our default UI components we use this when we want to toggle the mobile navigation both with the hamburger menu icon and the search icon, even though the target element is the same. ##### TypeScript support Flowbite has support for type declarations of the Flowbite JS API which helps you to keep your code more maintainable and predictable by giving you safety constraints for the parameters and object methods that you're using through your application. Learn more about Flowbite and TypeScript in the [introduction guide](https://flowbite.com/docs/getting-started/typescript/). ##### Frameworks support You can use all of the JS frameworks for the UI components that don't require JavaScript to function (such as buttons, badges, cards) and for the UI components that require JS to work you need to set up the `initFlowbite()` function whenever the DOM has rendered so that you can re-apply the event listeners and object instances to the HTML elements that have data attributes. Otherwise, you need to create the objects and set the event listeners yourself. We have written integration guides for all major front-end and back-end frameworks - generally we have standalone libraries for the major front-end frameworks such as [Flowbite React](https://www.flowbite-react.com/), [Flowbite Svelte](https://www.flowbite-svelte.com/), and [Flowbite Vue](https://flowbite-vue.com/). For all of the back-end frameworks we recommend the vanilla JS version of Flowbite which integrates very well with frameworks such as [Laravel](https://flowbite.com/docs/getting-started/laravel/), [Django](https://flowbite.com/docs/getting-started/django/), or [Flask](https://flowbite.com/docs/getting-started/flask/). #### TypeScript [TypeScript](https://www.typescriptlang.org/) is a free and open-source programming language that helps improve the scalability, maintainability, and readability of code. It does this by adding optional static typing to JavaScript. It is developed and maintained by Microsoft and used by companies such as Slack, Bitpanda, Accenture, Medium, and many more to help them scale code better. This guide will teach you how to set up Tailwind CSS and the Flowbite library with TypeScript and also show you how you can use the components from Flowbite to power your Tailwind CSS application with integrated types and interfaces. ## Create a new project Follow the next steps to learn how to install TypeScript and Tailwind CSS in a local project. Before continuing make sure that you have Node.js installed locally on your computer. 1. Create a new project and run the following command to create a `package.json` file in the root folder: ```bash npm init ``` This is where we will add the project dependencies and the script commands. ##### Install TypeScript By following the official [TypeScript guide](https://www.typescriptlang.org/download) we will install and set it up in our project using NPM. 2. Run the following command to install and require TypeScript as a dependency in your `package.json` file: ```bash npm install --save-dev typescript ``` 3. Create a new `tsconfig.json` file by running the following command: ```bash npx tsc --init ``` 4. Replace the content of the `tsconfig.json` file using the following code: ```javascript { "compilerOptions": { "lib": ["dom", "es2015"], "outDir": "./lib/cjs/", "sourceMap": true, "declaration": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "allowJs": true, "moduleResolution": "node" }, "include": ["src/**/*.ts*"], "exclude": ["node_modules", "dist", "lib"] } ``` Here's a breakdown of what each option key-value pair represents: - `lib` - this option specifies which libraries we want TypeScript to support - `outDir` - this options tells the TS compiler where to export the compiled code - `sourceMap` - enables source maps to be generated - `declaration` - generates declaration files after compiling if true - `noImplicitAny` - prevents using the any type by throwing an error (this is best practice) - `module` - specifies the module system to use when generating JS code from the TypeScript source code - `target` - specifies the JavaScript version to which the TypeScript code should be transpiled - `allowJs` - specifies whether the compiler should include JS files in the project - `moduleResolution` - specifies the strategy that the compiler should use to resolve module names - `include` - specifies which are the source files TypeScript should compile - `exclude` - specifies which folders should TypeScript ignore when compiling After setting up the TypeScript configuration file we can now write some code. 5. Set up the folder structure for your TypeScript files by creating a new `src/` folder and creating an `index.ts` file inside of it with the following code: ```javascript const text: string = 'Hello TypeScript'; console.log(text); ``` This code already uses a type declaration which will help us verify if the compiler works properly. ##### Webpack bundler In order to compile the TypeScript code into JavaScript that is supported by modern browsers we will have to install [Webpack](https://webpack.js.org/) and bundle the source code into one final JavaScript file that we will later include in our HTML templates. 6. Install Webpack and the necessary plugins by executing the following command in your terminal: ```bash npm i -D webpack webpack-cli typescript ts-loader ``` 7. Create a new `webpack.config.js` file and add the following content: ```javascript //webpack.config.js const path = require('path'); module.exports = { mode: "development", devtool: "inline-source-map", entry: { main: "./src/index.ts", }, output: { path: path.resolve(__dirname, './dist'), filename: "app-bundle.js" // <--- Will be compiled to this single file }, resolve: { extensions: [".ts", ".tsx", ".js"], }, module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader" } ] } }; ``` 8. Run the following command to watch for changes and compile the TypeScript source code into browser-compatible JavaScript code: ```bash npx webpack --watch ``` This will generate an `app-bundle.js` named JavaScript file that you can now include inside your HTML templates. To check out if it works you can create a new `index.html` file and open it inside your browser. ```html Document

Hello Tailwind CSS!

``` ##### CommonJS By default the compiled code will be CJS as specified in the `tsconfig.json` file. Compile the code by running the following command in your terminal: ```bash npx tsc ``` This will generate a new `lib/` folder with CJS (CommonJS) compiled JavaScript code that we will later include in our templates. ##### ECMAScript modules If you want to compile for ESM instead of CJS you can use the following command instead: ```bash npx tsc -m es6 --outDir lib/esm ``` Now that we have successfully configured TypeScript and also compiled the source code we have to install and configure Tailwind CSS. Run the following command to install and require Tailwind CSS in your `package.json` file: ```bash npm install -D tailwindcss ``` ##### Install Tailwind CSS 9. Create a new `tailwind.config.js` file by running the following command: ```bash npx tailwindcss init ``` 10. Based on your source template files make sure you include all of the relevant paths in the `content` area of your Tailwind CSS configuration file: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.ts", "./**/*.html" ], theme: { extend: {}, }, plugins: [], } ``` In our case we will look for all TypeScript files inside the `src/` folder and all of the HTML files inside the project relative to the root. 11. Create a new `input.css` file inside the `src/` folder and import all of the basic Tailwind CSS directives: ```css @tailwind base; @tailwind components; @tailwind utilities; ``` 12. Compile the code when changes are made by using the following command: ```bash npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch ``` 13. Open the `index.html` file inside the root folder of your project with the following basic setup where we include all of the compiled code including the new `output.css` file: ```html Document

Hello Tailwind CSS!

``` Now open the `index.html` file in your browser and you should see the text larger because of the `text-4xl` utility class and also see a "Hello TypeScript" message inside your developer console. ##### Install Flowbite You can start using the open-source and interactive components from Flowbite which are based on Tailwind CSS and support TypeScript types by following the next steps. 1. Install and require Flowbite in your `package.json` file by running the following command: ```bash npm install flowbite ``` 2. Require Flowbite as a plugin inside your `tailwind.config.js` file: ```javascript module.exports = { plugins: [ require('flowbite/plugin') ] } ``` 3. Make sure that the generated utility classes from the library are also included in the final `output.css` file by adding the source code paths inside your `tailwind.config.js` file: ```javascript module.exports = { content: [ "./node_modules/flowbite/**/*.js" ] } ``` ##### Flowbite components Now that you have set up TypeScript, Tailwind CSS, and Flowbite you can start using this stack to build scalable websites using a large collection of UI components from Flowbite which support type declarations. One example would be to use the }}#javascript-behaviour">Modal component and using its methods and options to programmatically show or hide the element. First of all we need to make sure that we have the correct HTML element set up in our templates - we can use this markup and add it inside the `index.html` file: ```html ``` As you can see we added a unique ID for the button element that the parent modal element to be able to set event listeners to them later on. After having this markup put in place we need to open the `index.ts` file and import the Modal class from the Flowbite package and set up the event listeners: ```javascript import { Modal } from 'flowbite' // select the two elements that we'll work with const $buttonElement: HTMLElement = document.querySelector('#button'); const $modalElement: HTMLElement = document.querySelector('#modal'); // create a new modal component const modal = new Modal($modalElement); // toggle the visibility of the modal when clicking on the button $buttonElement.addEventListener('click', () => modal.toggle()); ``` Alternatively, you can also call on the available methods of the Modal class such as `show()` or `hide()` to add the logic inside your TypeScript files instead. ```javascript // add your own logic and then show the modal modal.show(); ``` This example will show the modal without having to click the button since the logic has been added in TypeScript directly. ##### Using Types Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite. Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`: ```javascript import { Modal } from 'flowbite' import type { ModalOptions, ModalInterface } from 'flowbite' // other code ``` Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you're using the correct types of parameters and methods. When creating a new modal you can set the `ModalInterface` as the main type: ```javascript const modal: ModalInterface = new Modal($modalElement, modalOptions); ``` Flowbite also supports type definitions for the options object so if you want to set the placement of the modal based on types, here's how you would do that: ```javascript const modalOptions: ModalOptions = { placement: 'top-right' } const modal: ModalInterface = new Modal($modalElement, modalOptions); ``` Why are these types useful, though? Because if you don't set the correct value for the `placement` key, for example you set `right` instead of `top-right` or `bottom-right` TypeScript will throw an error saying that it is not a correct option. Here's the full code using the types from Flowbite for the modal definition: ```javascript import { Modal } from 'flowbite' import type { ModalOptions, ModalInterface } from 'flowbite' const $buttonElement: HTMLElement = document.querySelector('#button'); const $modalElement: HTMLElement = document.querySelector('#modal'); const modalOptions: ModalOptions = { placement: 'top-right' } const modal: ModalInterface = new Modal($modalElement, modalOptions); $buttonElement.addEventListener('click', () => modal.toggle()); modal.show(); ``` Using the types from TypeScript with the Flowbite components will ensure a more scalable and bug-free code down the line. ##### TypeScript Starter Project We have built a [Tailwind CSS TypeScript Starter](https://github.com/themesberg/tailwind-typescript-starter) project on GitHub that uses the configuration above with some pre-built scripts and examples that can help you to get started faster. #### License ##### Copyright The Flowbite name and logos are trademarks of Bergside Inc. Learn more about the [Flowbite Brand Guideline](https://flowbite.com/brand/). ##### Released code The released code is licensed under the [MIT license](https://github.com/themesberg/flowbite/blob/main/README.md). Copyright (c) Themesberg (Bergside Inc.) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ##### Documentation The docs code is licensed under the [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). Attribution: the documentation code was initially forked from [Bootstrap](https://github.com/twbs/bootstrap) created by the [Bootstrap authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter Inc.](https://twitter.com/) and changes have been made since then to adapt to the Tailwind CSS and Flowbite ecosystem and technologies. ##### Pro version The pro version is licensed under the [EULA](https://flowbite.com/license/) from our website. ### Integration guides - [React](https://flowbite.com/docs/getting-started/react/) - [Next.js](https://flowbite.com/docs/getting-started/next-js/) - [Vue](https://flowbite.com/docs/getting-started/vue/) - [Nuxt](https://flowbite.com/docs/getting-started/nuxt-js/) - [Svelte](https://flowbite.com/docs/getting-started/svelte/) - [Angular](https://flowbite.com/docs/getting-started/angular/) - [Astro](https://flowbite.com/docs/getting-started/astro/) - [Remix](https://flowbite.com/docs/getting-started/remix/) - [Meteor.js](https://flowbite.com/docs/getting-started/meteor-js/) - [Gatsby](https://flowbite.com/docs/getting-started/gatsby/) - [SolidJS](https://flowbite.com/docs/getting-started/solid-js/) - [Qwik](https://flowbite.com/docs/getting-started/qwik/) - [Laravel](https://flowbite.com/docs/getting-started/laravel/) - [Symfony](https://flowbite.com/docs/getting-started/symfony/) - [Ruby on Rails](https://flowbite.com/docs/getting-started/rails/) - [Phoenix](https://flowbite.com/docs/getting-started/phoenix/) - [Django](https://flowbite.com/docs/getting-started/django/) - [Flask](https://flowbite.com/docs/getting-started/flask/) - [Blazor](https://flowbite.com/docs/getting-started/blazor/) - [Hugo](https://flowbite.com/docs/getting-started/hugo/) ### Customization #### Configuration Since the release of Tailwind v4, the configuration file that you've previously used to set options has now been moved to your main CSS file where you can import modules, plugins, set new variables like colors and fonts, set the custom source files, and more. Before continuing, please make sure that you have installed both Flowbite and the latest version of Tailwind. ##### Getting started You will probably want to be able to add your own colors, fonts, sizings, shadows, and other styles to the default set of utility classes from Flowbite and Tailwind CSS. In order to do that, you can set most of these options in your main CSS file that gets compiled by Tailwind. Here's an example of a simple configuration where we import plugins, set the source files, customize variables for colors and fonts, and set the dark mode strategy to use class name: ```css @import "tailwindcss"; @plugin "flowbite/plugin"; @source "../node_modules/flowbite"; @custom-variant dark (&:where(.dark, .dark *)); @theme { --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'; } ``` Using this example is a good starting point for any project created using Flowbite and Tailwind CSS. ##### Theming variables You can customize colors, fonts, spacings, and other styles using native variables in your main CSS file. ```css /* input.css file */ @import "tailwindcss"; @plugin "flowbite/plugin"; @source "../node_modules/flowbite"; @theme { --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'; --spacing-custom: 10px; --breakpoint-xs: 30rem; --breakpoint-2xl: 100rem; --breakpoint-3xl: 120rem; } ``` The example above adds a new color palette, fonts, a custom spacing variable and new media breakpoints. All of these styles will be propagated to the utility classes provided by Tailwind CSS. ##### Custom utilities You can add custom utilities by using the `@utility` directive in your CSS file. ```css @utility custom-url { color: --color-primary-600; text-decoration: underline; } ``` Now you can use the `custom-url` class to add an underline and primary color to the target element. ##### Custom variants Use the `@variant` direct in native CSS to target states such as hover, focus, dark mode, and more. ```css .element { text-decoration: underline; @variant hover { text-decoration: no-underline; } } ``` ##### Import plugins You can import third party plugins using the `@plugin` directive in your CSS file. ```javascript @import "tailwindcss"; @plugin "flowbite/plugin"; @plugin "flowbite-typography"; ``` ## Source Tailwind CSS automatically detects source files, but ignores a few folders such as your `node_modules`. Here's how you can explicictly set the source files in your main CSS file: ```css @import "tailwindcss"; @source "../node_modules/flowbite"; ``` This will scan the Flowbite folder inside your installed packages for Tailwind classes. ## Config Use the `@config` directive to import old `tailwind.config.js` files to copy your options. ```css @import "tailwindcss"; @config "../tailwind.config.js"; ``` ## Prefixes You can use the `prefix` object to set a prefix for all of the classes generated by Flowbite and Tailwind CSS. For example, you can add the `fb-` prefix like so: ```css @import "tailwindcss" prefix(fb); ``` Doing so it will add the prefix to all of the classes. ```css .fb-text-left { text-align: left; } .fb-text-center { text-align: center; } .fb-text-right { text-align: right; } /* etc. */ ``` ##### Reference If you'd like to browse the full list of configurable options, please visit the official Tailwind CSS configuration. #### Dark mode Offering a dark version for your website is more of an expected feature rather than a nice to have nowadays. Luckily, Tailwind CSS has a dark mode functionality enabled and the components from Flowbite also support it by using the "class" option. Learn how to enable and build a dark version switcher for Tailwind CSS and Flowbite by using JavaScript and the main CSS file by following the steps described below. ##### Enable dark mode All you need to do to enable dark mode for your Tailwind CSS project and Flowbite components is to add the following code inside your main `input.css` file and then add the `dark` class on your `html` element. ```css /* input.css */ @custom-variant dark (&:where(.dark, .dark *)); ``` If you install the Flowbite Plugin inside your Tailwind project then dark mode via the class method will work automatically as we do this for you by default. Alternatively, you can also just use the "media" option to automatically set the dark or light theme based on the browser's color scheme preference which is the default setting in Tailwind CSS. ##### Dark mode switcher If you want to create a dark mode switcher for Tailwind CSS and Flowbite you'll have to add some JavaScript code and a toggle element that a user can use to change their preferences. 1. Toggle dark mode by checking user preference in the `` tag of your HTML: ```html ``` This will first check if you've previously set the theme color preference manually using the local storage and as a fallback it will either set the dark or light mode based on your browser color scheme preference. 2. Create a ` ``` In this example we used a ` {{< /example >}} ##### Using RTL variants If you need to add RTL variants to your own custom components, you can use the `rtl:` prefix. For example, if you want to add a margin to the left side of an element in LTR mode, you would use `ml-2`. In RTL mode, you would use `rtl:ml-2` instead. ```html

``` However, we do recommend that you use logical properties for margins, paddings, borders, and rounded-sm corners because the HTML markup will be cleaner and contain less utility-classes, which is always a good thing when it comes to Tailwind CSS. ##### UI components As mentioned before, all of the UI components from Flowbite support RTL by default and all of the examples from the documentation will render correctly whenever you set the `dir` attribute to `rtl` on the `` element. Check out all our UI components and examples from the [official documentation](https://flowbite.com/docs/getting-started/introduction/). ### Components #### Accordion The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite. A popular use case would be the "Frequently Asked Questions" section of a website or page when you can show questions and answers for each child element. There are two main options to initialize the accordion component: - `data-accordion="collapse"` show only one active child element - `data-accordion="open"` keep multiple elements open Don't forget to set the `data-accordion-target="{selector}"` data attribute to the header element where the value is the id or class of the accordion body element and the `aria-expanded="{true|false}"` attribute to mark the active or inactive state of the accordion. ##### Default accordion Use the `data-accordion="collapse"` to collapse every other child element when expanding a single one. {{< example id="default-accordion-example" github="components/accordion.md" show_dark=true >}}

{{< /example >}} ##### Always open Use the `data-accordion="open"` option to keep previously opened accordion elements unchanged. {{< example id="accordion-always-open-example" github="components/accordion.md" show_dark=true >}}

{{< /example >}} ##### Color options Use the `data-active-classes` and `data-inactive-classes` to set the active and inactive classes for the header element whenever the accordion is expanded by applying as many classes as you want, but make sure to separate them with a space. If the data attribute is not set or empty, it will apply the default classes. Here's an example where we apply the blue colors instead of gray: {{< example id="accordion-color-options-example" github="components/accordion.md" show_dark=true >}}

{{< /example >}} ##### Flush accordion Use this example to remove the background color and rounded borders from the accordion component. {{< example id="accordion-flush-example" github="components/accordion.md" show_dark=true >}}

{{< /example >}} ##### Arrow style Use the `data-accordion-icon` data attribute to optionally set an element to rotate 180 degrees when the accordion element is expanded. If the data attribute is not set, then it will not rotate. {{< example id="accordion-arrow-style-example" github="components/accordion.md" show_dark=true >}}

Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.

Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.

{{< /example >}} ##### Nesting accordions Accordions can be nested. All of the mentioned options are supported. To enable nested accordions you need to wrap the nested accordion in an element with the `data-accordion` attribute and don't accidentally initialize an accordion with nested accordions' items (e.g. by using `$accordionBodyEl.querySelectorAll`), when using custom JavaScript. {{< example id="accordion-nesting-example" github="components/accordion.md" show_dark=true >}}

{{< /example >}} ##### JavaScript behaviour Use the **Accordion** object from Flowbite to create a collection of vertically collapsing heading and content elements using object parameters, options, methods, and callback functions directly from JavaScript. ###### Object parameters Create a new Accordion object by passing an array of accordion items and an optional options object to customize the styles and add callback functions.

Parameter	Type	Required	Description
`accordionEl`	Element	Required	The parent HTML element of the accordion component.
`items`	Array	Required	Array of accordion items objects including the unique identifier, heading element, content element, and the active state.
`options`	Object	Optional	Object of options that you can set to customize the style of the accordion items and set callback functions.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

###### Options Use the following options as the second parameter for the Accordion object to customize the behaviour, styles, and to set callback functions.

Option	Type	Description
`alwaysOpen`	Boolean	If set to true then multiple accordion elements can be open at the same time. By default it's false.
`activeClasses`	Array	Set an array of Tailwind CSS class names to apply for the active accordion heading element.
`inactiveClasses`	Array	Apply an array of Tailwind CSS class names to apply for the inactive accordion heading elements.
`onOpen`	Function	Set a callback function when a new accordion item has been opened.
`onClose`	Function	Set a callback function when a new accordion item has been closed.

###### Methods Use the object methods on the Accordion object to programmatically open, close, or toggle the visibility of a given accordion item.

Method	Description
`toggle(id)`	Use this function to toggle an accordion item based on its current state.
`open(id)`	Use this function to open an accordion item based on the id.
`close(id)`	Use this function to close an accordion item based on the id.
`updateOnOpen(callback)`	Use this method to set a callback function when an accordion item has been opened.
`updateOnClose(callback)`	Use this method to set a callback function when an accordion item has been closed.
`updateOnToggle(callback)`	Use this method to set a callback function when an accordion item has been toggled.

###### Example Learn more about using the Accordion object from Flowbite in this example in JavaScript. To get started you need to create an array of accordion item objects including a unique identifier (it can be a number as well), a trigger element (eg. a button), a content element (the content body), and the active state. Additionally, you can also set some options to change the default behaviour of the accordion, customize the styles, and set callback functions. ```javascript const accordionElement = document.getElementById('accordion-example'); // create an array of objects with the id, trigger element (eg. button), and the content element const accordionItems = [ { id: 'accordion-example-heading-1', triggerEl: document.querySelector('#accordion-example-heading-1'), targetEl: document.querySelector('#accordion-example-body-1'), active: true }, { id: 'accordion-example-heading-2', triggerEl: document.querySelector('#accordion-example-heading-2'), targetEl: document.querySelector('#accordion-example-body-2'), active: false }, { id: 'accordion-example-heading-3', triggerEl: document.querySelector('#accordion-example-heading-3'), targetEl: document.querySelector('#accordion-example-body-3'), active: false } ]; // options with default values const options = { alwaysOpen: true, activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white', inactiveClasses: 'text-gray-500 dark:text-gray-400', onOpen: (item) => { console.log('accordion item has been shown'); console.log(item); }, onClose: (item) => { console.log('accordion item has been hidden'); console.log(item); }, onToggle: (item) => { console.log('accordion item has been toggled'); console.log(item); }, }; // instance options object const instanceOptions = { id: 'accordion-example', override: true }; ``` Create a new Accordion object using the options set above as the parameters. ```javascript import { Accordion } from 'flowbite'; /* * accordionEl: HTML element (required) * accordionItems: array of accordion item objects (required) * options (optional) * instanceOptions (optional) */ const accordion = new Accordion(accordionElement, accordionItems, options, instanceOptions); ``` Now you can access the object methods to programmatically open, close, and toggle the accordion items based on the unique identifier. ```javascript // open accordion item based on id accordion.open('accordion-example-heading-2'); // close accordion item based on id accordion.close('accordion-example-heading-2'); // toggle visibility of item based on id accordion.toggle('accordion-example-heading-3'); ``` ###### HTML Markup Use the following HTML markup example for the JavaScript script above. ```html

``` ###### TypeScript If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Accordion object, parameters and its options. Here's an example that applies the types from Flowbite to the code above: ```javascript import { Accordion } from "flowbite"; import type { AccordionOptions, AccordionItem, AccordionInterface } from "flowbite"; import type { InstanceOptions } from 'flowbite'; const accordionEl = document.querySelector('#accordion-example'); // create an array of objects with the id, trigger element (eg. button), and the content element const accordionItems: AccordionItem[] = [ { id: 'accordion-example-heading-1', triggerEl: document.querySelector('#accordion-example-heading-1'), targetEl: document.querySelector('#accordion-example-body-1'), active: true }, { id: 'accordion-example-heading-2', triggerEl: document.querySelector('#accordion-example-heading-2'), targetEl: document.querySelector('#accordion-example-body-2'), active: false }, { id: 'accordion-example-heading-3', triggerEl: document.querySelector('#accordion-example-heading-3'), targetEl: document.querySelector('#accordion-example-body-3'), active: false } ]; // options with default values const options: AccordionOptions = { alwaysOpen: true, activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white', inactiveClasses: 'text-gray-500 dark:text-gray-400', onOpen: (item) => { console.log('accordion item has been shown'); console.log(item); }, onClose: (item) => { console.log('accordion item has been hidden'); console.log(item); }, onToggle: (item) => { console.log('accordion item has been toggled'); console.log(item); }, }; // instance options object const instanceOptions: InstanceOptions = { id: 'accordion-example', override: true }; /* * accordionEl: HTML element (required) * accordionItems: array of accordion item objects (required) * options (optional) * instanceOptions (optional) */ const accordion: AccordionInterface = new Accordion(accordionEl, accordionItems, options, instanceOptions); // open accordion item based on id accordion.open('accordion-example-heading-2'); // destroy accordion accordion.destroy(); // re-initialize accordion accordion.init(); ``` #### Alert 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. Flowbite also includes dismissible alerts which can be hidden by the users by clicking on the close icon. ##### Default alert Use the following examples of alert components to show messages as feedback to your users. {{< example id="default-alert-example" github="components/alerts.md" show_dark=true >}}

Info alert! Change a few things up and try submitting again.

Danger alert! Change a few things up and try submitting again.

Success alert! Change a few things up and try submitting again.

Warning alert! Change a few things up and try submitting again.

Dark alert! Change a few things up and try submitting again.

{{< /example >}} ##### Alerts with icon You can also include a descriptive icon to complement the message inside the alert component with the following example. {{< example id="alerts-with-icon-example" github="components/alerts.md" show_dark=true >}}

Info alert! Change a few things up and try submitting again.

Danger alert! Change a few things up and try submitting again.

Success alert! Change a few things up and try submitting again.

Warning alert! Change a few things up and try submitting again.

Dark alert! Change a few things up and try submitting again.

{{< /example >}} ##### Bordered alerts Use this example to add a border accent to the alert component instead of just a plain background. {{< example id="alerts-with-border-example" github="components/alerts.md" show_dark=true >}}

Info alert! Change a few things up and try submitting again.

Danger alert! Change a few things up and try submitting again.

Success alert! Change a few things up and try submitting again.

Warning alert! Change a few things up and try submitting again.

Dark alert! Change a few things up and try submitting again.

{{< /example >}} ##### Alerts with list Use this example to show a list and a description inside an alert component. {{< example id="alerts-list-example" github="components/alerts.md" show_dark=true >}}

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

Ensure that these requirements are met:

At least 10 characters (and up to 100 characters)
At least one lowercase character
Inclusion of at least one special character, e.g., ! @ # ?

##### Dismissing Use the following alert elements that are also dismissible. {{< example id="alerts-dismissing-example" github="components/alerts.md" show_dark=true >}}

A simple info alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

{{< /example >}} ##### Border accent Use this example to add a border accent on top of the alert component for further visual distinction. {{< example id="alerts-border-accent-example" github="components/alerts.md" show_dark=true >}}

A simple info alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

{{< /example >}} ##### Additional content The following alert components can be used if you wish to disclose more information inside the element. {{< example id="alerts-additional-content-example" github="components/alerts.md" show_dark=true >}}

This is a info alert

More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

This is a danger alert

More info about this info danger goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

This is a success alert

More info about this info success goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

This is a warning alert

More info about this info warning goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

This is a dark alert

More info about this info dark goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

{{< /example >}} ##### JavaScript behaviour The **Dismiss** class from Flowbite can be used to create an object that will hide a target element or elements based on the parameters, options, and methods that you provide. ###### Object parameters The parameters for the Dismiss object can be used to programmatically initialize and manipulate the behaviour of the dismissal of the target element.

Parameter	Type	Required	Description
`targetEl`	Element	Required	Pass the element object that will be dismissed.
`triggerEl`	Element	Optional	Pass the element object that will trigger the targetEl dismission on click.
`options`	Object	Optional	Pass the options object to set the trigger element, transition, duration, timing classes of the dismiss animation and callback functions.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

###### Options Use these optional options for the Dismiss object to set the transition, duration, and timing function types based on the utility classes from Tailwind CSS.

Option	Type	Description
`transition`	String	Use one of the Transition Property utility classes from Tailwind CSS to set transition type for the main element. The default value is `transition-opacity`.
`duration`	Integer	Set the duration of the dismissing animation. The default value is `300` (300 milliseconds).
`timing`	String	Set the transition timing function utility class from Tailwind CSS. The default value is `ease-out`.
`onHide`	Function	Set a callback function when the item has been dismissed.

###### Methods Use the following methods on the Dismiss object to programmatically manipulate the behaviour.

Method	Description
`hide()`	Use this method on the Dismiss object to hide the target element.
`updateOnHide(callback)`	Use this method to set the callback function when the item has been dismissed.

###### Example Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Dismiss object. First of all, you should set the required target element and optionally set a trigger element which will dismiss the target element when clicked and other options to customize the animation. ```javascript // target element that will be dismissed const $targetEl = document.getElementById('targetElement'); // optional trigger element const $triggerEl = document.getElementById('triggerElement'); // options object const options = { transition: 'transition-opacity', duration: 1000, timing: 'ease-out', // callback functions onHide: (context, targetEl) => { console.log('element has been dismissed') console.log(targetEl) } }; // instance options object const instanceOptions = { id: 'targetElement', override: true }; ``` Create a new Dismiss object based on the options set above. ```javascript import { Dismiss } from 'flowbite'; /* * $targetEl (required) * $triggerEl (optional) * options (optional) * instanceOptions (optional) */ const dismiss = new Dismiss($targetEl, $triggerEl, options, instanceOptions); ``` You can now use the methods on the Dismiss object. ```javascript // hide the target element dismiss.hide(); ``` ###### HTML Markup Use this HTML code for the JavaScript code example above. ```html

Info alert! Change a few things up and try submitting again.

``` ###### TypeScript If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Dismiss class, parameters and its options. Here's an example that applies the types from Flowbite to the code above: ```javascript import { Dismiss } from "flowbite"; import type { DismissOptions, DismissInterface } from "flowbite"; import type { InstanceOptions } from 'flowbite'; // target element that will be dismissed const $targetEl: HTMLElement = document.getElementById('targetElement'); // optional trigger element const $triggerEl: HTMLElement = document.getElementById('triggerElement'); // options object const options: DismissOptions = { transition: 'transition-opacity', duration: 1000, timing: 'ease-out', // callback functions onHide: (context, targetEl) => { console.log('element has been dismissed') console.log(targetEl) } }; // instance options object const instanceOptions: InstanceOptions = { id: 'targetElement', override: true }; /* * $targetEl (required) * $triggerEl (optional) * options (optional) * instanceOptions (optional) */ const dismiss: DismissInterface = new Dismiss($targetEl, $triggerEl, options, instanceOptions); // programmatically hide it dismiss.hide(); ``` #### Avatar The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS. ##### Default avatar Use this example to create a circle and rounded avatar on an image element. {{< example id="default-avatar-example" class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}}

{{< /example >}} ##### Bordered Apply a border around the avatar component you can use the `ring-{color}` class from Tailwind CSS. {{< example id="avatar-bordered-example" class="flex justify-center" github="components/avatar.md" show_dark=true >}}

{{< /example >}} ##### Placeholder icon Use this example as a placeholder icon for the user profile when there is no custom image available. {{< example id="avatar-placeholder-example" class="flex justify-center" github="components/avatar.md" show_dark=true >}}

{{< /example >}} ##### Placeholder initials This example can be used to show the initials of the user's first and last name as a placeholder when no profile picture is available. {{< example id="avatar-placeholder-initials-example" class="flex justify-center" github="components/avatar.md" show_dark=true >}}

{{< /example >}} ##### Avatar tooltip Use this example to show a tooltip when hovering over the avatar. {{< example id="avatar-tooltip-example" class="flex items-center justify-center pt-8 gap-4" github="components/avatar.md" show_dark=true >}}

{{< /example >}} ##### Dot indicator Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status). {{< example id="avatar-dot-indicator-example" class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}}

{{< /example >}} ##### Stacked Use this example if you want to stack a group of users by overlapping the avatar components. {{< example id="avatar-stacked-example" class="flex justify-center gap-4 rtl:gap-8" github="components/avatar.md" show_dark=true >}}

+99

{{< /example >}} ##### Avatar text This example can be used if you want to show additional information in the form of text elements such as the user's name and join date. {{< example id="avatar-text-example" class="flex justify-center" github="components/avatar.md" show_dark=true >}}

Jese Leos

Joined in August 2014

{{< /example >}} ##### User dropdown Use this example if you want to show a dropdown menu when clicking on the avatar component. {{< example id="avatar-user-dropdown-example" class="flex justify-center gap-4" github="components/avatar.md" show_dark=true iframeHeight="360" >}}

{{< /example >}} ##### Sizes Choose from multiple sizing options for the avatar component from this example. {{< example id="avatar-sizes-example" class="flex flex-wrap items-center justify-center gap-6" github="components/avatar.md" show_dark=true >}}

{{< /example >}} #### Badge 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. Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a `span` element. ##### Default badge Use the following badge elements to indicate counts or labels inside or outside components. {{< example id="default-badge-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} Default Dark Red Green Yellow Indigo Purple Pink {{< /example >}} ##### Large badges Use the `text-sm` utility class and increase the paddings to create a larger variant of the badges. {{< example id="badge-sizes-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} Default Dark Red Green Yellow Indigo Purple Pink {{< /example >}} ##### Bordered badge This example can be used to add a border accent to the badge component. {{< example id="bordered-badge-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} Default Dark Red Green Yellow Indigo Purple Pink {{< /example >}} ##### Pills badge Use this example to make the corners even more rounded-sm like pills for the badge component. {{< example id="pills-badge-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} Default Dark Red Green Yellow Indigo Purple Pink {{< /example >}} ##### Badges as links You can also use badges as anchor elements to link to another page. {{< example id="badge-links-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} Badge link Badge link {{< /example >}} ##### Badges with icon You can also use [SVG icons](https://flowbite.com/icons/) inside the badge elements. {{< example id="badge-icons-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} 3 days ago 2 minutes ago {{< /example >}} ##### Notification badge Use the following example to show a badge inside of a button component. {{< example id="badge-notification-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} {{< /example >}} ##### Button with badge Use this example to add a badge inside a button component for a count indicator. {{< example id="badge-button-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} {{< /example >}} ##### Badge with icon only Alternatively you can also use badges which indicate only a SVG icon. {{< example id="badge-icon-only-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} {{< /example >}} ##### Chips (dismissible badges) Use the `data-dismiss-target` data attribute to dismiss the current badge where the value is the id of the target element using a transition animation. {{< example id="badge-dismiss-example" class="flex justify-center" github="components/badge.md" show_dark=true >}} Default Dark Red Green Yellow Indigo Purple Pink {{< /example >}} #### Banner Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area. Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode. ##### Default sticky banner Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. {{< example id="default-sticky-banner-example" class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}} {{< /example >}} ##### Bottom banner position This example can be used to position the sticky banner to the bottom side of the page instead of the top side. {{< example id="bottom-banner-example" class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}} {{< /example >}} ##### Marketing CTA banner Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. Set a different width by using the `max-w-{*}` utility classes from Tailwind CSS. {{< example id="marketing-sticky-banner-example" class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}} {{< /example >}} ##### Newsletter sign-up banner This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page. {{< example id="newsletter-sticky-banner-example" class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}} {{< /example >}} ##### Informational banner This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links. {{< example id="informational-sticky-banner-example" class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}} {{< /example >}} ##### More examples For more sticky banner examples you can check [banner sections](https://flowbite.com/blocks/marketing/banner/) from Flowbite Blocks. #### Bottom navigation The bottom bar component can be used to allow menu items and certain control actions to be performed by the user through the usage of a fixed bar positioning to the bottom side of your page. Check out multiple examples of the bottom navigation component based on various styles, controls, sizes, content and leverage the utility classes from Tailwind CSS to integrate into your own project. ##### Default bottom navigation Use the default bottom navigation bar example to show a list of menu items as buttons to allow the user to navigate through your website based on a fixed position. You can also use anchor tags instead of buttons. {{< example id="default-bottom-nav-example" class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

{{< /example >}} ##### Menu items with border This example can be used to show a border between the menu items inside the bottom navbar. {{< example id="border-bottom-nav-example" class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

{{< /example >}} ##### Application bar example Use this example to show a CTA button in the center of the navigation component to create new items. {{< example id="cta-button-bottom-nav-example" class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

{{< /example >}} ##### Example with pagination This example be used to paginate multiple pages on a single view alongside other menu items. {{< example id="pagination-bottom-nav-example" class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

1 of 345

{{< /example >}} ##### Button group bottom bar {{< example id="button-group-bottom-nav-example" class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

{{< /example >}} ##### Card with bottom bar This example can be used to position a bottom navigation bar inside of a card element with scroll enabled on the Y axis to allow changing the content inside of the card, enable certain actions or show a list of menu items. You can even use the other bottom navbar examples to exchange the default one presented here. {{< example id="card-bottom-nav-example" class="flex items-center justify-center p-4" github="components/bottom-navigation.md" show_dark=true >}}

{{< /example >}} ##### Online meeting control bar Use this component to show a list of options for online video meetings by showing a list of options such as muting the microphone, hiding the camera, adjusting the volume and more. {{< example id="video-bottom-nav-example" class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true disable_init_js=true show_dark=true >}}

12:43 PM

{{< /example >}} ##### Video player bar Use this component to show control buttons for a video or audio that is playing in the browser to control the volume, navigate between videos, pause or start the video, and more. {{< example id="audio-bottom-nav-example" class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" disable_init_js=true skeletonPlaceholders=true show_dark=true >}}

Flowbite Crash Course

3:45

5:00

{{< /example >}} #### Breadcrumb The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages. Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors. ##### Default breadcrumb Use the following breadcrumb example to show the hierarchical structure of pages. {{< example id="default-breadcrumb-example" class="flex justify-center" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ##### Solid background You can alternatively also use the breadcrumb components with a solid background. {{< example id="breadcrumb-background-example" class="flex justify-center" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ##### Header breadcrumb Use this example to show a list of items such as the branches from GitHub and a dropdown component. {{< example id="header-breadcrumb-example" class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ##### Breadcrumb with dropdown Use this example to show dropdown components inside the breadcrumbs. {{< example id="breadcrumb-dropdown-example" class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} #### Buttons The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages. Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more. ##### Default button Use these default button styles with multiple colors to indicate an action or link within your website. {{< example id="default-button-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Button pills The button pills can be used as an alternative style by using fully rounded edges. {{< example id="button-pills-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}}

##### Gradient monochrome 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. {{< example id="button-monochrome-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}}

##### Gradient duotone These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect. {{< example id="button-duotone-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}}

##### Gradient outline 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. {{< example id="button-gradient-outline-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}}

##### Colored shadows These beautiful button elements with color shadows can be used since the release of Tailwind v3.0. {{< example id="button-colored-shadows-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}}

##### Social buttons 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. {{< example id="button-social-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}}

##### Payment 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. {{< example id="button-payment-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Outline buttons Use the following button styles to show the colors only for the border of the element. {{< example id="button-outline-example" class="flex flex-wrap" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Button sizes Use these examples if you want to use smaller or larger buttons. {{< example id="button-sizes-example" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Button sizes with icon Use these examples if you want to use smaller or larger buttons. {{< example id="button-sizes-example" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Buttons with icon Use the following examples to add a [SVG icon](https://flowbite.com/icons/) inside the button either on the left or right side. {{< example id="button-icon-example" class="flex" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Button with label This example can be used to show a notification count or helper text inside a button using the badge element. {{< example id="button-label-example" class="flex" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Icon buttons Sometimes you need a button to indicate an action using only an icon. {{< example id="button-icon-only-example" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Loader Use the following }}">spinner components from Flowbite to indicate a loader animation inside buttons: {{< example id="button-loader-example" github="components/buttons.md" show_dark=true >}} {{< /example >}} ##### Disabled Use the following styles to indicate a disabled button. This can be often used inside form elements to disable the submit button before all the form elements have been completed and validated. {{< example id="button-disabled-example" github="components/buttons.md" show_dark=true >}} {{< /example >}} #### Button group The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element. ##### Default example Use the following code to stack together buttons into a single group. {{< example id="default-button-group-example" class="flex justify-center" github="components/button-group.md" show_dark=true >}}

{{< /example >}} ##### Button group as links You can also use the button group component as links. {{< example id="button-group-links-example" class="flex justify-center" github="components/button-group.md" show_dark=true >}}

Profile Settings Messages

{{< /example >}} ##### Group buttons with icons You can also use [SVG icons](https://flowbite.com/icons/) inside the grouped buttons. {{< example id="button-group-icons-example" class="flex justify-center" github="components/button-group.md" show_dark=true >}}

{{< /example >}} ##### Outline Group a series of buttons together on a single line or stack them in a vertical column. {{< example id="button-group-outline-example" class="flex justify-center" github="components/button-group.md" show_dark=true >}}

{{< /example >}} ##### Outlined with icon Group a series of buttons together on a single line or stack them in a vertical column. {{< example id="button-group-outline-icon-example" class="flex justify-center" github="components/button-group.md" show_dark=true >}}

{{< /example >}} #### Card 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. ##### Default card Use the following simple card component with a title and description. {{< example id="default-card-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

{{< /example >}} ##### Card with button Use the following example of a card element if you also want to have an action button. {{< example id="card-cta-button-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

{{< /example >}} ##### Card with link This example can be used to show a CTA as a link instead of a button inside the card. {{< example id="card-cta-link-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Need a help in Claim?

Go to this step by step guideline process on how to certify for your weekly benefits:

See our guideline

{{< /example >}} ##### Card with image You can use the following example of a card element with an image for blog posts, user cards, and many more. {{< example id="card-image-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

{{< /example >}} ##### Horizontal card If you want to spice up your cards you can use the following card which has its child elements aligned horizontally. {{< example id="card-horizontal-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Noteworthy technology acquisitions 2021

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

{{< /example >}} ##### User profile card Use this user profile card example if you want to show a dropdown menu and buttons to enable multiple actions from your user. {{< example id="card-user-profile-example" class="flex flex-wrap justify-center" github="components/card.md" show_dark=true >}}

Bonnie Green

Visual Designer

Add friend Message

{{< /example >}} ##### Card with form inputs Use this card example where you can add form input elements that can be used for authentication actions or any other context where you need to receive information from your users. {{< example id="card-form-inputs-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

{{< /example >}} ##### E-commerce card Use this card for your e-commerce websites and show information about the products and enable actions such as adding a review and adding the product to the cart. {{< example id="card-ecommerce-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport

5.0

$599 Add to cart

{{< /example >}} ##### Call to action card Use this CTA card example to encourage your users to visit a certain page such as downloading the iOS or Android application for your project. {{< example id="card-cta-example" github="components/card.md" show_dark=true >}}

Work fast from anywhere

Stay up to date and move work forward with Flowbite on iOS & Android. Download the app today.

{{< /example >}} ##### Card with nav tabs Use this example of a card component with navigation tabs that can change the content inside the card based on which one is currently active. {{< example id="card-nav-tabs-example" github="components/card.md" show_dark=true >}}

{{< /example >}} ##### Card full width tabs Use this example of a card component to show tabs that span the full width of the element and change the content area clicking on each one. {{< example id="card-full-width-tabs-example" github="components/card.md" show_dark=true >}}

{{< /example >}} ##### Card with list Use this card example if you want to show a list of data: {{< example id="card-list-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Latest Customers

View all

Neil Sims

email@windster.com

$320
Bonnie Green

email@windster.com

$3467
Michael Gough

email@windster.com

$67
Lana Byrd

email@windster.com

$367
Thomes Lean

email@windster.com

$2367

{{< /example >}} ##### Pricing card Show detailed information to potential customers about your product's pricing plan, list of features, and a purchase button. {{< example id="card-pricing-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Standard plan

$ 49 /month

2 team members
20GB Cloud storage
Integration help
Sketch Files
API Access
Complete documentation
24×7 phone & email support

{{< /example >}} ##### Testimonial card Use this example to split cards into multiple sections such as for testimonials or reviews. {{< example id="card-testimonial-example" github="components/card.md" show_dark=true >}}

Very easy this was to integrate

If you care for your time, I hands down would go with this."

Bonnie Green

Developer at Open AI

Solid foundation for any project

Designing with Figma components that can be easily translated to the utility classes of Tailwind CSS is a huge timesaver!"

Roberta Casas

Lead designer at Dropbox

Mindblowing workflow

Aesthetically, the well designed components are beautiful and will undoubtedly level up your next application."

Jese Leos

Software Engineer at Facebook

Efficient Collaborating

You have many examples that can be used to create a fast prototype for your team."

Joseph McFall

CTO at Google

{{< /example >}} ##### Crypto card Use this web3 card component to show a list of applications that you can use to connect your crypto wallet for NFT related trading and authentication. {{< example id="card-crypto-example" class="flex justify-center" github="components/card.md" show_dark=true >}}

Connect wallet

Connect with one of our available wallet providers or create a new one.

Why do I need to connect with my wallet?

{{< /example >}} #### Carousel The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators based on the JavaScript object from Flowbite. ##### Default slider The carousel component can be initialized by using the `data-carousel={static|slide}` data attribute and by applying a unique `id` attribute to the parent element. - `data-carousel="static"` to prevent the carousel sliding by default - `data-carousel="slide"` to infinitely cycle through the items You can add as many carousel items as you want, but make sure that you add the `data-carousel-item` data attribute to each of them and set a single item to active by applying the `active` value to the data attribute. Use the `duration-*` and the animation classes from Tailwind CSS to apply custom effects to the carousel items and don't forget to set the `hidden` class by default to prevent flickering. {{< example id="default-carousel-example" github="components/carousel.md" show_dark=true >}}

{{< /example >}} ##### Controls Use the `data-carousel-prev` and `data-carousel-next` data attribute to listen to click events which will trigger the slide event from the carousel component to each direction. You can customize the control elements with the classes from Tailwind CSS anyhow you want. {{< example id="carousel-controls-example" github="components/carousel.md" show_dark=true >}}

{{< /example >}} ##### Indicators Show the carousel indicators by adding the `data-carousel-slide-to={position}` to any number or style of indicator elements where the value equals the position of the slider element. {{< example id="carousel-indicators-example" github="components/carousel.md" show_dark=true >}}

{{< /example >}} ##### Animation You can easily customize the duration and animation style of the carousel component by using the `duration-*` and `ease-*` utility classes from Tailwind CSS. {{< example id="carousel-animation-example" github="components/carousel.md" show_dark=true >}}

{{< /example >}} ##### JavaScript behaviour Use the **Carousel** class from Flowbite to create an object that you can use to apply custom styles, change the active slide item, set callback functions directly from JavaScript. ###### Object parameters Pass the object parameters for the Carousel object to set the carousel items and options.

Parameter	Type	Required	Description
`carouselElement`	Element	Required	Parent HTML element of the carousel component.
`items`	Array	Required	Pass an array of carousel item objects including the position and the element.
`options`	Object	Optional	Pass an object of options to set the interval, indicators, and callback functions.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

###### Options Use these options for the Carousel object to set the default position, interval, indicators, custom styles, and callback functions.

Option	Type	Description
`defaultPosition`	Integer	Set the default active slider item based on its position (starts from [0-x]).
`interval`	Integer	Set the interval duration in milliseconds when the carousel is cycling.
`indicators`	Array	An optional object of indicator elements and custom classes.
`onNext`	Function	Set a callback function when the next carousel item has been shown.
`onPrev`	Function	Set a callback function when the previous carousel item has been shown.
`onChange`	Function	Set a callback function when the position of the carousel item has been changed.

###### Methods Use the following methods on the Carousel object to programmatically manipulate the behaviour.

Method	Description
`next()`	Use this method to go to the next slide of the carousel component.
`prev()`	Use this method to go to the previous slide of the carousel component.
`slideTo(position)`	Use this method to go the carousel with the position that you set as a parameter.
`cycle()`	Use this method to start cycling the carousel component based on the default interval duration.
`pause()`	Use this method to stop the automatic cycling of the carousel component.
`getItem(position)`	Get the carousel item based on the position number that you set as a parameter.
`getActiveItem()`	Get the current active carousel item.
`updateOnNext(callback)`	Set a callback function when the next carousel item has been shown.
`updateOnPrev(callback)`	Set a callback function when the previous carousel item has been shown.
`updateOnChange(callback)`	Set a callback function when the the slide item inside the carousel has been changed.

###### Example Check out the following example to learn how to programmatically create a new Carousel object by passing the parameters, using the methods, and the callback functions. ```javascript const carouselElement = document.getElementById('carousel-example'); const items = [ { position: 0, el: document.getElementById('carousel-item-1'), }, { position: 1, el: document.getElementById('carousel-item-2'), }, { position: 2, el: document.getElementById('carousel-item-3'), }, { position: 3, el: document.getElementById('carousel-item-4'), }, ]; // options with default values const options = { defaultPosition: 1, interval: 3000, indicators: { activeClasses: 'bg-white dark:bg-gray-800', inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800', items: [ { position: 0, el: document.getElementById('carousel-indicator-1'), }, { position: 1, el: document.getElementById('carousel-indicator-2'), }, { position: 2, el: document.getElementById('carousel-indicator-3'), }, { position: 3, el: document.getElementById('carousel-indicator-4'), }, ], }, // callback functions onNext: () => { console.log('next slider item is shown'); }, onPrev: () => { console.log('previous slider item is shown'); }, onChange: () => { console.log('new slider item has been shown'); }, }; // instance options object const instanceOptions = { id: 'carousel-example', override: true }; ``` Create a new carousel object using the options set above. ```javascript import { Carousel } from 'flowbite'; const carousel = new Carousel(carouselElement, items, options, instanceOptions); ``` Use the `next()` and `prev()` public methods on the carousel object to jump to the left or right carousel slide item based on the position of the current active item. ```javascript // goes to the next (right) slide carousel.next(); // goes to the previous (left) slide carousel.prev(); ``` Use the `slideTo(position)` public method to jump to the carousel slide item with the specified position. ```javascript // jumps to the 3rd position (position starts from 0) carousel.slideTo(2); ``` Use the `cycle()` method to start an automated cycling where the duration is the milliseconds of time between each slide and the `pause()` method to clear the cycle event. ```javascript // starts or resumes the carousel cycling (automated sliding) carousel.cycle(); // pauses the cycling (automated sliding) carousel.pause(); ``` ###### HTML Markup Here is an example of the HTML markup that you can use for the JavaScript example above. Please note that you should use the `hidden` class from Tailwind CSS to hide the carousel items by default. ```html

``` If you want to set trigger the next or previous slide item for the any button, just add some event listeners and call the `next()` and `prev()` methods on the Carousel object. ```javascript const $prevButton = document.getElementById('data-carousel-prev'); const $nextButton = document.getElementById('data-carousel-next'); $prevButton.addEventListener('click', () => { carousel.prev(); }); $nextButton.addEventListener('click', () => { carousel.next(); }); ``` ###### TypeScript If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options. Here's an example that applies the types from Flowbite to the code above: ```javascript import { Carousel } from 'flowbite'; import type { CarouselItem, CarouselOptions, CarouselInterface, } from 'flowbite'; import type { InstanceOptions } from 'flowbite'; const carouselElement: HTMLElement = document.getElementById('carousel-example'); const items: CarouselItem[] = [ { position: 0, el: document.getElementById('carousel-item-1'), }, { position: 1, el: document.getElementById('carousel-item-2'), }, { position: 2, el: document.getElementById('carousel-item-3'), }, { position: 3, el: document.getElementById('carousel-item-4'), }, ]; // object options with default values const options: CarouselOptions = { defaultPosition: 1, interval: 3000, indicators: { activeClasses: 'bg-white dark:bg-gray-800', inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800', items: [ { position: 0, el: document.getElementById('carousel-indicator-1'), }, { position: 1, el: document.getElementById('carousel-indicator-2'), }, { position: 2, el: document.getElementById('carousel-indicator-3'), }, { position: 3, el: document.getElementById('carousel-indicator-4'), }, ], }, // callback functions onNext: () => { console.log('next slider item is shown'); }, onPrev: () => { console.log('previous slider item is shown'); }, onChange: () => { console.log('new slider item has been shown'); }, }; // instance options object const instanceOptions: InstanceOptions = { id: 'carousel-example', override: true }; const carousel: CarouselInterface = new Carousel(carouselElement, items, options, instanceOptions); carousel.cycle(); // set event listeners for prev and next buttons const $prevButton = document.getElementById('data-carousel-prev'); const $nextButton = document.getElementById('data-carousel-next'); $prevButton.addEventListener('click', () => { carousel.prev(); }); $nextButton.addEventListener('click', () => { carousel.next(); }); ``` #### Chat bubble The chat bubble component is the building block for creating chat interfaces where users can send messages to each other by text, voice notes, images, galleries and other attachments. These components are usually used in chat applications and social media platforms such as Facebook, Twitter/X, WhatsApp, and more. The examples below provide multiple variations of default, outline, and clean styles coded with the utility classes from Tailwind CSS. Some of the components may require you to include the Flowbite JavaScript to enable the dropdowns and tooltips functionality. ##### Default chat bubble Use this example to show a simple chat bubble with a text message, user profile and a timestamp. {{< example id="chat-bubble-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

That's awesome. I think our users will really appreciate the improvements.

Delivered

{{< /example >}} ##### Voice note message This example can be used to show a voice note message with control buttons and a dropdown menu. {{< example id="voice-note-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

3:42

Delivered

{{< /example >}} ##### File attachment Use this example to send a file attachment inside a chat bubble with the ability to download the file. {{< example id="file-attachement-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

Flowbite Terms & Conditions 12 Pages 18 MB PDF

Delivered

{{< /example >}} ##### Image attachment This example can be used to show an image attachment with a download button when hovering over. {{< example id="image-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="480" >}}

Bonnie Green 11:46

This is the new office <3

Delivered

{{< /example >}} ##### Image gallery Use this example to show an image gallery based on a grid layout with the ability to download images. {{< example id="image-gallery-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="480" >}}

Bonnie Green 11:46

This is the new office <3

Delivered

{{< /example >}} ##### URL preview sharing Use this example to show a OG preview of the URL that is being shared inside the chat bubble. {{< example id="url-sharing-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="520" >}}

Bonnie Green 11:46

Check out this open-source UI component library based on Tailwind CSS:

https://github.com/themesberg/flowbite

GitHub - themesberg/flowbite: The most popular and open source libra ... github.com Delivered

{{< /example >}} ##### Outline chat bubble Use this example to show a text message with the user profile and timestamp outside the chat bubble. {{< example id="outline-chat-bubble-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="370" >}}

Bonnie Green 11:46

That's awesome. I think our users will really appreciate the improvements.

Delivered

{{< /example >}} ##### Outline voice note This example can be used to show a voice note with the user profile and timestamp outside the chat bubble. {{< example id="outline-voice-note-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="370" >}}

Bonnie Green 11:46

3:42

Delivered

{{< /example >}} ##### Outline file attachment Use this example to show a file attachment with the user profile and timestamp outside the chat bubble. {{< example id="outline-file-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

Flowbite Terms & Conditions 12 Pages 18 MB PDF

Delivered

{{< /example >}} ##### Outline image attachment This example can be used to send an image attachment with the user profile outside the chat bubble. {{< example id="outline-image-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="460" >}}

Bonnie Green 11:46

I'm working from home today! 😅

Delivered

{{< /example >}} ##### Outline image gallery Use this example to show an image gallery with the user profile and timestamp outside the chat bubble. {{< example id="outline-image-gallery-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="480" >}}

Bonnie Green 11:46

I'm working from home today! 😅

Delivered

{{< /example >}} ##### Outline URL preview sharing Use this example to show a URL preview with the user profile and timestamp outside the chat bubble. {{< example id="outline-url-sharing-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="520" >}}

Bonnie Green 11:46

Check out this open-source UI component library based on Tailwind CSS:

https://github.com/themesberg/flowbite

GitHub - themesberg/flowbite: The most popular and open source libra ... github.com

Delivered

{{< /example >}} ##### Clean chat bubble Use this example to show a text message with the user profile and timestamp with a transparent background. {{< example id="clean-chat-bubble-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="180" >}}

Bonnie Green 11:46

That's awesome. I think our users will really appreciate the improvements.

Delivered

{{< /example >}} ##### Clean voice note This example can be used to show a voice note with a transparent background. {{< example id="clean-voice-note-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="180" >}}

Bonnie Green 11:46

3:42

Delivered

{{< /example >}} ##### Clean file attachment Use this example to show a file attachment and a download button with a transparent background. {{< example id="clean-file-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="200" >}}

Bonnie Green 11:46

Flowbite Terms & Conditions 12 Pages 18 MB PDF

Delivered

{{< /example >}} ##### Clean image attachment This example can be used to show an image and a download button with a transparent background. {{< example id="clean-image-attachment-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}

Bonnie Green 11:46

This is the new office <3

Delivered

{{< /example >}} ##### Clean image gallery Use this example to show an image gallery with a transparent background as a chat message. {{< example id="clean-image-gallery-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="390" >}}

Bonnie Green 11:46

This is the new office <3

Delivered

{{< /example >}} ##### Clean URL preview sharing This example can be used to show a URL preview with a transparent background. {{< example id="clean-url-sharing-example" class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="450" >}}

Bonnie Green 11:46

Check out this open-source UI component library based on Tailwind CSS:

https://github.com/themesberg/flowbite

GitHub - themesberg/flowbite: The most popular and open source libra ... github.com Delivered

{{< /example >}} #### Clipboard The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element. Use cases for websites can be found in the examples below and they include copying code installation commands, API keys, URLs, addresses, contact details, sharing course URLs inside a modal and more. These components are built with Tailwind CSS and Flowbite and can be found on the internet on websites such as Bitly, Cloudflare, Amazon AWS and almost all open-source projects and documentations. ##### Default copy to clipboard Make sure that you add the `data-copy-to-clipboard-target="elementID"` data attribute to the trigger element (ie. the button) to initialize the JS behavior where the `elementID` is the ID of the element where the source text can be found (such as input field). Use this example to copy the content of an input text field by clicking on a button and update the button text by applying the JavaScript code from the tab below based on the `updateOnCopyCallback()` function callback from the Flowbite JS API. {{< example id="clipboard-example" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function() { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install'); const $defaultMessage = document.getElementById('default-message'); const $successMessage = document.getElementById('success-message'); clipboard.updateOnCopyCallback((clipboard) => { $defaultMessage.classList.add('hidden'); $successMessage.classList.remove('hidden'); // reset to default state setTimeout(() => { $defaultMessage.classList.remove('hidden'); $successMessage.classList.add('hidden'); }, 2000); }); }) ` >}}

{{< /example >}} ##### Input with copy button This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied. If you also want to update the text inside the tooltip and the icon, then you need to apply the JavaScript code based on the `updateOnCopyCallback()` function callback from the Flowbite JS API. {{< example id="clipboard-button-input-example" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function () { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button'); const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button'); const $defaultIcon = document.getElementById('default-icon'); const $successIcon = document.getElementById('success-icon'); const $defaultTooltipMessage = document.getElementById('default-tooltip-message'); const $successTooltipMessage = document.getElementById('success-tooltip-message'); clipboard.updateOnCopyCallback((clipboard) => { showSuccess(); // reset to default state setTimeout(() => { resetToDefault(); }, 2000); }) const showSuccess = () => { $defaultIcon.classList.add('hidden'); $successIcon.classList.remove('hidden'); $defaultTooltipMessage.classList.add('hidden'); $successTooltipMessage.classList.remove('hidden'); tooltip.show(); } const resetToDefault = () => { $defaultIcon.classList.remove('hidden'); $successIcon.classList.add('hidden'); $defaultTooltipMessage.classList.remove('hidden'); $successTooltipMessage.classList.add('hidden'); tooltip.hide(); } }) ` >}}

{{< /example >}} ##### Copy button with text Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied. Make sure that you also apply the custom JavaScript code below to enable the success and default message states. {{< example id="clipboard-button-text-input-example" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function () { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-text'); const $defaultMessage = document.getElementById('default-message'); const $successMessage = document.getElementById('success-message'); clipboard.updateOnCopyCallback((clipboard) => { showSuccess(); // reset to default state setTimeout(() => { resetToDefault(); }, 2000); }) const showSuccess = () => { $defaultMessage.classList.add('hidden'); $successMessage.classList.remove('hidden'); } const resetToDefault = () => { $defaultMessage.classList.remove('hidden'); $successMessage.classList.add('hidden'); } }) ` >}}

{{< /example >}} ##### Input group with copy This example can be used to show a copy to clipboard button inside an input group which has a label positioned inside the input field. The icon inside the button will switch to a success state if you also apply the custom JavaScript code below. {{< example id="clipboard-button-group-example" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function () { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'website-url'); const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-website-url'); const $defaultIcon = document.getElementById('default-icon'); const $successIcon = document.getElementById('success-icon'); const $defaultTooltipMessage = document.getElementById('default-tooltip-message'); const $successTooltipMessage = document.getElementById('success-tooltip-message'); clipboard.updateOnCopyCallback((clipboard) => { showSuccess(); // reset to default state setTimeout(() => { resetToDefault(); }, 2000); }) const showSuccess = () => { $defaultIcon.classList.add('hidden'); $successIcon.classList.remove('hidden'); $defaultTooltipMessage.classList.add('hidden'); $successTooltipMessage.classList.remove('hidden'); tooltip.show(); } const resetToDefault = () => { $defaultIcon.classList.remove('hidden'); $successIcon.classList.add('hidden'); $defaultTooltipMessage.classList.remove('hidden'); $successTooltipMessage.classList.add('hidden'); tooltip.hide(); } }) ` >}}

Verify your website:

URL

Security certificate is required for approval

{{< /example >}} ##### URL shortener input group Use this example to copy a shortened URL to the clipboard by clicking on a button with an icon positioned inside the input field and also show a tooltip with a message when the text has been copied. {{< example id="clipboard-url-shortener-example" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function() { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'url-shortener'); const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-url-shortener'); const $defaultIcon = document.getElementById('default-icon'); const $successIcon = document.getElementById('success-icon'); const $defaultTooltipMessage = document.getElementById('default-tooltip-message'); const $successTooltipMessage = document.getElementById('success-tooltip-message'); clipboard.updateOnCopyCallback((clipboard) => { showSuccess(); // reset to default state setTimeout(() => { resetToDefault(); }, 2000); }) const showSuccess = () => { $defaultIcon.classList.add('hidden'); $successIcon.classList.remove('hidden'); $defaultTooltipMessage.classList.add('hidden'); $successTooltipMessage.classList.remove('hidden'); tooltip.show(); } const resetToDefault = () => { $defaultIcon.classList.remove('hidden'); $successIcon.classList.add('hidden'); $defaultTooltipMessage.classList.remove('hidden'); $successTooltipMessage.classList.add('hidden'); tooltip.hide(); } }) ` >}}

Shorten URL:

Make sure that your URL is valid

{{< /example >}} ##### Copy source code block This example can be used to copy and paste code inside a `

` and `` block by clicking on a button with an icon position inside the block and also show a tooltip with a message when the text has been copied.

You need to add an extra `data-copy-to-clipboard-content-type="innerHTML"` data attribute to the trigger element (ie. the button) to specify that the content that is to be copied is from the `innerHTML` of the target element (ie. the code block). 

You also need to add the `data-copy-to-clipboard-html-entities="true"` option to the trigger element so that the copied text will be decoded from HTML entities to plain text that will work inside your code editor.

{{< example id="clipboard-source-block" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="480" javascript=`
window.addEventListener('load', function () {
    const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'code-block');

    const $defaultMessage = document.getElementById('default-message');
    const $successMessage = document.getElementById('success-message');

    clipboard.updateOnCopyCallback((clipboard) => {
        showSuccess();

        // reset to default state
        setTimeout(() => {
            resetToDefault();
        }, 2000);
    })

    const showSuccess = () => {
        $defaultMessage.classList.add('hidden');
        $successMessage.classList.remove('hidden');
    }

    const resetToDefault = () => {
        $defaultMessage.classList.remove('hidden');
        $successMessage.classList.add('hidden');
    }
})
` >}}

    
        Card example with CTA button:
    
    
        
            'use client';

import Link from 'next/link';
import { Navbar } from 'flowbite-react';

function Component() {
  return (
    <Navbar fluid rounded>
      <Navbar.Brand as={Link} href="https://flowbite-react.com">
        <img src="/favicon.svg" className="mr-3 h-6 sm:h-9" alt="Flowbite React Logo" />
        <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite React</span>
      </Navbar.Brand>
      <Navbar.Toggle />
      <Navbar.Collapse>
        <Navbar.Link href="#" active>
          Home
        </Navbar.Link>
        <Navbar.Link as={Link} href="#">
          About
        </Navbar.Link>
        <Navbar.Link href="#">Services</Navbar.Link>
        <Navbar.Link href="#">Pricing</Navbar.Link>
        <Navbar.Link href="#">Contact</Navbar.Link>
      </Navbar.Collapse>
    </Navbar>
  );
}

        
    
        
    
    
    Configure Tailwind CSS and Flowbite before copying the code

{{< /example >}}

##### Card with API keys

Use this example to show multiple input field elements that have the copy to clipboard button inside a card component for more complex applications where you need to copy API keys, account IDs and more.

Make sure that you also apply the custom JavaScript code with the function callback to enable the success and default message states for each input field and copy button.

{{< example id="clipboard-api-keys" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="580" javascript=`
window.addEventListener('load', function() {
    const clipboardAccountID = FlowbiteInstances.getInstance('CopyClipboard', 'account-id');
    const clipboardExternalID = FlowbiteInstances.getInstance('CopyClipboard', 'api-key');
    const clipboardRoleARN = FlowbiteInstances.getInstance('CopyClipboard', 'role-arn');

    const tooltipAccountID = FlowbiteInstances.getInstance('Tooltip', 'tooltip-account-id');
    const tooltipExternalID = FlowbiteInstances.getInstance('Tooltip', 'tooltip-api-key');
    const tooltipRoleARN = FlowbiteInstances.getInstance('Tooltip', 'tooltip-role-arn');

    const clipboards = [
        {
            clipboard: clipboardAccountID,
            tooltip: tooltipAccountID,
            defaultMessage: document.getElementById('default-tooltip-message-account-id'),
            successMessage: document.getElementById('success-tooltip-message-account-id'),
            defaultIcon: document.getElementById('default-icon-account-id'),
            successIcon: document.getElementById('success-icon-account-id')
        },
        {
            clipboard: clipboardExternalID,
            tooltip: tooltipExternalID,
            defaultMessage: document.getElementById('default-tooltip-message-api-key'),
            successMessage: document.getElementById('success-tooltip-message-api-key'),
            defaultIcon: document.getElementById('default-icon-api-key'),
            successIcon: document.getElementById('success-icon-api-key')
        },
        {
            clipboard: clipboardRoleARN,
            tooltip: tooltipRoleARN,
            defaultMessage: document.getElementById('default-tooltip-message-role-arn'),
            successMessage: document.getElementById('success-tooltip-message-role-arn'),
            defaultIcon: document.getElementById('default-icon-role-arn'),
            successIcon: document.getElementById('success-icon-role-arn')
        }
    ]

    clipboards.forEach((item) => {
        item.clipboard.updateOnCopyCallback(() => {
            showSuccess(item.defaultMessage, item.successMessage);
            showSuccess(item.defaultIcon, item.successIcon);
            item.tooltip.show();

            // reset to default state
            setTimeout(() => {
                resetToDefault(item.defaultMessage, item.successMessage);
                resetToDefault(item.defaultIcon, item.successIcon);
                item.tooltip.hide();
            }, 2000);
        })
    })

    const showSuccess = ($defaultEl, $successEl) => {
        $defaultEl.classList.add('hidden');
        $successEl.classList.remove('hidden');
    }

    const resetToDefault = ($defaultEl, $successEl) => {
        $defaultEl.classList.remove('hidden');
        $successEl.classList.add('hidden');
    }
})
` >}}

    Create a role with read only in-line policies
    To give Flowbite read access, please create an IAM Role following trust relationship and inline policy.
    Flowbite account ID:
    
        
        
        
            Copy to clipboard
            Copied!
            
        
    
    API key:
    
        
        
        
            Copy to clipboard
            Copied!
            
        
    
    Role ARN:
    
        
        
        
            Copy to clipboard
            Copied!
            
        
    
    
        
        
    

{{< /example >}}

##### Copy contact details

This example can be used to copy the text content (ie. contact details) inside of the `` field by clicking on the copy to clipboard button positioned inside of the address card.

Make sure that you set the `data-copy-to-clipboard-content-type="textContent"` data attribute to the trigger element (ie. the button) to specify the source of the content that is to be copied.

{{< example id="contact-details-clipboard" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="380" javascript=`
window.addEventListener('load', function() {
    const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'contact-details');
    const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-contact-details');

    const $defaultIcon = document.getElementById('default-icon-contact-details');
    const $successIcon = document.getElementById('success-icon-contact-details');

    const $defaultTooltipMessage = document.getElementById('default-tooltip-message-contact-details');
    const $successTooltipMessage = document.getElementById('success-tooltip-message-contact-details');

    clipboard.updateOnCopyCallback((clipboard) => {
        showSuccess();

        // reset to default state
        setTimeout(() => {
            resetToDefault();
        }, 2000);
    })

    const showSuccess = () => {
        $defaultIcon.classList.add('hidden');
        $successIcon.classList.remove('hidden');
        $defaultTooltipMessage.classList.add('hidden');
        $successTooltipMessage.classList.remove('hidden');    
        tooltip.show();
    }

    const resetToDefault = () => {
        $defaultIcon.classList.remove('hidden');
        $successIcon.classList.add('hidden');
        $defaultTooltipMessage.classList.remove('hidden');
        $successTooltipMessage.classList.add('hidden');
        tooltip.hide();
    }
})
` >}}

    Contact details
    
        
            Name 

            Email 

            Phone Number
        
        
            Bonnie Green 

            name@flowbite.com 

            + 12 345 67890
        
        
        
            Copy to clipboard
            Copied!
            
        
    

{{< /example >}}

##### Copy button with modal

Use this example to show an input field where you can copy the URL of the current page and also show a modal with the copied URL when the copy button is clicked.

{{< example id="copy-to-clipboard-modal" class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="580" javascript=`
window.addEventListener('load', function() {
    const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'course-url');
    const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-course-url');

    const $defaultIcon = document.getElementById('default-icon-course-url');
    const $successIcon = document.getElementById('success-icon-course-url');

    const $defaultTooltipMessage = document.getElementById('default-tooltip-message-course-url');
    const $successTooltipMessage = document.getElementById('success-tooltip-message-course-url');

    clipboard.updateOnCopyCallback((clipboard) => {
        showSuccess();

        // reset to default state
        setTimeout(() => {
            resetToDefault();
        }, 2000);
    })

    const showSuccess = () => {
        $defaultIcon.classList.add('hidden');
        $successIcon.classList.remove('hidden');
        $defaultTooltipMessage.classList.add('hidden');
        $successTooltipMessage.classList.remove('hidden');    
        tooltip.show();
    }

    const resetToDefault = () => {
        $defaultIcon.classList.remove('hidden');
        $successIcon.classList.add('hidden');
        $defaultTooltipMessage.classList.remove('hidden');
        $successTooltipMessage.classList.add('hidden');
        tooltip.hide();
    }
})
` >}}




    
        
        
            
            
                
                    Share course
                
                
            
            
            
                Share the course link below with your friends:
                
                    
                    
                    
                        Copy to clipboard
                        Copied!
                        
                    
                
                
            
        
    

{{< /example >}}

##### JavaScript behaviour

Use the **CopyClipboard** object from the Flowbite JS API to create a component with a trigger element (ie. an input field, code blocks, address tag) and target element (ie. button or text) where the content of the target element is copied to the clipboard when the trigger element is clicked.

###### Object parameters

Use the object parameters from the CopyClipboard object to set options such as the content type of the text that is to be copied (ie. value of an input field, text content or inner HTML) and other options.


  
      
          
              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          
      
      
          
              
                  triggerEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the trigger element (ie. a button or text) that will trigger the copy to clipboard event when being clicked.
              
          
          
              
                  targetEl
              
              
                  Element
              
              
                  Required
              
              
                  Set the target element where the text that will be copied to the clipboard is located (ie. an input field, code block, address tag).
              
          
          
              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Set these options to set the the content type, HTML decoder and callback function for the copy to clipboard event.
              
          
          
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
      
  


###### Options

Use these optional options for the CopyClipboard object to set the content type from where the text will be copied from, an optional HTML decoder for code blocks and function callbacks to set success and default messages.


  
      
          
              
                  Option
              
              
                  Type
              
              
                  Description
              
          
      
      
          
              
                  contentType
              
              
                  String
              
              
                  Set the source of the text that will be copied: input (default), innerHTML or textContent.
              
          
          
              
                  htmlEntities
              
              
                  String
              
              
                  Set this option to true if you want to decode the HTML entities for code blocks. Default is false.
              
          
          
              
                  onCopy
              
              
                  Function
              
              
                  Set a callback function when the text has been copied to the clipboard.
              
          
      
  


###### Methods

Use the following methods from the CopyClipboard component to programmatically work with the component such as copying the text on demand or updating the callback function.


  
      
          
              
                  Method
              
              
                  Description
              
          
      
      
            
              
                  getTargetValue()
              
              
                 Get the value of the target element (ie. input field, code block, address tag).
              
          
        
              
                  copy()
              
              
                 Use this method to copy the text from the target element to the clipboard.
              
          
          
              
                  decodeHTML()
              
              
                  Use this method to decode the HTML entities from the target element.
              
          
          
              
                  updateOnCopyCallback(callback)
              
              
                  Use this method to update the callback function that is called when the text has been copied to the clipboard.
              
          
      
  


###### Example

Check out the following example to learn how to create a new CopyClipboard component via the Flowbite JavaScript API and set up the class, options, and methods to programmatically work with the component.

```javascript
// set the trigger element such as a button or text field
const $triggerEl = document.getElementById('copy-clipboard-button');

// set the trigger element such as an input field or code block
const $targetEl = document.getElementById('copy-text');

// optional options with default values and callback functions
const options = {
    contentType: 'input',
    htmlEntities: false, // infinite
    onCopy: () => {
        console.log('text copied successfully!');
    }
};

const instanceOptions = {
  id: 'copy-clipboard-example',
  override: true
};
```

Next step is to create a new instance of a CopyClipboard object using the parameters we have set above.

```javascript
import { CopyClipboard } from 'flowbite';

/*
 * $triggerEl: required
 * $targetEl: required
 * options: optional
 * instanceOptions: optional
 */
const clipboard = new CopyClipboard($triggerEl, $targetEl, options, instanceOptions);
```

Set the event listeners on the button to copy the text from the input field:

```javascript
$triggerEl.addEventListener('click', () => {
    clipboard.copy();
});
```

Now you can programmatically call the methods of the CopyClipboard component:

```javascript
// get the value, inner HTML or text content of the target element
clipboard.getTargetValue();

// copy the target element text value
clipboard.copy();

// update the on copy function callback
clipboard.updateOnCopyCallback(() => {
    // do something when the text has been copied to the clipboard
    console.log('updated on copy callback success message');
});
```

###### HTML Markup

Here is an example of the HTML markup that you can use for the JavaScript example above.

```html

    Label
    
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the CopyClipboard object, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { CopyClipboard } from 'flowbite';
import type { CopyClipboardOptions, CopyClipboardInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the trigger element which will be clicked (ie. a button or text)
const $triggerEl: HTMLElement = document.getElementById('copy-clipboard-button') as HTMLElement;

// set the target element where the text will be copied from (ie. input field, code block)
const $targetEl: HTMLInputElement = document.getElementById('copy-text') as HTMLInputElement;

// optional options with default values and callback functions
const options: CopyClipboardOptions = {
    contentType: 'input',
    htmlEntities: false, // infinite
    onCopy: () => {
        console.log('text copied successfully!');
    }
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'copy-clipboard-example',
  override: true
};

/*
 * $triggerEl: required
 * $targetEl: required
 * options: optional
 * instanceOptions: optional
 */
const clipboard: CopyClipboardInterface = new CopyClipboard(
    $triggerEl,
    $targetEl,
    options,
    instanceOptions
);

// copy the value of the target element
clipboard.copy();
```

#### Datepicker

The Tailwind CSS datepicker component developed by Flowbite is built with vanilla JavaScript and using the utility-first classes from Tailwind. The datepicker features both inline and a date range picker functionality and some extra options such as autohide, custom format, positioning, and more. Check out the [timepicker component](https://flowbite.com/docs/forms/timepicker/) to select time alongside dates.

##### Getting started

If you want to use the datepicker component from Flowbite you have to include the Flowbite JavaScript file either via NPM or CDN. For versions before `2.4.0` please continue using the dedicated CDN and component.

Follow the [quickstart guide]({{< ref "getting-started/quickstart" >}}) and then include the following JavaScript file:

```html

```

Alternatively you can also use CDN to include the datepicker JavaScript.

```html

```

Also make sure that you add the source files for Tailwind in your main CSS file:

```css
@import "tailwindcss";

@source "../node_modules/flowbite-datepicker";
```

If you'd like to manually be able to manipulate the datepicker component using JavaScript then you should install the component using NPM and include it into your JavaScript code.

##### Datepicker example

Use the following example of an input element to create a datepicker component. All you need to do is to add the `datepicker` data attribute to any `input` element.

{{< example id="default-datepicker-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="500" initDatepicker=true >}}

  
    
  
  

{{< /example >}}

##### Inline datepicker

Use the `inline-datepicker` and `data-date` data attributes to initialize and set the default date for an inline datepicker inside a block element such as a `div`.

{{< example id="datepicker-inline-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true initDatepicker=true >}}

{{< /example >}}

##### Date range picker

Use the `date-rangepicker` data attribute and the following markup to initialize two datepickers as a range.

{{< example id="datepicker-range-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}

  
    
         
    
    
  
  to
  
    
         
    
    


{{< /example >}}

##### Options

Learn more about the options that you can use with the Tailwind datepicker to enable features such as autohide, action buttons, date format, orientation, and more based on the vanilla JavaScript from Flowbite.

###### Autohide

Use the `datepicker-autohide` data attribute to make the datepicker disappear right after selecting a date.

{{< example id="datepicker-autohide-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}

  
     
  
  

{{< /example >}}

###### Action buttons

By adding the `datepicker-buttons` data attribute you will enable the `today` and `clear` buttons:

- clicking on the `today` button will browse back to the current day/month/year
- clicking on the `clear` button will reset all selections

If you want the button to additionally select today's date, add `datepicker-autoselect-today` data attribute.

{{< example id="datepicker-action-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="530" initDatepicker=true >}}

  
     
  
  

{{< /example >}}

###### Date format

If you want to use a custom format such as `mm-dd-yyyy`then you can use the `datepicker-format="{format}"` data attribute to change it.

{{< example id="datepicker-date-format-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}

  
     
  
  

{{< /example >}}

###### Max and min dates

Use the `datepicker-min-date={format}` and `datepicker-max-date={format}` to set the minimum and maximum dates that can be selected inside the datepicker.

{{< example id="datepicker-max-min-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}

  
     
  
  

{{< /example >}}

###### Orientation

You can override the default positioning algorithm by using the `datepicker-orientation="{top|right|bottom|left}"` data attributes. You can even combine right with bottom or left with top.

{{< example id="datepicker-orientation-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}

  
     
  
  

{{< /example >}}

###### Title

You can also add a title to the datepicker by using the `datepicker-title="{title}"` data attribute.

{{< example id="datepicker-title-example" class="flex justify-center dark:bg-gray-900" github="components/datepicker.md" show_dark=true iframeHeight="530" initDatepicker=true >}}

  
     
  
  

{{< /example >}}

###### Custom colors

You can set the `primary` color class which is by default set to blue to add your own colors.

###### Language (i18n)

We are working on the API to provide language support for the datepicker. 

Until then, please refer to this [solution from GitHub](https://github.com/themesberg/flowbite/issues/32#issuecomment-1420422922).

##### Timepicker

Use the native browser timepicker input field to select a time alongside the datepicker. Check out more examples on the [timepicker](https://flowbite.com/docs/forms/timepicker/) component page from Flowbite.

{{< example id="timepicker-default-example" github="components/timepicker.md" show_dark=true >}}

    Select time:
    
        
            
        
        
    

{{< /example >}}

##### Dark mode

If you would like to enable dark mode for the datepicker please follow the [dark mode]({{< ref "customize/dark-mode" >}}) guide on Flowbite and enable it either manually or by using a dark mode switcher.

##### JavaScript Behaviour

Use the **Tailwind CSS Datepicker** component from Flowbite to select a date or range of dates based on the Datepicker API and configure the component using the methods and options that you can pass when creating the object using JavaScript.

###### Object parameters

Use the object parameters from the Datepicker component to set the datepicker parent input element and the options associated with it when creating a new instance.


  
      
          
              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          
      
      
          
              
                  datepickerEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the main HTML element that will be rendered for the datepicker. It can be an input element or a `div` for inline rendering.
              
          
          
              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Use the options parameter to set custom datepicker options such as the default date, minimum and maximum values, action buttons and callback functions.
              
          
          
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
      
  


###### Options

Use these optional options for the Datepicker object to set options such as the date format, orientation, max and min dates, custom buttons, callback functions and more.


  
      
          
              
                  Option
              
              
                  Type
              
              
                  Description
              
          
      
      
          
              
                  rangePicker
              
              
                  Boolean
              
              
                  If set to true then the datepicker will be converted to a date range picker. By default it's false.
              
          
          
              
                  format
              
              
                  String
              
              
                  Use this option to set a custom format for the datepicker. By default it's `mm/dd/yyyy`.
              
          
          
              
                  maxDate
              
              
                  String
              
              
                 Use this option to set the maximum selectable date of the datepicker component.
              
          
          
              
                  minDate
              
              
                  String
              
              
                 Use this option to set the minimum selectable date of the datepicker component.
              
          
          
              
                  orientation
              
              
                  String
              
              
                 Set the orientation of the datepicker component when it's not inline. It can be top, bottom, left, or right.
              
          
          
              
                  buttons
              
              
                  Boolean
              
              
                 If set to true then the "today" and "clear" action buttons will be shown that lets you select today's date or clear selections.
              
          
          
              
                  autoSelectToday
              
              
                  Integer
              
              
                 If set to 1 then it will automatically have today's date preselected.
              
          
          
              
                  title
              
              
                  String
              
              
                 Set a custom title for the datepicker component. By default it's null.
              
          
          
      
  


###### Methods

Use the following methods of the Datepicker object to programmatically manipulate the behaviour.


  
      
          
              
                  Method
              
              
                  Description
              
          
      
      
        
              
                  getDate()
              
              
                  Use this method to get the currenctly select date from the datepicker.
              
          
          
              
                  setDate()
              
              
                  Use this method to set the date value of the datepicker component.
              
          
          
              
                  show()
              
              
                  Use this function to programatically show the datepicker component.
              
          
          
              
                  hide()
              
              
                  Use this function to programatically hide the datepicker component.
              
          
          
              
                  getDatepickerInstance()
              
              
                  Use this method to get the parent datepicker instance with the extended collection of methods and options.
              
          
          
              
                  updateOnShow(callback)
              
              
                  Use this method to set a callback function whenever the datepicker component has been shown.
              
          
          
              
                  updateOnHide(callback)
              
              
                  Use this method to set a callback function whenever the datepicker component has been hidden.
              
          
      
  


###### Example

Check out the following examples to learn how to use a basic HTML markup together with the Flowbite Datepicker API JS.

First of all, you need to select the datepicker element (it can be an input field or div for inline datepickers) and set up the options object.

```javascript
// set the target element of the input field
const $datepickerEl = document.getElementById('datepicker-custom');

// optional options with default values and callback functions
const options = {
    defaultDatepickerId: null,
    autohide: false,
    format: 'mm/dd/yyyy',
    maxDate: null,
    minDate: null,
    orientation: 'bottom',
    buttons: false,
    autoSelectToday: false,
    title: null,
    rangePicker: false,
    onShow: () => {},
    onHide: () => {},
};

const instanceOptions = {
  id: 'datepicker-custom-example',
  override: true
};
```

Next step is to create a new instance of a Datepicker object using the parameters we have set above.

```javascript
import { Datepicker } from 'flowbite';

/*
 * $datepickerEl: required
 * options: optional
 */
const datepicker = new Datepicker($datepickerEl, options, instanceOptions);
```

Use the following methods to show and hide the datepicker, set or get the currently selected date and get access to the instance.

```javascript
// get the currently selected date (undefined if not selected)
datepicker.getDate();

// set the date (or dates if date range picker)
datepicker.setDate('05/31/2024');

// programatically show the datepicker
datepicker.show();

// programatically hide the datepicker
datepicker.hide();

// use this method to get the parent datepicker instance from https://mymth.github.io/vanillajs-datepicker/#/
datepicker.getDatepickerInstance();
```

###### HTML Markup

Here is an example of the HTML markup that you can use for the JavaScript example above.

```html

  
    
  
  

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Datepicker object, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Datepicker } from 'flowbite';
import type { DatepickerOptions, DatepickerInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the target element of the input field or div
const $datepickerEl: HTMLInputElement = document.getElementById('datepicker-custom') as HTMLInputElement;

// optional options with default values and callback functions
const options: DatepickerOptions = {
    defaultDatepickerId: null,
    autohide: false,
    format: 'mm/dd/yyyy',
    maxDate: null,
    minDate: null,
    orientation: 'bottom',
    buttons: false,
    autoSelectToday: 0,
    title: null,
    rangePicker: false,
    onShow: () => {},
    onHide: () => {},
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'datepicker-custom-example',
  override: true
};

/*
 * $datepickerEl: required
 * options: optional
 * instanceOptions: optional
 */
const datepicker: DatepickerInterface = new Datepicker(
    $datepickerEl,
    options,
    instanceOptions
);

// get the currently selected date (undefined if not selected)
datepicker.getDate();

// set the date (or dates if date range picker)
datepicker.setDate('05/31/2024');

// programatically show the datepicker
datepicker.show();

// programatically hide the datepicker
datepicker.hide();

// use this method to get the parent datepicker instance from https://mymth.github.io/vanillajs-datepicker/#/
datepicker.getDatepickerInstance();
```

###### Parent library

If you want to directly use the main Datepicker component instance you can either install it via NPM and import it or use the `getDatepickerInstance()` method using our Instance Manager to call all of the extra options and methods from the [parent plugin library](https://github.com/themesberg/flowbite-datepicker):

```bash
npm install flowbite-datepicker --save
```

After you've installed the NPM library, you will need to import the `Datepicker` module:

```javascript
import Datepicker from 'flowbite-datepicker';
```

Initialize a new element using the `Datepicker` constructor and optionally add your own options based on your needs:

```javascript
const datepickerEl = document.getElementById('datepickerId');
new Datepicker(datepickerEl, {
    // options
}); 
```

If you want to use the **Tailwind Date Range Picker** you have to import the `DateRangePicker` module:

```javascript
import DateRangePicker from 'flowbite-datepicker';
```

Then in the same fashion you can initialize a date range picker component by using the `DateRangePicker` constructor:

```javascript
const dateRangePickerEl = document.getElementById('dateRangePickerId');
new DateRangePicker(dateRangePickerEl, {
    // options
}); 
```

###### React support

One of our community members built the React version of the Flowbite Datepicker and you can learn more about it on this repository on GitHub.

###### Turbo load support 

In order to support turbo load from Ruby on Rails 7, you have to include the `flowbite.turbo.js` file either from NPM or CDN into your project.

Follow the [quickstart guide]({{< ref "getting-started/rails" >}}) and then include the following JavaScript file:

```bash
pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.turbo.min.js"
```

Don't forget to also import it inside your `application.js` file:

```javascript
import "flowbite/dist/flowbite.turbo.js";
```

#### Device mockups

The device mockup component can be used to feature a preview and screenshot of your application as if you would already use it on a mobile phone and it's a great use case for hero and CTA sections.

This component is built using only the utility classes from Tailwind CSS and has built-in dark mode support so it's easy to customize, it loads very fast and integrates perfectly with Tailwind CSS and Flowbite.

You can choose from multiple examples of mockups including phone, tablet, laptop, and even desktop devices with iOS or Android support.

##### Default mockup

Use this example to show a standard phone mockup based on Tailwind CSS and add your app screenshot inside of it with dark mode support included.

{{< example id="default-mockup" github="components/device-mockups.md" show_dark=true >}}

    
    
    
    
    
        
        
    

{{< /example >}}

##### iPhone 12 mockup (iOS)

Use this example to clearly show that the preview of your application is being used on an iPhone with iOS.

{{< example id="iphone-mockup" github="components/device-mockups.md" show_dark=true >}}

    
    
    
    
    
        
        
    

{{< /example >}}

##### Google Pixel (Android)

Use this alternative phone mockup example if you want to feature previews for android gadgets.

{{< example id="android-mockup" github="components/device-mockups.md" show_dark=true >}}

    
    
    
    
    
    
        
        
    

{{< /example >}}

##### Tablet mockup

This component can be used to show an application preview inside of a responsive tablet mockup.

{{< example id="tablet-mockup" github="components/device-mockups.md" show_dark=true >}}

    
    
    
    
    
        
        
    

{{< /example >}}

##### Laptop mockup

This example can be used to show a screenshot of your application inside a laptop mockup.

{{< example id="laptop-mockup" github="components/device-mockups.md" show_dark=true >}}

    
        
        
    


    

{{< /example >}}

##### Desktop mockup

Use this example to show a preview of your application inside a desktop device such as an iMac.

{{< example id="desktop-mockup" github="components/device-mockups.md" show_dark=true >}}

    
        
        
    



{{< /example >}}

##### Smartwatch mockup

This component can be used to showcase applications built for smartwatches.

{{< example id="smartwatch-mockup" github="components/device-mockups.md" show_dark=true >}}


    
    
    
        
        
    


{{< /example >}}

##### Mockup colors

You can easily update the color of the mockup by changing the background color with Tailwind CSS.

{{< example id="colors-mockup" github="components/device-mockups.md" show_dark=true >}}

    
    
    
    
    
        
        
    

{{< /example >}}

#### Drawer

Use the Drawer component (or "off-canvas") to show a fixed element relative to the document page from any side for navigation, contact forms, informational purposes or other user actions.

You can set multiple options such as the placement, activate body scrolling, show or hide the backdrop and even use the swipeable edge functionality to show a small part of the drawer when it is not shown completely.

To enable interactivity via data attributes and the Drawer API you need to include [Flowbite's JavaScript file]({{< ref "getting-started/quickstart" >}}).

##### Default drawer

To initiate the drawer component you need to set the `data-drawer-target="{id}"` data attribute to an element such as a button where the value needs to be the id of the drawer component itself.

Then you can use the following attributes to either show, hide or toggle the drawer visibility where the value is the id of the drawer component:

-   `data-drawer-show="{id}"` - show the drawer component
-   `data-drawer-hide="{id}"` - hide the drawer component
-   `data-drawer-toggle="{id}"` - toggle the visibility of the drawer component

For accessibility you should also apply the `aria-controls={id}` attribute to the element that triggers the drawer and the `aria-labelledby={id}` attribute to the drawer component where the value is the id of the drawer title.

You can also avoid the drawer flickering and hide it by default by applying the following classes to the Drawer element: `transition-transform left-0 top-0 -translate-x-full`. This will set the component off-canvas.

{{< example id="default-drawer-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




   Info
   
      
   Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.
   
      Learn more
      Get access 
   

{{< /example >}}

##### Drawer navigation

Use this example to show a navigational sidebar inside the drawer component.

{{< example id="drawer-navigation-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Menu
    
  
      
         
            
               
               Dashboard
            
         
         
            
            
                  
                     Products
                  
                  
                     Billing
                  
                  
                     Invoice
                  
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   

{{< /example >}}

##### Contact form

Use this example to show a contact form inside the drawer component.

{{< example id="drawer-contact-example" github="components/drawer.md" show_dark=true iframeHeight="840" iframeMaxHeight="840" skeletonPlaceholders=true >}}



   




   Contact us
   
   
      
         Your email
         
      
      
         Subject
         
      
      
         Your message
         
      
      
   
   
      info@company.com
   
   
      212-456-7890
   

{{< /example >}}

##### Form elements

Use this example if you want to add form elements inside the drawer component including datepickers.

{{< example id="drawer-form-example" github="components/drawer.md" show_dark=true iframeHeight="840" iframeMaxHeight="840" skeletonPlaceholders=true >}}



   




   New event
   
   
      
         Title
         
      
      
         Description
         
      
      
         
            
         
         
      
      
         Invite guests
         
            
            
         
      
      
         
         
         
         
      
      
   

{{< /example >}}

##### Placement

Use the placement options to position the drawer component either on the top, right, bottom, or left side of the document page. This can be done using the `data-drawer-placement="{top|right|bottom|left}"` data attribute where the default value is "left".

###### Left drawer

Use this example where you can position the drawer component on the left side of the page.

To span the full height of the page you'll have to add the `h-screen` class to the drawer component.

{{< example id="drawer-placement-left-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Left drawer
   
   Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.
   
      Learn more
      Get access 
   

{{< /example >}}

###### Right drawer

Use this example to show the drawer component on the right side of the page.

To span the full height of the page you'll have to add the `h-screen` class to the drawer component.

{{< example id="drawer-placement-right-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Right drawer
   
   Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.
   
      Learn more
      Get access 
   

{{< /example >}}

###### Top drawer

Use this example to show the drawer on the top side of the page.

{{< example id="drawer-placement-top-example" github="components/drawer.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}



   




    Top drawer
    
    Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.
   Learn more
   Get access 

{{< /example >}}

###### Bottom drawer

Use this example to show the drawer on the bottom side of the page.

{{< example id="drawer-placement-bottom-example" github="components/drawer.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}


   




    Bottom drawer
    
    Supercharge your hiring by taking advantage of our limited-time sale for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked candidates and the #1 design job board.
   Learn more
   Get access 

{{< /example >}}

##### Body scrolling

By default, body scrolling is disabled when the drawer is visible, however, you can choose to enable it using the `data-drawer-body-scrolling="{true|false}"` data attribute.

###### Disabled (default)

This is an example where the body scrolling behaviour is disabled when the drawer is visible.

{{< example id="drawer-disable-body-scrolling-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Menu
    
  
      
         
            
               
               Dashboard
            
         
         
            
            
                  
                     Products
                  
                  
                     Billing
                  
                  
                     Invoice
                  
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   

{{< /example >}}

###### Enabled

Get started with this example in order to enable body scrolling even if the drawer component is visible by using the `data-drawer-body-scrolling="false"` data attribute.

{{< example id="drawer-body-scrolling-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Menu
    
  
      
         
            
               
               Dashboard
            
         
         
            
            
                  
                     Products
                  
                  
                     Billing
                  
                  
                     Invoice
                  
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   

{{< /example >}}

##### Backdrop

The backdrop element can be used to dim out the background elements when the drawer is visible and also automatically hide the component when clicking outside of it.

Use the `data-drawer-backdrop="{true|false}"` data attribute where you can disable or enable the backdrop element.

###### Enabled (default)

Use this example to enable the backdrop element by default.

{{< example id="drawer-backdrop-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Menu
    
  
      
         
            
               
               Dashboard
            
         
         
            
            
                  
                     Products
                  
                  
                     Billing
                  
                  
                     Invoice
                  
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   

{{< /example >}}

###### Disabled

Use the `data-drawer-backdrop="false"` data attribute to disable the backdrop element when the drawer is shown.

{{< example id="drawer-disabled-backdrop-example" github="components/drawer.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Menu
    
  
      
         
            
               
               Dashboard
            
         
         
            
            
                  
                     Products
                  
                  
                     Billing
                  
                  
                     Invoice
                  
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   

{{< /example >}}

##### Swipeable edge

The drawer edge functionality allows you to show a small part of the drawer when it is not shown completely by applying the `data-drawer-edge="{true|false}"` data attribute.

In this example we also use the `data-drawer-toggle="id"` option to toggle the visibility of the drawer component by clicking on the "edge" part of the element.

Use the `data-drawer-edge-offset="bottom-[*px]"` data attribute where you can apply a class from Tailwind CSS to set the offset. Default value is `bottom-[60px]`.

{{< example id="drawer-swipe-example" github="components/drawer.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}



   




   
      
      Add widget
   
   
      
         
            
         
         Chart
      
      
         
            
         
         Table
      
      
         
            
         
         Ticket
      
      
         
            
         
         List
      
      
         
            
         
         Price
      
      
         
            
         
         Users
      
      
         
            
         
         Task
      
      
         
            
         
         Custom
      
   

{{< /example >}}

##### More examples

For more drawer component examples you can check out the following resources from Flowbite Blocks:

-   [CRUD read drawers](https://flowbite.com/blocks/application/crud-read-drawers/)
-   [CRUD create drawers](https://flowbite.com/blocks/application/crud-create-drawers/)
-   [CRUD update drawers](https://flowbite.com/blocks/application/crud-update-drawers/)
-   [Application shell layouts](https://flowbite.com/blocks/application/shells/)

##### JavaScript behaviour

The Drawer API can be used to create an instance of the class, use methods to manipulate the component by showing or hiding it on demand and also set custom behaviour options for placement, enabling or disabling the backdrop element, enabling or disabling the body scroll, and more.

###### Object parameters

Initialize a Drawer object with parameters such as the target element and the options object.


    
        
            
                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            
        
        
            
                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Set the main drawer element as a JavaScript object.
                
            
            
                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the default state of the drawer, placement, and other options.
                
            
            
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
        
    


###### Options

Use the following options for the Drawer object to set the placement, enable or disable the backdrop, enable or disable body scrolling, and more.


    
        
            
                
                    Option
                
                
                    Type
                
                
                    Description
                
            
        
        
            
                
                    placement
                
                
                    String
                
                
                    Set the position of the drawer component relative to the document body by choosing one of the values from {top|right|bottom|left}.
                
            
            
                
                    backdrop
                
                
                    Boolean
                
                
                  Enable or disable the backdrop element. Values can be true or false.
                
            
            
                
                    bodyScrolling
                
                
                    Boolean
                
                
                    Enable or disable body scrolling behaviour when the drawer is active. Values can be true or false.
                
            
            
                
                    edge
                
                
                    Boolean
                
                
                    Enable or disable the edge functionality by showing a small part of the drawer component even when inactive. Values can be true or false.
                
            
            
                
                    edgeOffset
                
                
                    String
                
                
                    Set the offset height that should be shown when the drawer is inactive. Default value is bottom-[60px]
                
            
            
                
                    backdropClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS utility classes to override the custom backdrop classes.
                
            
            
                
                    onShow()
                
                
                    Function
                
                
                    Set a callback function when the drawer has been shown.
                
            
            
                
                    onHide()
                
                
                    Function
                
                
                    Set a callback function when the drawer has been hidden.
                
            
            
                
                    onToggle()
                
                
                    Function
                
                
                    Set a callback function when the drawer visibility has been toggled.
                
            
        
    


###### Methods

Use the following methods on the Drawer object to show, hide or check the visibility.


    
        
            
                
                    Method
                
                
                    Description
                
            
        
        
            
                
                    show()
                
                
                    Use the show function to show the drawer element.
                
            
            
                
                    hide()
                
                
                    Use the hide function to hide the drawer element.
                
            
            
                
                    toggle()
                
                
                    Use the toggle function to toggle the drawer element's visibility.
                
            
            
                
                    isVisible()
                
                
                    Use the isVisible function to check whether the element is visible or not.
                
            
            
                
                    updateOnShow(callback)
                
                
                    Set a callback function when the drawer has been shown.
                
            
            
                
                    updateOnHide(callback)
                
                
                    Set a callback function when the drawer has been hidden.
                
            
            
                
                    updateOnToggle(callback)
                
                
                    Set a callback function when the drawer visibility has been toggled.
                
            
        
    


###### Example

Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Drawer object.

First of all, create a new JavaScript element object for the first parameter of the Drawer object and another options object to set the placement, backdrop settings, and callback functions.

```javascript
// set the drawer menu element
const $targetEl = document.getElementById('drawer-js-example');

// options with default values
const options = {
    placement: 'right',
    backdrop: true,
    bodyScrolling: false,
    edge: false,
    edgeOffset: '',
    backdropClasses:
        'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
    onHide: () => {
        console.log('drawer is hidden');
    },
    onShow: () => {
        console.log('drawer is shown');
    },
    onToggle: () => {
        console.log('drawer has been toggled');
    },
};

// instance options object
const instanceOptions = {
  id: 'drawer-js-example',
  override: true
};
```

Initialize the Drawer positioning by creating a new object:

```javascript
import { Drawer } from 'flowbite';

/*
 * $targetEl (required)
 * options (optional)
 * instanceOptions (optional)
 */
const drawer = new Drawer($targetEl, options, instanceOptions);
```

Use the `show` and `hide` methods to show and hide the drawer component directly from JavaScript.

```javascript
// show the drawer
drawer.show();

// hide the drawer
drawer.hide();
```

Use the `toggle` method to toggle the visibility of the drawer.

```javascript
// toggle the drawer
drawer.toggle();
```

Use the `isVisible` method to check the visibility of the drawer:

```javascript
// true or false
drawer.isVisible();
```

###### HTML Markup

Use the following HTML code for the JavaScript example above.

```html

    
        Info
    
    
    
        Supercharge your hiring by taking advantage of our
        limited-time sale
        for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked
        candidates and the #1 design job board.
    
    
        Learn more
        Get access
            
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Drawer (off-canvas) class, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Drawer } from 'flowbite';
import type { DrawerOptions, DrawerInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the drawer menu element
const $targetEl: HTMLElement = document.getElementById('drawer-js-example');

// options with default values
const options: DrawerOptions = {
    placement: 'right',
    backdrop: true,
    bodyScrolling: false,
    edge: false,
    edgeOffset: '',
    backdropClasses:
        'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',
    onHide: () => {
        console.log('drawer is hidden');
    },
    onShow: () => {
        console.log('drawer is shown');
    },
    onToggle: () => {
        console.log('drawer has been toggled');
    },
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'drawer-js-example',
  override: true
};

/*
 * $targetEl (required)
 * options (optional)
 * instanceOptions (optional)
 */
const drawer: DrawerInterface = new Drawer($targetEl, options, instanceOptions);

// show the drawer
drawer.show();
```

#### Dropdown

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.

Make sure to include }}">Flowbite's JavaScript file inside your project to enable dropdowns.

##### Dropdown example

If you want to show a dropdown menu when clicking on an element make sure that you add the data attribute `data-dropdown-toggle="dropdownId"` to the element (ie. a button) that will trigger the dropdown menu.

The `dropdownId` is the id of the dropdown menu element.

{{< example id="default-dropdown-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

##### Dropdown hover

Use the `data-dropdown-trigger="{hover|click}"` data attribute options to set whether the dropdown should be shown when hovering or clicking on the trigger element (ie. button).

There's a 300ms default delay when showing or hiding the dropdown due to UI/UX reasons and how it may affect the interaction with other components on the page. Generally, we recommend using the `click` method.

{{< example id="dropdown-hover-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

###### Delay duration

You can use the `data-dropdown-delay={milliseconds}` data attribute to set they delay on when to show or hide the dropdown menu when using hover. You may want to use this depending on how the users interact with your interface. In this example we add 500 milliseconds instead of the default 300.

{{< example id="dropdown-delay-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

##### Dropdown divider

You can use the `divide-y divide-gray-100` classes to add separate elements inside the dropdown menu.

{{< example id="dropdown-divider-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="320" >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Separated link
    

{{< /example >}}

##### Dropdown header

Use this example to show extra information outside of the list of menu items inside the dropdown.

{{< example id="dropdown-header-example" class="flex justify-center " github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}




    
      Bonnie Green
      name@flowbite.com
    
    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Sign out
    

{{< /example >}}

##### Multi-level dropdown

Use this example to enable multi-level dropdown menus by adding stacked elements inside of each other.

{{< example id="dropdown-multi-level-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="350" >}}




    
      
        Dashboard
      
      
        
          
            
              
                Overview
              
              
                My downloads
              
              
                Billing
              
              
                Rewards
              
            
        
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

##### Dropdown with checkbox

Add multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.

{{< example id="dropdown-checkbox-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="290" >}}




    
      
        
          
          Default checkbox
        
      
      
        
            
            Checked state
          
      
      
        
          
          Default checkbox
        
      
    

{{< /example >}}

###### Background hover

Use this example to update the background color of a menu item when using a list of checkbox elements.

{{< example id="dropdown-checkbox-bg-hover-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="300" >}}




    
      
        
          
          Default checkbox
        
      
      
        
            
            Checked state
          
      
      
        
          
          Default checkbox
        
      
    

{{< /example >}}

###### Helper text

Add an extra helper text to each checkbox element inside the dropdown menu list with this example.

{{< example id="dropdown-checkbox-helper-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}




    
      
        
          
              
          
          
              
                Enable notifications
                Some helpful instruction goes over here.
              
          
        
      
      
        
          
              
          
          
              
                Enable 2FA auth
                Some helpful instruction goes over here.
              
          
        
      
      
        
          
              
          
          
              
                Subscribe newsletter
                Some helpful instruction goes over here.
              
          
        
      
    

{{< /example >}}

##### Dropdown with radio

Enable more advanced interaction with your users by adding radio input elements inside the dropdown menu.

{{< example id="dropdown-radio-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="250" >}}




    
      
        
            
            Default radio
        
      
      
        
            
            Checked state
        
      
      
        
            
            Default radio
        
      
    

{{< /example >}}

###### Background hover

Use this example to update the background color when hovering over a menu item when using radio elements.

{{< example id="dropdown-radio-bg-hover-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="280" >}}




    
      
        
            
            Default radio
        
      
      
        
            
            Checked state
        
      
      
        
            
            Default radio
        
      
    

{{< /example >}}

###### Helper text

This example can be used to add an extra helper text inside of each radio element from the dropdown menu.

{{< example id="dropdown-radio-helper-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}




    
      
        
          
              
          
          
              
                Individual
                Some helpful instruction goes over here.
              
          
        
      
      
        
          
              
          
          
              
                Company
                Some helpful instruction goes over here.
              
          
        
      
      
        
          
              
          
          
              
                Non profit
                Some helpful instruction goes over here.
              
          
        
      
    

{{< /example >}}

##### Dropdown with toggle switch

Show a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.

{{< example id="dropdown-toggle-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="280" >}}




    
      
        
          
            
            
            Enable notifications
          
        
      
      
        
          
            
            
            Enable 2FA authentication
          
        
      
      
        
          
            
            
            Subscribe to newsletter
          
        
      
    


{{< /example >}}

##### Dropdown with scrolling

This example can be used when you want to show a long list of items that won't affect the height of the dropdown menu by enabling a scrolling behaviour.

{{< example id="dropdown-scroll-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="380" >}}




  
    
      
        
        Jese Leos
      
    
    
      
        
        Robert Gough
      
    
    
      
        
        Bonnie Green
      
    
    
      
        
        Leslie Livingston
      
    
    
      
        
        Michael Gough
      
    
    
      
        
        Joseph Mcfall
      
    
          
      
        
        Roberta Casas
      
    
    
      
        
        Neil Sims
      
    
  
  
      
      Add new user
  

{{< /example >}}

##### Dropdown with search

Use this example if you want to add a search bar inside the dropdown menu to be able to filter through a long list of menu items with scrolling behaviour.

{{< example id="dropdown-search-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="440" >}}




    
      Search
      
        
          
        
        
      
    
    
      
        
          
          Bonnie Green
        
      
      
        
            
            Jese Leos
          
      
      
        
          
          Michael Gough
        
      
      
        
          
          Robert Wall
        
      
      
        
          
          Joseph Mcfall
        
      
      
        
          
          Leslie Livingston
        
      
            
        
          
          Roberta Casas
        
      
    
    
      
      Delete user
  

{{< /example >}}

##### Menu icon

Use the menu icon trigger element on components such as cards as an alternative element to the button.

{{< example id="dropdown-menu-icon-example" class="flex justify-center space-x-4 rtl:space-x-reverse" github="components/dropdowns.md" show_dark=true iframeHeight="320" >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Separated link
    






    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Separated link
    

{{< /example >}}

##### Notification bell

Use this example to show a list of notifications inside your application by providing more detailed information such as the user avatar, content and time of notification triggered by a notification bell icon.

{{< example id="dropdown-notification-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="660" >}}





  
      Notifications
  
  
    
      
        
        
          
        
      
      
          New message from Jese Leos: "Hey, what's up? All set for the presentation?"
          a few moments ago
      
    
    
      
        
        
          
        
      
      
          Joseph Mcfall and 5 others started following you.
          10 minutes ago
      
    
    
      
        
        
          
        
      
      
          Bonnie Green and 141 others love your story. See it and view more stories.
          44 minutes ago
      
    
    
      
        
        
          
        
      
      
          Leslie Livingston mentioned you in a comment: @bonnie.green what do you say?
          1 hour ago
      
    
    
      
        
        
          
        
      
      
          Robert Brown posted a new video: Glassmorphism - learn how to implement the new design trend.
          3 hours ago
      
    
  
  
    
      
        View all
    
  

{{< /example >}}

##### User avatar

This example can be used to show a list of menu items and options when a user is logged into your application.

{{< example id="dropdown-avatar-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="370" >}}




    
      Bonnie Green
      name@flowbite.com
    
    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Sign out
    

{{< /example >}}

###### Avatar with name

Use this example to also show the name or email of the user next to the avatar for the dropdown menu.

{{< example id="dropdown-avatar-name-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="370" >}}




    
      Pro User
      name@flowbite.com
    
    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Sign out
    

{{< /example >}}

##### Dropdown navbar

You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use a `button` element.

{{< example id="dropdown-navbar-example" bodyClass="!p-0" github="components/dropdowns.md" show_dark=true iframeHeight="340" >}}


  
    
        
        Flowbite
    
    
    
      
        
          Home
        
        
            
            
            
                
                  
                    Dashboard
                  
                  
                    Settings
                  
                  
                    Earnings
                  
                
                
                  Sign out
                
            
        
        
          Services
        
        
          Pricing
        
        
          Contact
        
      
    
  

{{< /example >}}

##### Dropdown datepicker

Use this example to show a date range picker inside a dropdown menu. Use the `data-dropdown-ignore-click-outside-class={class}` option to keep the dropdown menu open when interacting with the datepicker component by setting the element's parent class name.

{{< example id="dropdown-datepicker-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="520" >}}



    
      
          
            
                
            
            
          
          to
          
            
                
            
            
        
      
    

{{< /example >}}

##### Sizes

The dropdown menus work with buttons of all sizes including smaller or larger ones.

{{< example id="dropdown-sizes-example" github="components/dropdowns.md" class="flex justify-center" show_dark=true iframeHeight="380" >}}




    
      Bonnie Green
      name@flowbite.com
    
    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Sign out
    






    
      Bonnie Green
      name@flowbite.com
    
    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
    
    
      Sign out
    

{{< /example >}}

##### Placement

You can also use the `data-dropdown-placement={top|right|bottom|left}` data attribute options to choose the placement of the dropdown menu. By default the positioning is set to the bottom side of the button.

{{< example id="dropdown-placement-example" class="flex flex-wrap justify-center py-48" github="components/dropdowns.md" show_dark=true >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    






    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    






    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    






    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

###### Double placement

You can combine the placement options by using the `top|right|bottom|left-{start|end}` values. For example, `left-end` will position the dropdown on the left bottom, whereas `right-end` will position it on the right bottom side.

{{< example id="dropdown-2x-placement-example" class="flex flex-wrap justify-center" github="components/dropdowns.md" iframeHeight="240" show_dark=true >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    






    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

##### Dropdown offset

Use the offset options on the dropdown component to set the distance and skidding of the menu relative to the trigger element.

###### Distance

Use the `data-dropdown-offset-distance={pixels}` data attribute to set the number of pixels you want the dropdown menu to be offset from the trigger element.

{{< example id="dropdown-offset-distance-example" class="flex flex-wrap justify-center" github="components/dropdowns.md" iframeHeight="320" show_dark=true >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

###### Skidding

The `data-dropdown-offset-skidding={pixels}` data attribute can be used to move up or down (or left and right) the dropdown menu along and relative to the trigger element.

{{< example id="dropdown-offset-skidding-example" class="flex flex-wrap justify-center" github="components/dropdowns.md" iframeHeight="320" show_dark=true >}}




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

{{< /example >}}

##### More examples

For more dropdown examples you can check out the [dropdown filter](https://flowbite.com/blocks/application/filter/) components from Flowbite Blocks.

##### JavaScript behaviour

The **Dropdown** class from Flowbite can be used to create an object that will show a dropdown menu relative to the main trigger element (eg. a button) based on the parameters, options, and methods that you provide.

###### Object parameters

Initialize a Dropdown object with the object parameters such as the main target dropdown menu, a trigger element (eg. a button) and options to set the placement relative to the trigger element.


  
      
          
              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          
      
      
          
              
                  targetElement
              
              
                  Element
              
              
                  Required
              
              
                  Apply the main dropdown menu element as the first parameter of the Dropdown object.
              
          
          
              
                  triggerElement
              
              
                  Element
              
              
                  Required
              
              
                  Apply the trigger element, such as a button, which is required to position the dropdown menu and set a click event.
              
          
          
              
                  options
              
              
                  Object
              
              
                  Optional
              
              
                  Use the options parameter to set the positioning of the dropdown menu.
              
          
          
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
      
  


###### Options

Use the following options as the third parameter for the Dropdown class to set the placement of the dropdown menu.


  
      
          
              
                  Option
              
              
                  Type
              
              
                  Description
              
          
      
      
          
              
                  placement
              
              
                  String
              
              
                  Set the position of the dropdown menu relative to the trigger element choosing from top|right|bottom|left.
              
          
          
              
                  triggerType
              
              
                  String
              
              
                  Set the event type that will trigger the dropdown menu choosing between hover|click|none.
              
          
          
              
                  offsetDistance
              
              
                  String
              
              
                  Set the amount of pixels the dropdown menu should be offset relative to the trigger element on the X horizontal axis.
              
          
          
              
                  offsetSkidding
              
              
                  String
              
              
                  Set the number of pixels the dropdown menu should be offset relative to the trigger element on the Y horizontal axis.
              
          
          
              
                  delay
              
              
                  Number
              
              
                  Set the milliseconds for which the showing or hiding of the dropdown will be delayed for when using the hover trigger type.
              
          
          
              
                  ignoreClickOutsideClass
              
              
                  String
              
              
                  Set a class for one or more elements that when they are clicked should ignore closing the dropdown (ie. offcanvas datepicker).
              
          
          
              
                  onHide
              
              
                  Function
              
              
                  Set a callback function when the dropdown has been hidden.
              
          
          
              
                  onShow
              
              
                  Function
              
              
                  Set a callback function when the dropdown has been shown.
              
          
          
              
                  onToggle
              
              
                  Function
              
              
                  Set a callback function when the dropdown visibility has been toggled.
              
          
      
  


###### Methods

Use the methods from the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.


  
      
          
              
                  Method
              
              
                  Description
              
          
      
      
          
              
                  show()
              
              
                  Use this method on the Dropdown object to show the dropdown menu.
              
          
          
              
                  hide()
              
              
                  Use this method on the Dropdown object to hide the dropdown menu.
              
          
          
              
                  toggle()
              
              
                  Use this method on the Dropdown object to toggle the visibility of the dropdown menu.
              
          
          
              
                  isVisible()
              
              
                  Returns true or false based on the visibility of the dropdown.
              
          
          
              
                  updateOnShow(callback)
              
              
                  Use this method to set a callback function when the dropdown has been shown.
              
          
          
              
                  updateOnHide(callback)
              
              
                  Use this method to set a callback function when the dropdown has been hidden.
              
          
          
              
                  updateOnToggle(callback)
              
              
                  Use this method to set a callback function when the dropdown visibility has been changed.
              
          
      
  


###### Example

Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Dropdown object.

First of all, you need to set the main target element which will be the dropdown menu and the trigger element which will can be a button or a text.

After that, you can also optionally set an options object to set the placement of the dropdown menu and callback functions.

```javascript
// set the dropdown menu element
const $targetEl = document.getElementById('dropdownMenu');

// set the element that trigger the dropdown menu on click
const $triggerEl = document.getElementById('dropdownButton');

// options with default values
const options = {
    placement: 'bottom',
    triggerType: 'click',
    offsetSkidding: 0,
    offsetDistance: 10,
    delay: 300,
    ignoreClickOutsideClass: false,
    onHide: () => {
        console.log('dropdown has been hidden');
    },
    onShow: () => {
        console.log('dropdown has been shown');
    },
    onToggle: () => {
        console.log('dropdown has been toggled');
    },
};

// instance options object
const instanceOptions = {
  id: 'dropdownMenu',
  override: true
};
```

Create a new Dropdown object based on the options above.

```javascript
import { Dropdown } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 * instanceOptions: optional
 */
const dropdown = new Dropdown($targetEl, $triggerEl, options, instanceOptions);
```

Use the `show` and `hide` methods on the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.

```javascript
// show the dropdown menu
dropdown.show();

// hide the dropdown menu
dropdown.hide();

// toggle the dropdown menu
dropdown.toggle();

// check if dropdown is visible/open
dropdown.isVisible();
```

###### HTML Markup

Use the following HTML code for the JavaScript example above.

```html




    
      
        Dashboard
      
      
        Settings
      
      
        Earnings
      
      
        Sign out
      
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Dropdown class, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Dropdown } from 'flowbite';
import type { DropdownOptions, DropdownInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the dropdown menu element
const $targetEl: HTMLElement = document.getElementById('dropdownMenu');

// set the element that trigger the dropdown menu on click
const $triggerEl: HTMLElement = document.getElementById('dropdownButton');

// options with default values
const options: DropdownOptions = {
    placement: 'bottom',
    triggerType: 'click',
    offsetSkidding: 0,
    offsetDistance: 10,
    delay: 300,
    onHide: () => {
        console.log('dropdown has been hidden');
    },
    onShow: () => {
        console.log('dropdown has been shown');
    },
    onToggle: () => {
        console.log('dropdown has been toggled');
    },
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'dropdownMenu',
  override: true
};

/*
 * targetEl: required
 * triggerEl: required
 * options: optional
 * instanceOptions: optional
 */
const dropdown: DropdownInterface = new Dropdown(
    $targetEl,
    $triggerEl,
    options,
    instanceOptions
);

// show the dropdown
dropdown.show();
```

#### Footer

The footer is one of the most underestimated sections of a website being located at the very bottom of every page, however, it can be used as a way to try to convince users to stay on your website if they haven't found the information they've been looking for inside the main content area.

Use these footer sections coded with the utility classes from Tailwind CSS and components from Flowbite to offer valuable information to your users such as the brand's logo, sitemap links, copyright notice, social media profiles, and more.

##### Default footer

Use this footer component to show a copyright notice and some helpful website links.

{{< example id="default-footer-example" bodyClass="!p-0" github="components/footer.md" class="p-2" show_dark=true >}}


    
      © 2023 Flowbite™. All Rights Reserved.
    
    
        
            About
        
        
            Privacy Policy
        
        
            Licensing
        
        
            Contact
        
    
    

{{< /example >}}

##### Footer with logo

Use this component to show your brand's logo, a few website links and the copyright notice on a second row.

{{< example id="footer-logo-example" bodyClass="!p-0" github="components/footer.md" class="p-2" show_dark=true >}}


    
        
            
                
                Flowbite
            
            
                
                    About
                
                
                    Privacy Policy
                
                
                    Licensing
                
                
                    Contact
                
            
        
        
        © 2023 Flowbite™. All Rights Reserved.
    


{{< /example >}}

##### Social media icons

This footer component can be used to show your brand's logo, multiple rows of website links, a copyright notice and social media profile icons including Twitter, Facebook, Instagram, and more.

{{< example id="footer-social-media-example" bodyClass="!p-0" github="components/footer.md" show_dark=true >}}


    
        
          
              
                  
                  Flowbite
              
          
          
              
                  Resources
                  
                      
                          Flowbite
                      
                      
                          Tailwind CSS
                      
                  
              
              
                  Follow us
                  
                      
                          Github
                      
                      
                          Discord
                      
                  
              
              
                  Legal
                  
                      
                          Privacy Policy
                      
                      
                          Terms & Conditions
                      
                  
              
          
      
      
      
          © 2023 Flowbite™. All Rights Reserved.
          
          
              
                  
                  Facebook page
              
              
                  
                  Discord community
              
              
                  
                  Twitter page
              
              
                  
                  GitHub account
              
              
                  
                  Dribbble account
              
          
      
    

{{< /example >}}

##### Sitemap links

If you have a website with many pages you can use this footer component to show a sitemap spanning the entire width of a row followed below by a copyright notice and social media icons.

{{< example id="footer-sitemap-example" bodyClass="!p-0" github="components/footer.md" show_dark=true >}}


    
      
        
            Company
            
                
                    About
                
                
                    Careers
                
                
                    Brand Center
                
                
                    Blog
                
            
        
        
            Help center
            
                
                    Discord Server
                
                
                    Twitter
                
                
                    Facebook
                
                
                    Contact Us
                
            
        
        
            Legal
            
                
                    Privacy Policy
                
                
                    Licensing
                
                
                    Terms & Conditions
                
            
        
        
            Download
            
                
                    iOS
                
                
                    Android
                
                
                    Windows
                
                
                    MacOS
                
            
        
    
    
        © 2023 Flowbite™. All Rights Reserved.
        
        
            
                  
                  Facebook page
              
              
                  
                  Discord community
              
              
                  
                  Twitter page
              
              
                  
                  GitHub account
              
              
                  
                  Dribbble account
              
        
      
    

{{< /example >}}

##### Sticky footer

Use this example to set create a sticky footer by using a fixed position to the bottom of the document page as the user scrolls up or down the main content area.

{{< example id="footer-sticky-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}


    © 2023 Flowbite™. All Rights Reserved.
    
    
        
            About
        
        
            Privacy Policy
        
        
            Licensing
        
        
            Contact
        
    

{{< /example >}}

##### More examples

For more footer examples you can check out the footer sections from Flowbite Blocks:

-   [Footers for dashboard](https://flowbite.com/blocks/application/dashboard-footer/)
-   [Footers for marketing](https://flowbite.com/blocks/marketing/footer/)

#### Forms

Get started with these custom Tailwind CSS form components to gather information from your users using input text elements, checkboxes, radios, textareas, selects, file uploads, toggle switches, and more.

##### Default form

This is an example of a form component including an email, password, checkbox, and submit button that you can use as a starting point for any form element in your website using Flowbite and Tailwind CSS.

{{< example id="default-form-example" github="components/forms.md" show_dark=true >}}


  
    Your email
    
  
  
    Your password
    
  
  
    
      
    
    Remember me
  
  

{{< /example >}}


  {{< requires_tw3 >}}


##### Floating labels

Use these form elements inspired by material design from Google to adjust the `label` tag as the visual placeholder for the input elements using the `peer-placeholder-shown` and `peer-focus` utility classes. These components require Tailwind CSS v3.x and above.

{{< example id="form-floating-label-example" github="components/forms.md" show_dark=true >}}


  
      
      Email address
  
  
      
      Password
  
  
      
      Confirm password
  
  
    
        
        First name
    
    
        
        Last name
    
  
  
    
        
        Phone number (123-456-7890)
    
    
        
        Company (Ex. Google)
    
  
  

{{< /example >}}

##### Input Sizes

Use the following utility classes to create three different sizing options (large, base, and small) for your form input elements.

{{< example id="form-sizes-example" github="components/forms.md" show_dark=true >}}

  
      Large input
      
  
  
      Base input
      
  
  
      Small input
      
  

{{< /example >}}

##### Disabled inputs

Use the following utility classes to indicate a disabled form input item.

{{< example id="form-disabled-example" github="components/forms.md" show_dark=true >}}

  
  

{{< /example >}}

##### Shadow inputs

Alternatively, you can decide to apply a shadow styling using the `shadow-xs` class to any of your form input elements.

{{< example id="form-shadow-example" github="components/forms.md" show_dark=true >}}


  
    Your email
    
  
  
    Your password
    
  
  
    Repeat password
    
  
  
    
      
    
    I agree with the terms and conditions
  
  

{{< /example >}}

##### Helper text

Use the following markup to also add a helper text below your form input item. Usually used for newsletter signup elements.

{{< example id="form-helper-text-example" github="components/forms.md" show_dark=true >}}
 
  Your email
  

  We’ll never share your details. Read our Privacy Policy.

{{< /example >}}

##### Input element with icon

Use the following Tailwind utility classes and [SVG icon](https://flowbite.com/icons/) to add an icon inside input form elements.

{{< example id="form-input-icon-example" github="components/forms.md" show_dark=true >}}

  Your Email
  
    
      
    
    
  

{{< /example >}}

##### Input element with addon

Use this example to add a SVG icon or special character with an addon style to the input element.

{{< example id="form-input-addon-example" github="components/forms.md" show_dark=true >}}

  Username
  
    
      
    
    
  

{{< /example >}}

##### Form validation

Use the following two success and error styles when validation your forms.

{{< example id="form-validation-example" github="components/forms.md" show_dark=true >}}

  
    Your name
    
    Alright! Username available!
  
  
    Your name
    
    Oops! Username already taken!
  

{{< /example >}}

##### Textarea

Use the following code to create a textarea form element.

{{< example id="form-textarea-example" github="components/forms.md" show_dark=true >}}

  Your message
  

{{< /example >}}

##### Select input

Use the following select input element to show selectable list of items.

{{< example id="form-select-input-example" github="components/forms.md" show_dark=true >}}

  Select your country
  

{{< /example >}}

##### Checkbox

The code below can be used to create a fieldset of checkbox elements inside a form. We also created a checkbox variant with extra description and one in a disabled form.

{{< example id="form-checkbox-example" github="components/forms.md" show_dark=true >}}


  Checkbox variants

  
      
      I agree to the terms and conditions.
  

  
      
      I want to get promotional offers
  

  
      
      I am 18 years or older
  
  
  
      
          
      
      
          Free shipping via Flowbite
          For orders shipped from $25 in books or $29 in other categories
      
  

  
      
      Eligible for international shipping (disabled)
  

{{< /example >}}

##### Radio buttons

Group a series of buttons together on a single line or stack them in a vertical column.

{{< example id="form-radio-example" github="components/forms.md" show_dark=true >}}


  Countries

  
    
    
      United States
    
  

  
    
    
      Germany
    
  

  
    
    
      Spain
    
  

  
    
    
      United Kingdom
    
  

  
    
    
      China (disabled)
    
  

{{< /example >}}


  {{< requires_js >}}


##### File upload

Use the following Tailwind CSS file upload element to receive any type of file from users.

{{< example id="form-file-input-example" github="components/forms.md" show_dark=true >}}

  Upload file
  
  A profile picture is useful to confirm your are logged into your account

{{< /example >}}

##### Toggle Switch

Use the following toggle switch component to ask for a yes or no type of input from your users without the use of JavaScript.

{{< example id="form-toggle-example" class="flex flex-col flex-wrap" github="components/forms.md" show_dark=true >}}

  
  
  Toggle me



  
  
  Checked toggle



  
  
  Disabled toggle

{{< /example >}}

##### More examples

You can check out the following resources for more form components from Flowbite Blocks:

-   [Register forms](https://flowbite.com/blocks/marketing/register/)
-   [Login forms](https://flowbite.com/blocks/marketing/login/)
-   [Reset password forms](https://flowbite.com/blocks/marketing/reset-password/)
-   [Account recovery forms](https://flowbite.com/blocks/marketing/account-recovery/)
-   [Contact forms](https://flowbite.com/blocks/marketing/contact/)
-   [CRUD create forms](https://flowbite.com/blocks/application/crud-create-forms/)
-   [CRUD update forms](https://flowbite.com/blocks/application/crud-update-forms/)
-   [User onboarding forms](https://flowbite.com/blocks/marketing/user-onboarding/)

#### Gallery

The gallery component can be used to show multiple images inside a masonry grid layout styles with the utility-first classes from Tailwind CSS to show a collection of pictures to your users based on various layouts, styles, sizes, and colors.

This component is recommended for usage within marketing UI interfaces and website sections when you want to show pictures of your team members, office pictures, or even case study images.

##### Default gallery

Use this component to show a collection of images inside a gallery with three pictures on a row.

{{< example id="default-gallery-example" class="flex justify-center" github="components/gallery.md" show_dark=true >}}


    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    

{{< /example >}}

##### Masonry grid

This example can be used to show the images inside a masonry grid layouts with four columns.

{{< example id="masonry-gallery-example" class="flex justify-center" github="components/gallery.md" show_dark=true >}}


    
        
            
        
        
            
        
        
            
        
    
    
        
            
        
        
            
        
        
            
        
    
    
        
            
        
        
            
        
        
            
        
    
    
        
            
        
        
            
        
        
            
        
    

{{< /example >}}

##### Featured image

This example can be used to feature the most important image and show a row of five pictures below.

{{< example id="featured-gallery-example" class="flex justify-center" github="components/gallery.md" show_dark=true >}}


    
        
    
    
        
            
        
        
            
        
        
            
        
        
            
        
        
            
        
    

{{< /example >}}

##### Quad gallery

Use this example to show four larger images with two items on a row.

{{< example id="quad-gallery-example" class="flex justify-center" github="components/gallery.md" show_dark=true >}}


        
            
        
        
            
        
        
            
        
        
            
        
    
{{< /example >}}


  {{< requires_js >}}


##### Gallery with slider

This example uses the [carousel slider](https://flowbite.com/docs/components/carousel/) functionality to show multiple images inside a slider gallery.

{{< example id="slider-gallery-example" class="flex justify-center" github="components/gallery.md" show_dark=true >}}


    
    
         
        
            
        
        
        
            
        
        
        
            
        
        
        
            
        
        
        
            
        
    
    
    
    

{{< /example >}}


  {{< requires_js >}}


##### Custom slider controls

This example uses an alternative style for the control button for the carousel slider component.

{{< example id="slider-controls-gallery-example" class="flex justify-center" github="components/gallery.md" show_dark=true >}}


    
    
         
        
            
        
        
        
            
        
        
        
            
        
        
        
            
        
        
        
            
        
    
    
        
        
    

{{< /example >}}

##### Gallery with tag filters

Use this example to show a list of tags and filter the images below based on the activately selected tag.

{{< example id="tags-gallery-example" bodyClass="mt-0" github="components/gallery.md" show_dark=true >}}


    
    
    
    
    


    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    
    
        
    

{{< /example >}}

#### Indicators

The indicator component can be used as a small element positioned absolutely relative to another component such as a button or card and show a number count, account status (red for offline, green for online) and other useful information.

Check out the following examples for multiple sizes, colors, positionings, styles, and more all coded with Tailwind CSS and Flowbite.

##### Default indicator

Use this example to create a simple indicator with multiple colors and position it anywhere on the website.

{{< example id="default-indicator-example" class="flex items-center justify-center" github="components/indicators.md" show_dark=true >}}









{{< /example >}}

##### Legend indicator

This example can be used as a legend indicator for charts to also add a text next to the bullet point.

{{< example id="legend-indicator-example" class="flex items-center justify-center" github="components/indicators.md" show_dark=true >}}
Visitors
Sessions
Customers
Revenue
{{< /example >}}

##### Indicator count

This example can be used to show a number count inside the indicator and position it relative to a button component.

{{< example id="indicator-count-example" github="components/indicators.md" class="flex items-center justify-center" show_dark=true >}}

{{< /example >}}

##### Status indicator

Use this example to show a status indicator for the currently logged in user by showing red for offline and green for online.

{{< example id="status-indicator-example" github="components/indicators.md" class="flex items-center justify-center" show_dark=true >}}


    
    


    
    

{{< /example >}}

##### Badge indicator

This example can be used to add an indicator inside of a badge component.

{{< example id="badge-indicator-example" github="components/indicators.md" class="flex items-center justify-center" show_dark=true >}}


    
        
            
                
            
            
                
                    Neil Sims
                
                
                    email@flowbite.com
                
            
            
                
                Available
            
        
    
    
        
            
                
            
            
                
                    Bonnie Green
                
                
                    email@flowbite.com
                
            
            
                
                Unavailable
            
        
    

{{< /example >}}

##### Stepper indicator

You can also use the indicators inside of a stepper component when completing a form element.

{{< example id="stepper-indicator-example" class="space-y-8" github="components/indicators.md" show_dark=true >}}


    
        
            
                
            
            
        
        
            Step 1
        
    
    
        
            
                
            
            
        
        
            Step 2
        
    
    
        
            
                
            
            
        
        
            Step 2
        
    
    
        
            
                
            
        
        
            Step 3
        
    


    
        
            
                
            
            
        
        
            Step 1
        
    
    
        
            
                
            
            
        
        
            Step 2
        
    
    
        
            
                
            
            
        
        
            Step 2
        
    
    
        
            
                
            
        
        
            Step 3
        
    

{{< /example >}}

##### Loading indicator

Use this animated loading indicator when content inside of a card is still loading.

{{< example id="loading-indicator-example" class="space-y-8 flex items-center justify-center" github="components/indicators.md" show_dark=true >}}


    loading...

{{< /example >}}

##### Spinner indicator

Use this animated spinner component inside of a card component that hasn't loaded yet.

{{< example id="spinner-indicator-example" class="space-y-8 flex items-center justify-center" github="components/indicators.md" show_dark=true >}}


    
        
        Loading...
    

{{< /example >}}

##### Indicator position

Use these examples to position the indicator component anywhere relative to the parent element.

{{< example id="position-indicator" class="flex items-center justify-center space-y-8" github="components/indicators.md" show_dark=true >}}


    top-center
    top-left
    top-right
    middle-center
    middle-left
    middle-right
    bottom-center
    bottom-left
    bottom-right

{{< /example >}}

#### Jumbotron

The Jumbotron (hero) component can be used as the first section of your website with a focus on a marketing message to increase the likelihood of the user to continue browsing your website.

This UI component features a heading title, a short description, an optional CTA button, background image, gradient or solid background color and it's generally inside of a card element.

The jumbotron component from Flowbite is responsive on all devices, natively supports dark mode and is coded with the utility classes from Tailwind CSS.

##### Default jumbotron

Use this default example to show a title, description, and two CTA buttons for the jumbotron component.

{{< example id="default-jumbotron-example" bodyClass="p-0" github="components/jumbotron.md" show_dark=true >}}


    
        We invest in the world’s potential
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
        
            
                Get started
                
            
            
                Learn more
              
        
    

{{< /example >}}

##### Background image

Use this jumbotron to apply a background image with a darkening opacity effect to improve readability.

{{< example id="background-jumbotron-example" bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}


    
        We invest in the world’s potential
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
        
            
                Get started
                
            
            
                Learn more
              
        
    

{{< /example >}}

##### Featured video

This component can be used to feature a video together with a heading title, description, and CTA buttons.

{{< example id="video-jumbotron-example" bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}


    
        
            We invest in the world’s potential
            Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
            
                
                    Get started
                    
                
                
                    Learn more
                  
            
        
        
            
        
    

{{< /example >}}

##### Authentication form

Use this component to show a sign in or register form as the first section of your website.

{{< example id="form-jumbotron-example" bodyClass="!p-0 bg-gray-50 dark:bg-gray-900" github="components/jumbotron.md" show_dark=true >}}


    
        
            We invest in the world’s potential
            Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
            Read more about our app 
                
            
        
        
            
                
                    Sign in to Flowbite
                
                
                    
                        Your email
                        
                    
                    
                        Your password
                        
                    
                    
                        
                            
                        
                        
                        Remember this device
                        
                        Lost Password?
                    
                    
                    
                        Not registered yet? Create account
                    
                
            
        
    

{{< /example >}}

##### Gradient background

Use this component to show a hero pattern with a linear gradient layout as an overlay for added effects.

{{< example id="gradient-jumbotron-example" bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}


    
        
            New Jumbotron component was launched! See what's new 
            
        
        We invest in the world’s potential
        Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
           
            Email sign-up
            
                
                    
                
                
                
            
        
    
    

{{< /example >}}

##### Jumbotron with cards

This example can be used to show cards with headings, descriptions, and CTA buttons inside a grid layout.

{{< example id="cards-jumbotron-example" bodyClass="!p-0" github="components/jumbotron.md" show_dark=true >}}


    
        
            
                
                Tutorial
            
            How to quickly deploy a static website
            Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers.
            
                Read more
                
            
        
        
            
                
                    
                    Design
                
                Start with Flowbite Design System
                Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers.
                Read more
                    
                
            
            
                
                    
                    Code
                
                Best react libraries around the web
                Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers.
                Read more
                    
                
            
        
    

{{< /example >}}

##### More examples

For more jumbotron examples you can check out the [hero sections](https://flowbite.com/blocks/marketing/hero/) from Flowbite Blocks.

#### KBD

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.

Use the semantic `` keyboard input tag to use the default monospace font which is best suited for representing input keys.

##### Default KBD

Here's a list of KBD components that you can use inside any other element.

{{< example id="default-kbd-example" github="components/kbd.md" show_dark=true >}}
Shift
Ctrl
Tab
Caps Lock
Esc
Spacebar
Enter
{{< /example >}}

##### KBD inside text

Use this example by nesting an inline KBD component inside a paragraph.

{{< example id="kbd-text-example" github="components/kbd.md" show_dark=true >}}


    Please press Ctrl + Shift + R to re-render an MDN page.

{{< /example >}}

##### KBD inside table

The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.

{{< example id="kbd-table-example" github="components/kbd.md" show_dark=true >}}


    
        
            
                
                    Key
                
                
                    Description
                
            
        
        
            
                
                    Shift
                        or
                    Tab
                
                
                    Navigate to interactive elements
                
            
            
                
                    Enter
                    or
                    Spacebar
                
                
                    Ensure elements with ARIA role="button" can be activated with both key commands.
                
            
            
                
                    
                        
                        Arrow key up
                    
                    
                        
                        Arrow key down
                    
                    or
                    
                        
                        Arrow key left
                    
                    
                        
                        Arrow key right
                    
                
                
                    Choose and activate previous/next tab.
                
            
        
    

{{< /example >}}

##### Arrow keys

Use this example to show arrow keys inside the KBD styled element.

{{< example id="kbd-arrow-example" github="components/list-group.md" show_dark=true >}}


Arrow key up



Arrow key down



Arrow key left



Arrow key right

{{< /example >}}

##### Letter keys

Use this example if you need to show a key from the latin alphabet

{{< example id="kbd-letter-example" github="components/kbd.md" show_dark=true >}}
Q
W
E
R
T
Y
U
I
O
P
A
S
D
F
G
H
J
K
L
Z
X
C
V
B
N
M
{{< /example >}}

##### Number keys

Use this example to show a key inside a KBD component from the english numeral system.

{{< example id="kbd-number-example" github="components/kbd.md" show_dark=true >}}
1
2
3
4
5
6
7
8
9
0
{{< /example >}}

##### Function keys

This example can be used to denote function keys inside the KBD component.

{{< example id="kbd-function-example" github="components/kbd.md" show_dark=true >}}
F1
F2
F3
F4
F5
F6
F7
F8
F9
F10
F11
F12
{{< /example >}}

#### List group

The list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.

##### Default list group

Here's an example of a list group that you can use right away.

{{< example id="default-list-group-example" class="flex justify-center" github="components/list-group.md" show_dark=true >}}


    Profile
    Settings
    Messages
    Download

{{< /example >}}

##### List group with links

You can also display a series of links inside the list group element.

{{< example id="list-group-links-example" class="flex justify-center" github="components/list-group.md" show_dark=true >}}


    
        Profile
    
    
        Settings
    
    
        Messages
    
    
        Download
    

{{< /example >}}

##### List group with buttons

It is also possible to display a list of button element inside the list group component. The following example includes an active and disabled item as well.

{{< example id="list-group-buttons-example" class="flex justify-center" github="components/list-group.md" show_dark=true >}}


    
    
    
    

{{< /example >}}

##### List group with icons

Use the following example to create a list of buttons as a menu together with [SVG icons](https://flowbite.com/icons/).

{{< example id="list-group-icons-example" class="flex justify-center" github="components/list-group.md" show_dark=true >}}


    
    
    
    

{{< /example >}}

#### Mega menu

The mega menu component is a full-width dropdown that can be triggered by clicking on the menu item and it shows a list of links that you can use to navigate through the pages on a website.

Make sure that you have included the Flowbite JavaScript file inside your project to enable the interactivity of the hamburger icon on mobile devices and the dropdown functionality.

##### Default mega menu

Use this example to show a list of links aligned on three columns inside the mega menu dropdown.

{{< example id="default-mega-menu-example" bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="300" >}}


    
        
            
            Flowbite
        
        
            Login
            Sign up
            
        
        
            
                
                    Home
                
                
                    
                    
                        
                            
                                
                                    
                                        About Us
                                    
                                
                                
                                    
                                        Library
                                    
                                
                                
                                    
                                        Resources
                                    
                                
                                
                                    
                                        Pro Version
                                    
                                
                            
                        
                        
                            
                                
                                    
                                        Blog
                                    
                                
                                
                                    
                                        Newsletter
                                    
                                
                                
                                    
                                        Playground
                                    
                                
                                
                                    
                                        License
                                    
                                
                            
                        
                        
                            
                                
                                    
                                        Contact Us
                                    
                                
                                
                                    
                                        Support Center
                                    
                                
                                
                                    
                                        Terms
                                    
                                
                            
                        
                    
                
                
                    Team
                
                
                    Contact
                
            
        
    

{{< /example >}}

##### Mega menu with icons

This example of a mega menu dropdown can be used to also show an icon near the text of the link.

{{< example id="mega-menu-icons-example" bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="300" >}}


    
        
            
            Flowbite
        
        
            Login
            Sign up
            
        
        
            
                
                    Home
                
                
                    
                    
                        
                            
                                
                                    
                                        About us
                                        
                                        About Us
                                    
                                
                                
                                    
                                        Library
                                        
                                        Library
                                    
                                
                                
                                    
                                        Resources
                                        
                                        Resources
                                    
                                
                                
                                    
                                        Pro Version
                                        
                                        Pro Version
                                    
                                
                            
                        
                        
                            
                                
                                    
                                        Blog
                                        
                                        Blog
                                    
                                
                                
                                    
                                        Newsletter
                                        
                                        Newsletter
                                    
                                
                                
                                    
                                        Playground
                                        
                                        Playground
                                    
                                
                                
                                    
                                        License
                                        
                                        License
                                    
                                
                            
                        
                        
                            
                                
                                    
                                        Contact Us
                                        
                                        Contact Us
                                    
                                
                                
                                    
                                        Support Center
                                        
                                        Support Center
                                    
                                
                                
                                    
                                        Terms
                                        
                                        Terms
                                    
                                
                            
                        
                    
                
                
                    Team
                
            
        
    

{{< /example >}}

##### Full width dropdown

Use this example to show a mega menu dropdown that spans the entire width of the document page.

{{< example id="mega-menu-full-width-example" bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="440" >}}


    
        
            
            Flowbite
        
        
        
            
                
                    Home
                
                
                    
                
                
                    Marketplace
                
                
                    Resources
                
                
                    Contact
                
            
        
    
    
        
            
                
                    
                        Online Stores
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Segmentation
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Marketing CRM
                        Connect with third-party tools that you're already using.
                    
                
            
            
                
                    
                        Online Stores
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Segmentation
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Marketing CRM
                        Connect with third-party tools that you're already using.
                    
                
            
            
                
                    
                        Audience Management
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Creative Tools
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Marketing Automation
                        Connect with third-party tools that you're already using.
                    
                
            
        
    

{{< /example >}}

##### Full width with CTA

This example can be used to also show a CTA button or link next to the menu items inside the dropdown.

{{< example id="mega-menu-full-width-cta-example" bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="360" >}}


    
        
            
            Flowbite
        
        
        
            
                
                    Home
                
                
                    
                
                
                    Marketplace
                
                
                    Resources
                
                
                    Contact
                
            
        
    
    
        
            
                
                    
                        Online Stores
                    
                
                
                    
                        Segmentation
                    
                
                
                    
                        Marketing CRM
                    
                
                
                    
                        Online Stores
                    
                
            
            
                
                    
                        Our Blog
                    
                
                
                    
                        Terms & Conditions
                    
                
                
                    
                        License
                    
                
                
                    
                        Resources
                    
                
            
            
                Our brands
                At Flowbite, we have a portfolio of brands that cater to a variety of preferences.
                
                    Explore our brands 
                    Explore our brands 
                    
                
            
        
    

{{< /example >}}

##### Full width with image

This example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links.

{{< example id="mega-menu-full-width-image-example" bodyClass="!p-0" github="components/mega-menu.md" show_dark=true iframeHeight="360" >}}


    
        
            
            Flowbite
        
        
        
            
                
                    Home
                
                
                    
                
                
                    Marketplace
                
                
                    Resources
                
                
                    Contact
                
            
        
    
    
        
            
                
                    
                        Online Stores
                    
                
                
                    
                        Segmentation
                    
                
                
                    
                        Marketing CRM
                    
                
                
                    
                        Online Stores
                    
                
            
            
                
                    
                        Our Blog
                    
                
                
                    
                        Terms & Conditions
                    
                
                
                    
                        License
                    
                
                
                    
                        Resources
                    
                
            
            
                Preview the new Flowbite dashboard navigation.
                
            
        
    

{{< /example >}}

##### More examples

You can check out more mega menu examples on the [header components](https://flowbite.com/blocks/marketing/header/) page from Flowbite Blocks.

#### Modal

The modal component can be used as an interactive dialog on top of the main content area of the website to show notifications and gather information using form elements from your website users.

Get started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.

##### Default modal

In order to create a modal with Tailwind CSS you only have to add `data-modal-target="modalId"` data attribute where `modalId` is the ID of the modal that you are targeting.

If you want to toggle the visibility, show, or hide the modal you can use the following data attributes where the value is the unique ID of the modal component:

-   `data-modal-toggle="modalID"` - toggle the modal
-   `data-modal-show="modalID"` - show the modal
-   `data-modal-hide="modalID"` - close the modal

{{< example id="default-modal-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="600" >}}






    
        
        
            
            
                
                    Terms of Service
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    

{{< /example >}}

##### Static modal

Use the `data-modal-backdrop="static"` data attribute to prevent the modal from closing when clicking outside of it. This can be used with situations where you want to force the user to choose an option such as a cookie notice or when taking a survey.

{{< example class="dark:bg-gray-900" github="components/modal.md" class="flex justify-center" iframeHeight="600" show_dark=true >}}






    
        
        
            
            
                
                    Static modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    

{{< /example >}}

##### Pop-up modal

You can use this modal example to show a pop-up decision dialog to your users especially when deleting an item and making sure if the user really wants to do that by double confirming.

{{< example id="modal-popup-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="500" >}}



    
        
            
            
                
                Are you sure you want to delete this product?
                
                
            
        
    

{{< /example >}}

##### Form element

Use this modal example with form input element to receive information from your users with the advantage of not having to link to another page but keeping the user on the currently active page. A great example would be a login or a register form.

{{< example id="modal-form-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="600" >}}






    
        
        
            
            
                
                    Sign in to our platform
                
                
            
            
            
                
                    
                        Your email
                        
                    
                    
                        Your password
                        
                    
                    
                        
                            
                                
                            
                            Remember me
                        
                        Lost Password?
                    
                    
                    
                        Not registered? Create account
                    
                
            
        
    
 
{{< /example >}}

##### Modal with CRUD

Use this example of a modal to use within CRUD (Create, Read, Update, Delete) operations to create new items, update existing ones, or delete them with a form inside of the modal.

{{< example id="modal-crud-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="600" >}}






    
        
        
            
            
                
                    Create New Product
                
                
            
            
            
                
                    
                        Name
                        
                    
                    
                        Price
                        
                    
                    
                        Category
                        
                    
                    
                        Product Description
                                            
                    
                
                
            
        
    
 
{{< /example >}}

##### Modal with radio inputs

This example can be used to show a list of options to your users by using advanced radio inputs with a custom design.

{{< example id="modal-radio-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="600" >}}






    
        
        
            
            
                
                    Open positions
                
                
            
            
            
                Select your desired position:
                
                    
                        
                                                   
                            
                                UI/UX Engineer
                                Flowbite
                            
                            
                        
                    
                    
                        
                        
                            
                                React Developer
                                Alphabet
                            
                            
                        
                    
                    
                        
                        
                            
                                Full Stack Engineer
                                Apple
                            
                            
                        
                    
                
                
            
        
    
 
{{< /example >}}

##### Modal with timeline

Use this example to show a timeline of events to your users with a modal. This can be used to show a changelog of your product or a timeline of events.

{{< example id="modal-timeline-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="600" >}}






    
        
        
                
                
                    
                        Changelog
                    
                    
                
                
                
                                      
                                    
                            
                                
                            
                            Flowbite Application UI v2.0.0 Latest
                            Released on Nov 10th, 2023
                            
                        
                        
                            
                                
                            
                            Flowbite Figma v2.8.0
                            Released on Oct 7th, 2023
                            
                        
                        
                            
                                
                            
                            Flowbite Library v1.2.2
                            Released on December 2nd, 2021
                        
                    
                    
                
            
    
 
{{< /example >}}

##### Modal with progress bar

This modal can be used to show the progress of a task to your users. It can be used to show the progress of a file upload or a task that is being processed.

{{< example id="modal-progress-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="600" >}}






    
        
        
            
            
                
                Approaching Full Capacity
                Choosing the right server storage solution is essential for maintaining data integrity.

                

                    My storage
                    376,3 of 500 GB used
                
                
                    
                
                
                
                    
                    
                
            
        
    
 
{{< /example >}}


##### Crypto wallet

Use this web3 modal component to show crypto wallet connection options like MetaMask or WalletConnect when building a website based on NFT authentication and collectibles.

{{< example id="modal-crypto-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="700" >}}




    
        
        
            
            
                
                    Connect wallet
                
                
            
            
            
                Connect with one of our available wallet providers or create a new one.
                
                    
                        
                            
                            MetaMask
                            Popular
                        
                    
                    
                        
                            
                            Coinbase Wallet
                        
                    
                    
                        
                            
                            Opera Wallet
                        
                    
                    
                        
                            
                            WalletConnect
                        
                    
                    
                        
                            
                            Fortmatic
                        
                    
                
                
                    
                        
                        Why do I need to connect with my wallet?
                
            
        
    

{{< /example >}}

##### Sizes

You can use four different modal sizing options starting from small to extra large, but keep in mind that the width of these modals will remain the same when browsing on smaller devices.

{{< example id="modal-sizes-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="900" >}}


    
    
    
    
    




    
        
        
            
            
                
                    Small modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    




    
        
        
            
            
                
                    Default modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    




    
        
        
            
            
                
                    Large modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    




    
        
        
            
            
                
                    Extra Large modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    

{{< /example >}}

##### Placement

Use the `data-modal-placement` data attribute on the modal element to set the position relative to the document body based on the available values from `{top|center|bottom}-{left|center|right}` (eg. `top-left` or `bottom-right`).

The default position is the center of the page.

{{< example id="modal-placement-example" github="components/modal.md" class="flex justify-center" show_dark=true iframeHeight="800">}}


    
    
    
    
    




    
        
        
            
            
                
                    Top left modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    




    
        
        
            
            
                
                    Top right modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    




    
        
        
            
            
                
                    Bottom left modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    




    
        
        
            
            
                
                    Bottom right modal
                
                
            
            
            
                
                    With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
                
            
            
            
                
                
            
        
    

{{< /example >}}

##### More examples

You can check out more modal component examples from the following resources from Flowbite Blocks:

-   [CRUD read modals](https://flowbite.com/blocks/application/crud-read-modals/)
-   [CRUD create modals](https://flowbite.com/blocks/application/crud-create-modals/)
-   [CRUD update modals](https://flowbite.com/blocks/application/crud-update-modals/)
-   [Faceted search modals](https://flowbite.com/blocks/application/faceted-search-modals/)

##### JavaScript behaviour

The **Modal** class from Flowbite can be used to create an object that will launch an interactive modal based on the object parameters, options, and methods that you choose to apply.

###### Object parameters

Initialize a Modal object with parameters such as the modal element and the optional options object.


    
        
            
                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            
        
        
            
                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Set the main modal element as a JavaScript object.
                
            
            
                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the default state of the modal, placement, and animations.
                
            
            
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
        
    


###### Options

Use the following options as the second parameter for the Modal object to set the position of the modal, custom classes for the backdrop element and the callback functions.


    
        
            
                
                    Option
                
                
                    Type
                
                
                    Description
                
            
        
        
            
                
                    placement
                
                
                    String
                
                
                    Set the position of the modal element relative to the document body by choosing one of the values from {top|center|right}-{left|center|right}. (eg. top-left or bottom-right)
                
            
            
                
                    backdrop
                
                
                    String
                
                
                    Choose between static or dynamic to prevent closing the modal when clicking outside.
                
            
            
                
                    backdropClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS classes for the backdrop element (eg. 'bg-blue-500 dark:bg-blue-400'.
                
            
            
                
                    closable
                
                
                    Boolean
                
                
                    Set to false to disable closing the modal on hitting ESC or clicking on the backdrop.
                
            
            
                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the modal has been hidden.
                
            
            
                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the modal has been shown.
                
            
            
                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the modal visibility has been toggled.
                
            
        
    


###### Methods

Use the methods from the Modal object to show, hide, and toggle the visibility directly from JavaScript.


    
        
            
                
                    Method
                
                
                    Description
                
            
        
        
            
                
                    toggle()
                
                
                    Use the toggle function on the Modal object to toggle the modal element's visibility.
                
            
            
                
                    show()
                
                
                    Use the show function on the Modal object to show the modal element.
                
            
            
                
                    hide()
                
                
                    Use the hide function on the Modal object to hide the modal element.
                
            
            
                
                    isHidden()
                
                
                    Use this function to check if the modal is hidden.
                
            
            
                
                    isVisible()
                
                
                    Use this function to check if the modal is visible.
                
            
            
                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function when the modal has been shown.
                
            
            
                
                    updateOnHide(callback)
                
                
                    Use this method to set a custom callback function when the modal has been closed.
                
            
            
                
                    updateOnToggle(callback)
                
                
                    Use this method to set a custom callback function when the modal visibility has been toggled.
                
            
        
    


###### Example

Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Modal object.

First of all, create a new JavaScript element object for the first parameter of the Modal object and another options object to set the placement, backdrop styles, and callback functions.

```javascript
// set the modal menu element
const $targetEl = document.getElementById('modalEl');

// options with default values
const options = {
    placement: 'bottom-right',
    backdrop: 'dynamic',
    backdropClasses:
        'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    closable: true,
    onHide: () => {
        console.log('modal is hidden');
    },
    onShow: () => {
        console.log('modal is shown');
    },
    onToggle: () => {
        console.log('modal has been toggled');
    },
};

// instance options object
const instanceOptions = {
  id: 'modalEl',
  override: true
};
```

Create a new Modal object based on the options above.

```javascript
import { Modal } from 'flowbite';

/*
 * $targetEl: required
 * options: optional
 */
const modal = new Modal($targetEl, options, instanceOptions);
```

Use the `show` and `hide` methods to show and hide the modal component directly from JavaScript.

```javascript
// show the modal
modal.show();

// hide the modal
modal.hide();
```

Use the `toggle` method to toggle the visibility of the modal.

```javascript
// toggle the modal
modal.toggle();
```

Use the `isHidden` or `isVisible` method to check if the modal is visible or not.

```javascript
// true if hidden
modal.isHidden();

// true if visible
modal.isVisible();
```

###### HTML Markup

Use the following HTML code for the JavaScript example above.

```html

    
        
        
            
            
                
                    Terms of Service
                
                
            
            
            
                
                    With less than a month to go before the European Union
                    enacts new consumer privacy laws for its citizens, companies
                    around the world are updating their terms of service
                    agreements to comply.
                
                
                    The European Union’s General Data Protection Regulation
                    (G.D.P.R.) goes into effect on May 25 and is meant to ensure
                    a common set of data rights in the European Union. It
                    requires organizations to notify users as soon as possible
                    of high-risk data breaches that could personally affect
                    them.
                
            
            
            
                
                
            
        
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Modal class, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Modal } from 'flowbite';
import type { ModalOptions, ModalInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

const $modalElement: HTMLElement = document.querySelector('#modalEl');

const modalOptions: ModalOptions = {
    placement: 'bottom-right',
    backdrop: 'dynamic',
    backdropClasses:
        'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',
    closable: true,
    onHide: () => {
        console.log('modal is hidden');
    },
    onShow: () => {
        console.log('modal is shown');
    },
    onToggle: () => {
        console.log('modal has been toggled');
    },
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'modalEl',
  override: true
};

const modal: ModalInterface = new Modal($modalElement, modalOptions, instanceOptions);

modal.show();
```

#### Navbar

Get started with the responsive navbar component from Flowbite to quickly set up a navigation menu for your website and set up the logo, list of pages, CTA button, search input, user profile options with a dropdown, and more.

##### Default navbar

Use this example of a navigation bar built with the utility classes from Tailwind CSS to enable users to navigate across the pages of your website.

{{< example id="default-navbar-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="300" >}}


  
    
        
        Flowbite
    
    
    
      
        
          Home
        
        
          About
        
        
          Services
        
        
          Pricing
        
        
          Contact
        
      
    
  

{{< /example >}}

##### Navbar with dropdown

This example can be used to show a secondary dropdown menu when clicking on one of the navigation links.

{{< example id="navbar-dropdown-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="320" >}}


  
    
        
        Flowbite
    
    
    
      
        
          Home
        
        
            
            
            
                
                  
                    Dashboard
                  
                  
                    Settings
                  
                  
                    Earnings
                  
                
                
                  Sign out
                
            
        
        
          Services
        
        
          Pricing
        
        
          Contact
        
      
    
  

{{< /example >}}

##### Multi-level dropdown

Use this example to show multiple layers of dropdown menu by stacking them inside of each other.

{{< example id="navbar-multi-dropdown-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="320" >}}


  
    
        
        Flowbite
    
    
    
      
        
          Home
        
        
            
            
            
                
                  
                    Dashboard
                  
                  
                    
                    
                        
                          
                            Overview
                          
                          
                            My downloads
                          
                          
                            Billing
                          
                          
                            Rewards
                          
                        
                    
                  
                  
                    Earnings
                  
                
                
                  Sign out
                
            
        
        
          Services
        
        
          Pricing
        
        
          Contact
        
      
    
  

{{< /example >}}

##### Sticky navbar

Use this example to keep the navbar positioned fixed to the top side as you scroll down the document page.

{{< example id="navbar-sticky-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}


  
  
      
      Flowbite
  
  
      
      
  
  
    
      
        Home
      
      
        About
      
      
        Services
      
      
        Contact
      
    
  
  

{{< /example >}}

##### Navbar with submenu

Use this example to show another subnav below the main navbar element.

{{< example id="navbar-submenu-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true >}}


    
        
            
            Flowbite
        
        
            (555) 412-1234
            Login
        
    


    
        
            
                
                    Home
                
                
                    Company
                
                
                    Team
                
                
                    Features
                
            
        
    

{{< /example >}}

##### Navbar with search

Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.

{{< example id="navbar-search-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="300" >}}


  
  
      
      Flowbite
  
  
    
    
      
        
        Search icon
      
      
    
    
  
    
      
        
          
        
        
      
      
        
          Home
        
        
          About
        
        
          Services
        
      
    
  

{{< /example >}}

##### Navbar with CTA button

Use the following navbar element to show a call to action button alongside the logo and page links.

{{< example id="navbar-cta-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="300" >}}


  
  
      
      Flowbite
  
  
      
      
  
  
    
      
        Home
      
      
        About
      
      
        Services
      
      
        Contact
      
    
  
  

{{< /example >}}

##### Language dropdown

Get started with this example to show a language dropdown selector in the navbar component.

{{< example id="navbar-language-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="320" >}}


  
  
      
      Flowbite
  
  
      
      
      
        
          
            
              
                              
                English (US)
              
            
          
          
            
              
                
                Deutsch
              
            
          
          
            
              
                              
                Italiano
              
            
          
          
            
              
                
                中文 (繁體)
              
            
          
        
      
      
  
  
    
      
        Home
      
      
        About
      
      
        Services
      
      
        Pricing
      
      
        Contact
      
    
  
  

{{< /example >}}

##### User menu dropdown

Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.

{{< example id="navbar-user-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="380" >}}


  
  
      
      Flowbite
  
  
      
      
      
        
          Bonnie Green
          name@flowbite.com
        
        
          
            Dashboard
          
          
            Settings
          
          
            Earnings
          
          
            Sign out
          
        
      
      
  
  
    
      
        Home
      
      
        About
      
      
        Services
      
      
        Pricing
      
      
        Contact
      
    
  
  

{{< /example >}}

##### Mega menu navbar

You can also use the dropdown element inside a navigation bar and add a second level of navigation hierarchy, but make sure to use a `button` element.

{{< example id="navbar-mega-menu" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="340" >}}


    
        
            
            Flowbite
        
        
        
            
                
                    Home
                
                
                    
                
                
                    Marketplace
                
                
                    Resources
                
                
                    Contact
                
            
        
    
    
        
            
                
                    
                        Online Stores
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Segmentation
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Marketing CRM
                        Connect with third-party tools that you're already using.
                    
                
            
            
                
                    
                        Online Stores
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Segmentation
                        Connect with third-party tools that you're already using.
                    
                
                
                    
                        Marketing CRM
                        Connect with third-party tools that you're already using.
                    
                
            
        
    

{{< /example >}}

##### Solid background

Use this example to show a solid background for the navbar component instead of being transparent.

{{< example id="navbar-solid-bg-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="320" >}}


  
    
        
        Flowbite
    
    
    
      
        
          Home
        
        
          Services
        
        
          Pricing
        
        
          Contact
        
      
    
  

{{< /example >}}

##### Hamburger menu

All of the navbar components from this page have a responsive hamburger menu included which by default appears when the screen goes below 768px in width based on the `md` utility class from Tailwind CSS.

Here's an example where you can show the hamburger icon and the menu on all screen sizes.

{{< example id="navbar-hamburger-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="320" >}}


  
    
        
        Flowbite
    
    
    
      
        
          Home
        
        
          Services
        
        
          Pricing
        
        
          Contact
        
      
    
  

{{< /example >}}

##### More examples

You can check out more navbar component examples from the following resources from Flowbite Blocks:

-   [Headers for marketing](https://flowbite.com/blocks/marketing/header/)
-   [Navbars for dashboard](https://flowbite.com/blocks/application/navbar/)
-   [Application shell layouts](https://flowbite.com/blocks/application/shells/)

##### JavaScript behaviour

Use the **Collapse** class to create an object with a trigger and target element, where the target element will be collapsed or expanded based on the events dispatched on the trigger element. This can be used to toggle another element such as a dropdown menu or a hamburger navbar.

###### Object parameters

Use the object parameters from the Collapse object to set the trigger element, target element, and the options including callback functions.


  
      
          
              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          
      
      
          
              
                  targetEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the target element object that will be expanded or collapsed.
              
          
          
              
                  triggerEl
              
              
                  Element
              
              
                  Optional
              
              
                  Pass the trigger element that will expand or collapse the target element based on click event. 
              
          
          
              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Set these options to override the default transition, duration, and timing function of the collapse animation.
              
          
          
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
      
  


###### Options

Use these optional options for the Collapse object to set the transition, duration, and timing function types based on the utility classes from Tailwind CSS.


  
      
          
              
                  Option
              
              
                  Type
              
              
                  Description
              
          
      
      
          
              
                  onCollapse
              
              
                  Function
              
              
                  Set a callback function when the item has been collapsed.
              
          
          
              
                  onExpand
              
              
                  Function
              
              
                  Set a callback function when the item has been expanded.
              
          
          
              
                  onToggle
              
              
                  Function
              
              
                  Set a callback function when the item has either been expanded or collapsed.
              
          
      
  


###### Methods

Use the following methods on the Dismiss object to programmatically manipulate the behaviour.


  
      
          
              
                  Method
              
              
                  Description
              
          
      
      
          
              
                  collapse()
              
              
                  Use this method on the Collapse object to hide the target element.
              
          
          
              
                  expand()
              
              
                  Use this method on the Collapse object to show the target element.
              
          
          
              
                  toggle()
              
              
                  Use this method on the Collapse object toggle the current visibility of the target element.
              
          
          
              
                  updateOnCollapse(callback)
              
              
                  Use this method to set a callback function when the item has been collapsed.
              
          
          
              
                  updateOnExpand(callback)
              
              
                  Use this method to set a callback function when the item has been expanded.
              
          
          
              
                  updateOnToggle(callback)
              
              
                  Use this method to set a callback function when the item has been toggled.
              
          
      
  


###### Example

Check out the following example to learn how to initialize and use the methods of the **Collapse** object to manually expand and collapse elements on the page.

First of all, you need to set the object parameters where the target element is required and the other two are optional.

```javascript
// set the target element that will be collapsed or expanded (eg. navbar menu)
const $targetEl = document.getElementById('targetEl');

// optionally set a trigger element (eg. a button, hamburger icon)
const $triggerEl = document.getElementById('triggerEl');

// optional options with default values and callback functions
const options = {
    onCollapse: () => {
        console.log('element has been collapsed');
    },
    onExpand: () => {
        console.log('element has been expanded');
    },
    onToggle: () => {
        console.log('element has been toggled');
    },
};

const instanceOptions = {
  id: 'targetEl',
  override: true
};

```

Next step is to create a new instance of a Collapse object using the parameters we have set above.

```javascript
import { Collapse } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: optional
 * options: optional
 */
const collapse = new Collapse($targetEl, $triggerEl, options, instanceOptions);
```

Now you can programmatically expand or collapse the target element using the methods of the Collapse object.

```javascript
// show the target element
collapse.expand();

// hide the target element
collapse.collapse();

// toggle the visibility of the target element
collapse.toggle();
```

###### HTML Markup

Here is an example of the HTML markup that you can use for the JavaScript example above. Please note that you should use the `hidden` class from Tailwind CSS to hide the target element by default.

```html




    
        
            Profile
        
        
            Settings
        
        
            Messages
        
        Download
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Collapse object, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Collapse } from 'flowbite';
import type { CollapseOptions, CollapseInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the target element that will be collapsed or expanded (eg. navbar menu)
const $targetEl: HTMLElement = document.getElementById('targetEl');

// optionally set a trigger element (eg. a button, hamburger icon)
const $triggerEl: HTMLElement = document.getElementById('triggerEl');

// optional options with default values and callback functions
const options: CollapseOptions = {
    onCollapse: () => {
        console.log('element has been collapsed');
    },
    onExpand: () => {
        console.log('element has been expanded');
    },
    onToggle: () => {
        console.log('element has been toggled');
    },
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'targetEl',
  override: true
};

/*
 * $targetEl: required
 * $triggerEl: optional
 * options: optional
 * instanceOptions: optional
 */
const collapse: CollapseInterface = new Collapse(
    $targetEl,
    $triggerEl,
    options,
    instanceOptions
);

// show the target element
collapse.expand();
```

#### Pagination

The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.

##### Default pagination

Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.

{{< example id="default-pagination-example" class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}


  
    
      Previous
    
    
      1
    
    
      2
    
    
      3
    
    
      4
    
    
      5
    
    
      Next
    
  


  
    
      Previous
    
    
      1
    
    
      2
    
    
      3
    
    
      4
    
    
      5
    
    
      Next
    
  

{{< /example >}}

##### Pagination with icons

The following pagination component example shows how you can use [SVG icons](https://flowbite.com/icons/) instead of text to show the previous and next pages.

{{< example id="pagination-icons-example" class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}


  
    
      
        Previous
        
      
    
    
      1
    
    
      2
    
    
      3
    
    
      4
    
    
      5
    
    
      
        Next
        
      
    
  


  
    
      
        Previous
        
      
    
    
      1
    
    
      2
    
    
      3
    
    
      4
    
    
      5
    
    
      
        Next
        
      
    
  

{{< /example >}}

##### Previous and next

Use the following markup to show simple previous and next elements.

{{< example id="pagination-prev-next-example" class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}


  
  
    Previous
  

  
  
    Next
  



  
  
    Previous
  

  
  
    Next
  

{{< /example >}}

##### Previous and next with icons

Use the following code to show simple previous and next elements with icons.

{{< example id="pagination-prev-next-icons-example" class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}


  
  
    
    Previous
  
  
    Next
    
  


  
  
    
    Previous
  
  
    Next
    
  

{{< /example >}}

##### Table data pagination

You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.

{{< example id="pagination-table-example" class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}


  
  
      Showing 1 to 10 of 100 Entries
  
  
  
      
      
  


  
  
      Showing 1 to 10 of 100 Entries
  
  
  
      
      
  

{{< /example >}}

##### Table data pagination with icons

You can use the following code to show the number of data shown inside a table element and also the previous and next action buttons coupled with icons.

{{< example id="pagination-table-icons-example" class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}


  
  
      Showing 1 to 10 of 100 Entries
  
  
    
    
    
  


  
  
      Showing 1 to 10 of 100 Entries
  
  
    
    
    
  

{{< /example >}}

#### Popover

Get started with the popover component to show any type of content inside a pop-up box when hovering or clicking over a trigger element. There are multiple examples that you can choose from, such as showing more information about a user profile, company profile, password strength, and more.

Make sure that you have the Flowbite JavaScript included in your project to enable the popover interactivity by following the }}">quickstart guide.

##### Default popover

Initialize a new popover by adding the `data-popover-target="{elementId}"` data attribute to the trigger element where `elementId` is the id of the popover component.

{{< example id="default-popover-example" class="flex justify-center pt-24" github="components/popover.md" show_dark=true >}}



    
        Popover title
    
    
        And here's some amazing content. It's very engaging. Right?
    
    

{{< /example >}}

##### User profile

Use this example to show more information about a user profile when hovering over the trigger component.

{{< example id="popover-user-profile-example" class="flex justify-center pt-52" github="components/popover.md" show_dark=true >}}



    
        
            
                
            
            
                
            
        
        
            Jese Leos
        
        
            @jeseleos
        
        Open-source contributor. Building flowbite.com.
        
            
                
                    799
                    Following
                
            
            
                
                    3,758
                    Followers
                
            
        
    
    

{{< /example >}}

##### Company profile

This example can be used to show more information about a company profile.

{{< example id="popover-company-profile-example" class="flex justify-center pt-80" github="components/popover.md" disable_init_js=true show_dark=true >}}



    
        
            
                
                
            
            
            
                
                    Flowbite
                
                
                    Tech company
                
                Open-source library of Tailwind CSS components and Figma design system.
                
                    
                        
                            
                        
                        https://flowbite.com/
                    
                    
                        
                            
                        
                        4,567,346 people like this including 5 of your friends
                    
                
                
                    
                    
                    
                    +3
                
                
                    
                    
                
                
                    
                    
                        Report this page
                    
                    
                        Add to favorites
                    
                    
                        Block this page
                    
                    
                        Invite users
                    
                    
                
            
        
    
    

{{< /example >}}

##### Image popover

Use this example to trigger a popover component with detailed information and an image when hovering over a portion of highlighted text inspired by Wikipedia and other large news outlets.

{{< example id="popover-image-example" class="flex justify-center pt-64" github="components/popover.md" show_dark=true >}}

Due to its central geographic location in Southern Europe, Italy has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy

    
        
            
                About Italy
                Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also considered part of Western Europe. A unitary parliamentary republic with Rome as its capital and largest city.
                Read more 
            
        
        
    
    

{{< /example >}}

##### Description popover

Show helpful information inside a popover when hovering over a question mark button.

{{< example id="popover-description-example" class="pb-96" github="components/popover.md" show_dark=true >}}

This is just some informational text 

    
        Activity growth - Incremental
        Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.
        Calculation
        For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.
        Read more 
    
    

{{< /example >}}

##### Progress popover

Show a progress bar with details inside a popover when hovering over a settings button.

{{< example id="popover-description-example" class="flex justify-center pt-36" github="components/popover.md" show_dark=true >}}



    
        Available storage
        This server has 30 of 150 GB of block storage remaining.
        
            
        
        Upgrade now 
    
    

{{< /example >}}

##### Password strength

Dynamically show the password strength progress when creating a new password positioned relative to the input element.

{{< example id="popover-password-example" class="pb-16" github="components/popover.md" show_dark=true >}}


  
    Your email
    
  
  
    Your password
    
    
        
            Must have at least 6 characters
            
                
                
                
                
            
            It’s better to have:
            
                
                    
                    Upper & lower case letters
                
                
                    
                    A symbol (#$&)
                
                
                    
                    A longer password (min. 12 chars.)
                
            
    
    

  
  
    
      
    
    Remember me
  
  

{{< /example >}}

##### Placement

Set the position of the popover component relative to the trigger element by using the `data-popover-placement="{top|right|bottom|left}"` data attribute and its values.

{{< example id="popover-placement-example" class="flex flex-wrap justify-center py-24 space-x-4" github="components/popover.md" show_dark=true >}}



    
        Popover top
    
    
        And here's some amazing content. It's very engaging. Right?
    
    



    
        Popover right
    
    
        And here's some amazing content. It's very engaging. Right?
    
    



    
        Popover bottom
    
    
        And here's some amazing content. It's very engaging. Right?
    
    



    
        Popover left
    
    
        And here's some amazing content. It's very engaging. Right?
    
    

{{< /example >}}

##### Triggering

Manually set the trigger event by adding the `data-popover-trigger="{hover|click}"` data attribute to the trigger element choosing between a hover or click event. By default it is set to `hover`.

{{< example id="popover-triggering-example" class="flex justify-center pt-24" github="components/popover.md" show_dark=true >}}



    
        Popover hover
    
    
        And here's some amazing content. It's very engaging. Right?
    
    





    
        Popover click
    
    
        And here's some amazing content. It's very engaging. Right?
    
    

{{< /example >}}

##### Offset

Increase or decrease the default offset by adding the `data-popover-offset="{offset}"` data attribute where the value is an integer.

{{< example id="popover-offset-example" class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}



    
        Popover offset
    
    
        And here's some amazing content. It's very engaging. Right?
    
    

{{< /example >}}

##### Animation

Customize the animation of the popover component by using the utility classes from Tailwind CSS such as `transition-opacity` and `duration-{x}`.

{{< example id="popover-animation-example" class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}



    
        Popover animation
    
    
        And here's some amazing content. It's very engaging. Right?
    
    

{{< /example >}}

##### Disable arrow

You can also disable the popover arrow by not including the `data-popper-arrow` element.

{{< example id="popover-disable-arrow-example" class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}



    
        Popover no arrow
    
    
        And here's some amazing content. It's very engaging. Right?
    

{{< /example >}}

##### JavaScript behaviour

The Popover API from Flowbite can be used to create an object that will show a pop-up box relative to the main trigger element based on the parameters, options, and methods that you provide.

###### Object parameters

Create a new Popover object with the object parameters like the trigger element, the popover content element, and extra options to set the placement and offset.


    
        
            
                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            
        
        
            
                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Set the popover component as the target element.
                
            
            
                
                    triggerEl
                
                
                    Element
                
                
                    Required
                
                
                    Set an element to trigger the popover when clicking or hovering (ie. a button, text).
                
            
            
                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the positioning of the popover element, trigger type, offset, and more.
                
            
            
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
        
    


###### Options

Use the following options as the third parameter for the Popover object to set the positioning, offset, and the trigger type (hover or click).


    
        
            
                
                    Option
                
                
                    Type
                
                
                    Description
                
            
        
        
            
                
                    placement
                
                
                    String
                
                
                    Set the position of the popover element relative to the trigger element choosing from top|right|bottom|left.
                
            
            
                
                    triggerType
                
                
                    String
                
                
                    Set the event type that will trigger the popover content choosing between hover|click|none.
                
            
            
                
                    offset
                
                
                    Integer
                
                
                    Set the offset distance between the popover and the trigger element.
                
            
            
                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the popover is hidden.
                
            
            
                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the popover is shown.
                
            
            
                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the popover visibility has been toggled.
                
            
        
    


###### Methods

Use the methods from the Popover object to programmatically show or hide the popover from directly JavaScript.


    
        
            
                
                    Method
                
                
                    Description
                
            
        
        
            
                
                    show()
                
                
                    Use this method on the Popover object to show the popover content.
                
            
            
                
                    hide()
                
                
                    Use this method on the Popover object to hide the popover content.
                
            
            
                
                    toggle()
                
                
                    Use this method on the Popover object to toggle the visibility of the popover content.
                
            
            
                
                    isVisible()
                
                
                    Use this function to check if the popover is visible or not.
                
            
            
                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function when the popover has been shown.
                
            
            
                
                    updateOnHide(callback)
                
                
                    Use this method to set a custom callback function when the popover has been hidden.
                
            
            
                
                    updateOnToggle(callback)
                
                
                    Use this method to set a custom callback function when the popover has been toggled.
                
            
        
    


###### Example

Use following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Popover object.

First of all, set the target element as the popover itself and the trigger element which can be a button or text element.

After that you can also set the options object to change the placement and trigger type of the popover, alongside with the callback functions.

```javascript
// set the popover content element
const $targetEl = document.getElementById('popoverContent');

// set the element that trigger the popover using hover or click
const $triggerEl = document.getElementById('popoverButton');

// options with default values
const options = {
    placement: 'bottom',
    triggerType: 'hover',
    offset: 10,
    onHide: () => {
        console.log('popover is shown');
    },
    onShow: () => {
        console.log('popover is hidden');
    },
    onToggle: () => {
        console.log('popover is toggled');
    },
};

// instance options object
const instanceOptions = {
  id: 'popoverContent',
  override: true
};
```

Create a new Popover object based on the options above.

```javascript
import { Popover } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 */
const popover = new Popover($targetEl, $triggerEl, options, instanceOptions);
```

Use the `show` and `hide` methods on the Popover object to programmatically show and hide the popover element using JavaScript.

```javascript
// show the popover
popover.show();

// hide the popover
popover.hide();

// toggle the popover
popover.toggle();

// check if popover is visible
popover.isVisible();

// destroy popover object (removes event listeners and off-canvas Popper.js)
tooltip.destroy();

// re-initialize popover object
tooltip.init();
```

###### HTML Markup

Use the following HTML code for the JavaScript example above.

```html


    
        
            Popover title
        
    
    
        And here's some amazing content. It's very engaging. Right?
    
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Popover class, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Popover } from 'flowbite';
import type { PopoverOptions, PopoverInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the popover content element
const $targetEl: HTMLElement = document.getElementById('popoverContent');

// set the element that trigger the popover using hover or click
const $triggerEl: HTMLElement = document.getElementById('popoverButton');

// options with default values
const options: PopoverOptions = {
    placement: 'top',
    triggerType: 'hover',
    offset: 10,
    onHide: () => {
        console.log('popover is shown');
    },
    onShow: () => {
        console.log('popover is hidden');
    },
    onToggle: () => {
        console.log('popover is toggled');
    },
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'popoverContent',
  override: true
};

if ($targetEl) {
    /*
     * targetEl: required
     * triggerEl: required
     * options: optional
     * instanceOptions: optional
     */
    const popover: PopoverInterface = new Popover(
        $targetEl,
        $triggerEl,
        options,
        instanceOptions
    );

    popover.show();
}
```

#### Progress bar

The progress bar component can be used as an indicator to show the completion rate of data sets or it can be used as an animated loader component. There are multiple sizes, colors, and styles available.

##### Default progress bar

Use the following example of a progress bar element to show a completion rate of 45% by using an inline style and the utility classes from Tailwind CSS.

{{< example id="default-progress-example" github="components/progress.md" show_dark=true >}}

  

{{< /example >}}

##### Sizes

You can also use different sizes by using various sizing utility classes from Flowbite and Tailwind CSS.

{{< example id="progress-sizes-example" github="components/progress.md" show_dark=true >}}
Small

  

Default

  

Large

  

Extra Large

  

{{< /example >}}

##### With label inside

Here is an example of using a progress bar with the label inside the bar.

{{< example id="progress-label-example" github="components/progress.md" show_dark=true >}}
  
     45%
  
{{< /example >}}

##### With label outside

And this is an example of using a progress bar outside the bar.

{{< example id="progress-label-outside-example" github="components/progress.md" show_dark=true >}}

  Flowbite
  45%


  

{{< /example >}}

##### Colors

You can also apply any color using the `bg-{color}` utility classes from Tailwind CSS and Flowbite.

{{< example id="progress-colors-example" github="components/progress.md" show_dark=true >}}
Dark

  

Blue

  

Red

  

Green

  

Yellow

  

Indigo

  

Purple

  

{{< /example >}}

#### Rating

Get started with the rating component to show an aggregate of reviews and scores in the forms of stars or numbers using the utility classes from Tailwind CSS and components from Flowbite.

You can find multiple examples on this page including different styles, sizes, and variants of the rating component and other associated elements such as a comment or card.

##### Default rating

Use this simple example of a star rating component for showing review results.

{{< example id="default-rating-example" class="flex justify-center" github="components/rating.md" show_dark=true >}}


    
    
    
    
    

{{< /example >}}

##### Rating with text

If you also want to show a text near the stars you can use this example as a reference.

{{< example id="rating-text-example" class="flex justify-center" github="components/rating.md" show_dark=true >}}


    
    
    
    
    
    4.95
    out of
    5

{{< /example >}}

##### Rating count

Aggregate more results by using this example to show the amount of reviews and the average score.

{{< example id="rating-count-example" class="flex justify-center" github="components/rating.md" show_dark=true >}}


    
    4.95
    
    73 reviews

{{< /example >}}

##### Star sizes

Check out the different sizing options for the star review component from small, medium, and large.

{{< example id="rating-star-sizes-example" class="flex flex-col items-center" github="components/rating.md" show_dark=true >}}


    
    
    
    
    


    
    
    
    
    


    
    
    
    
    

{{< /example >}}

##### Advanced rating

This advanced rating component can be used to also show how many reviews have been posted for each star rating (eg. 4% for the 2 star ratings, 17% for 4 star rating etc).

{{< example id="rating-advanced-example" github="components/rating.md" show_dark=true >}}


    
    
    
    
    
    4.95
    out of
    5

1,745 global ratings

    5 star
    
        
    
    70%


    4 star
    
        
    
    17%


    3 star
    
        
    
    8%


    2 star
    
        
    
    4%


    1 star
    
        
    
    1%
   
{{< /example >}}

##### Score rating

This component can be used to break up a general rating score into multiple categories using progress bars.

{{< example id="rating-score-example" github="components/rating.md" show_dark=true >}}


    8.7
    Excellent
    
    376 reviews
    Read all reviews


    
        
            Staff
            
                
                    
                
                8.8
            
        
        
            Comfort
            
                
                    
                
                8.9
            
        
        
            Free WiFi
            
                
                    
                
                8.8
            
        
        
            Facilities
            
                
                    
                
                5.4
            
        
    
    
        
            Value for money
            
                
                    
                
                8.9
            
        
        
            Cleanliness
            
                
                    
                
                7.0
            
        
        
            Location
            
                
                    
                
                8.9
            
        
    

{{< /example >}}

##### Rating comment

Use this component to show a single rating comment and its score alongside other components such as the user profile avatar, name, post date, and more.

{{< example id="rating-comment-example" github="components/rating.md" show_dark=true >}}


    
        
        
            Jese Leos Joined on August 2014
        
    
    
        
        
        
        
        
        Thinking to buy another one!
    
    Reviewed in the United Kingdom on March 3, 2017
    This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived yesterday and the first thing I did was set the time, popped on an identical strap from another Invicta and went in the shower with it to test the waterproofing.... No problems.
    It is obviously not the same build quality as those very expensive watches. But that is like comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
    Read more
    
        19 people found this helpful
        
            Helpful
            Report abuse
        
    

{{< /example >}}

##### Review content

Use this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.

{{< example id="rating-review-example" github="components/rating.md" show_dark=true >}}


    
        
            
            
                Jese Leos
                
                    
                    United States
                
            
        
        
            Apartament with city view
            3 nights December 2021
            Family
        
    
    
        
            
                
                    Reviewed: January 20, 2022
                
                Spotless, good appliances, excellent layout, host was genuinely nice and helpful.
            
            8.7
        
        The flat was spotless, very comfortable, and the host was amazing. I highly recommend this accommodation for anyone visiting New York city centre. It's quite a while since we are no longer using hotel facilities but self contained places. And the main reason is poor cleanliness and staff not being trained properly. This place exceeded our expectation and will return for sure.
        It is obviously not the same build quality as those very expensive watches. But that is like comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
        
            
                
                Helpful
            
            
                
                Not helpful
            
        
    

{{< /example >}}

#### Sidebar

The sidebar component can be used as a complementary element relative to the navbar shown on either the left or right side of the page used for the navigation on your web application, including menu items, multi-level menu items, call to actions elements, and more.

##### Default sidebar

Use this example to show a responsive list of menu items inside the sidebar with icons and labels.

{{< example id="default-sidebar-example" github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}



   
      
         
            
               
               Dashboard
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   



   
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
   

{{< /example >}}


  {{< requires_js >}}


##### Multi-level menu

Use this sidebar example to create multi-level menu items by applying the `data-collapse-toggle="id"` data attribute from Flowbite and toggle the second-level menu item.

{{< example id="sidebar-multi-level-example" github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}



   
      
         
            
               
               Dashboard
            
         
         
            
            
                  
                     Products
                  
                  
                     Billing
                  
                  
                     Invoice
                  
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   



   
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
   

{{< /example >}}

##### Content separator

Separate the content inside the sidebar component by applying a border separator between the two menus.

{{< example id="sidebar-separator-example" github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}



   
      
         
            
               
               Dashboard
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
      
         
            
               
               Upgrade to Pro
            
         
         
            
               
               Documentation
            
         
         
            
               
               Components
            
         
         
            
               
               Help
            
         
      
   



   
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
   

{{< /example >}}

##### CTA button

Use this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.

{{< example id="sidebar-cta-button-example" github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}



   
      
         
            
               
               Dashboard
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
      
         
            Beta
            
         
         
            Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.
         
         Turn new navigation off
      
   



   
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
   

{{< /example >}}

##### Logo branding

Show the logo of your brand and link back to the homepage from the top part of the sidebar.

{{< example id="sidebar-logo-example" github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}



   
      
         
         Flowbite
      
      
         
            
               
               Dashboard
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   



   
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
   

{{< /example >}}

##### Sidebar with navbar

Use this example to show a navbar together with a sidebar layout for your web application.

{{< example id="sidebar-logo-example" github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}


  
    
      
        
        
          
          Flowbite
        
      
      
          
            
              
            
            
              
                
                  Neil Sims
                
                
                  neil.sims@flowbite.com
                
              
              
                
                  Dashboard
                
                
                  Settings
                
                
                  Earnings
                
                
                  Sign out
                
              
            
          
        
    
  



   
      
         
            
               
               Dashboard
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   



   
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
      
         
            
         
      
      
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
         
            
               
            
         
      
   

{{< /example >}}

##### Off-canvas sidebar

Use this example to show the navigation as an off-canvas drawer component when clicking on an element.

{{< example id="drawer-navigation-example" github="components/sidebar.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}



   




    Menu
    
  
      
         
            
               
               Dashboard
            
         
         
            
               
               Kanban
               Pro
            
         
         
            
               
               Inbox
               3
            
         
         
            
               
               Users
            
         
         
            
               
               Products
            
         
         
            
               
               Sign In
            
         
         
            
               
               Sign Up
            
         
      
   

{{< /example >}}

##### More examples

You can check out more [sidenav component](https://flowbite.com/blocks/application/sidenav/) examples and [application shell layouts](https://flowbite.com/blocks/application/shells/) from Flowbite Blocks.

##### Dashboard Layout

These sidebar examples can be viewed in action and used by checking out the [Flowbite Admin Dashboard](https://github.com/themesberg/flowbite-admin-dashboard) template and use it as a solid starting point for you web application.

#### Skeleton

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.

You can set the width and height of these skeleton components based on the size of the content and element that it is being loaded in, such as a card or an article page.

You can also animate the skeleton component by using the `.animate-pulse` utility class from Tailwind CSS.

##### Default skeleton

Use this example to show a placeholder when loading text content.

{{< example id="default-skeleton-example" github="components/skeleton.md" show_dark=true >}}

    
    
    
    
    
    
    Loading...


{{< /example >}}

##### Image placeholder

This example can be used to show a placeholder when loading an image and text content.

{{< example id="skeleton-image-example" github="components/skeleton.md" show_dark=true >}}

    
        
    
    
        
        
        
        
        
        
    
    Loading...


{{< /example >}}

##### Video placeholder

Use this example to show a skeleton placeholder when loading video content.

{{< example id="skeleton-video-example" github="components/skeleton.md" show_dark=true >}}


    
    Loading...

{{< /example >}}

##### Text placeholder

Use this example to show a placeholder when loading longer pagraphs and headings.

{{< example id="skeleton-text-example" github="components/skeleton.md" show_dark=true >}}

    
        
        
        
    
    
        
                
        
    
    
        
        
        
    
    
        
                
        
    
    
        
        
        
    
    
        
        
        
    
    Loading...

{{< /example >}}

##### Card placeholder

Use this example to show a placeholder when loading content inside a card.

{{< example id="skeleton-card-example" github="components/skeleton.md" show_dark=true >}}

    
        
    
    
    
    
    
    
       
        
            
            
        
    
    Loading...

{{< /example >}}

##### Widget placeholder

This example can be used to show a placeholder of skeleton when fetching data for widgets and cards inside an application.

{{< example id="skeleton-chart-example" github="components/skeleton.md" show_dark=true >}}

    
    
    
        
        
        
        
        
        
        
    
    Loading...

{{< /example >}}

##### List placeholder

Use this example to show a placeholder when loading a list of items.

{{< example id="skeleton-list-example" github="components/skeleton.md" show_dark=true >}}

    
        
            
            
        
        
    
    
        
            
            
        
        
    
    
        
            
            
        
        
    
    
        
            
            
        
        
    
    
        
            
            
        
        
    
    Loading...

{{< /example >}}

##### Testimonial placeholder

This example can be used to show a skeleton placeholder when loading data for a testimonial section.

{{< example id="skeleton-testimonial-example" github="components/skeleton.md" show_dark=true >}}

    
    
    
        
        
        
    
    Loading...

{{< /example >}}

##### Accessibility

Use the `role="status"` attribute on the `` wrapper element to notify Assistive Technologies when content is about to be updated and show the "Loading..." text inside a `` tag with the `.sr-only` class to make it visible only to screen readers.

#### Speed Dial

Get started with the speed dial component to show a list of buttons or menu items positioned relative to the body in either corner as a quick way to allow certains actions to be made by your users.

This component can be easily customized by changing the colors, text, icons, sizes, alignment, and even positioning using our examples built with Tailwind CSS and making use of Flowbite's JavaScript API.

Make sure that you have the Flowbite JS file included in your application by following our }}">quickstart guide.

##### Default speed dial

To initialize a speed dial component you need to wrap the trigger element and the list of items inside an element and use the `data-dial-init` data attribute on it.

Furthermore, make sure that the trigger button element has the `data-dial-toggle="{targetElementId}"` where the value is the ID of the target element.

{{< example id="default-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

##### Square speed dial

Use this example to make the trigger button's style square instead of a full circle using the `rounded-lg` utility class.

{{< example id="square-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

##### Text inside button

This example can be used to show the descriptive text inside the button instead of a tooltip.

{{< example id="speed-dial-menu-text-inside-button-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
        
        
    
    



    
        
        
        
        
    
    

{{< /example >}}

##### Text outside button

Use this example to show the text of each button outside of the speed dial as an alternative style.

{{< example id="speed-dial-text-outside-button-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
        
        
    
    



    
        
        
        
        
    
    

{{< /example >}}

##### Dropdown menu

This example can be used to show a list of menu items instead of buttons when activating the speed dial.

{{< example id="dropdown-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
            
                
                    
                    Share
                
            
            
                
                    
                    Print
                
            
            
                
                    
                    Save
                
            
            
                
                    
                    Copy
                
            
        
    
    



    
        
            
                
                    
                    Share
                
            
            
                
                    
                    Print
                
            
            
                
                    
                    Save
                
            
            
                
                    
                    Copy
                
            
        
    
    

{{< /example >}}

##### Alternative menu

This example can be used to show an alternative style when showing a list of menu items.

{{< example id="dropdown-alternative-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
            
                
                    
                    New post
                
            
            
                
                    
                    New topic
                
            
            
                
                    
                    Add comment
                
            
        
    
    



    
        
            
                
                    
                    New post
                
            
            
                
                    
                    New topic
                
            
            
                
                    
                    Add comment
                
            
        
    
    

{{< /example >}}

##### Positioning

The positioning of the speed dial component relative to the body element can be easily done by using the positioning utility classes from Tailwind CSS.

###### Top right

Use the `top-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the top right side of the document body.

{{< example id="top-right-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    

{{< /example >}}

###### Bottom right

Use the `bottom-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the bottom right side of the document body.

{{< example id="bottom-right-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

###### Bottom left

Use the `bottom-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the bottom left side of the document body.

{{< example id="bottom-left-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

###### Top left

Use the `top-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the top left side of the document body.

{{< example id="top-left-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    

{{< /example >}}

##### Alignment

The alignment of the speed dial menu items and buttons can be set using the flexbox utility classes from Tailwind CSS.

###### Vertical

The default alignment of the menu items of the speed dial is vertical using the `flex-col` utility class.

{{< example id="vertical-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

###### Horizontal

Horizontally align the speed dial menu items by using the flexbox utility classes from Tailwind CSS.

{{< example id="horizontal-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

##### Triggering

Use the `data-dial-trigger="{click|hover}"` data attributes on the trigger element inside of the speed dial component to set which type of action should activate the speed dial: click or hover.

###### Hover

The default trigger type is hover for each speed dial component.

{{< example id="hover-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

###### Click

If you want the speed dial component to activate when clicking instead of hovering over the trigger element then you need to set the `click` value inside of the `data-dial-toggle="click"` data attribute on the trigger element.

{{< example id="click-speed-dial-example" class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

{{< /example >}}

##### JavaScript behaviour

The Speed Dial API from Flowbite can be used to create an object in JavaScript to set up the options, methods, and behaviour of a speed dial component manually.

###### Object parameters

Create a new Speed Diual object with the object parameters like the trigger element, the target element, and the other options such as the trigger type.


    
        
            
                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            
        
        
            
                
                    parentEl
                
                
                    Element
                
                
                    Required
                
                
                    This is the parent and main wrapping element of the speed dial component.
                
            
            
                
                    triggerEl
                
                
                    Element
                
                
                    Required
                
                
                    Set a button as the trigger element for the speed dial.
                
            
            
                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    This is the element that is the list of menu items or buttons that will be toggled.
                
            
            
                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the trigger type and other options of the speed dial.
                
            
            
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
        
    


###### Options

Use the following options as the third parameter for the Speed Dial object to set the trigger type (hover or click).


    
        
            
                
                    Option
                
                
                    Type
                
                
                    Description
                
            
        
        
            
                
                    triggerType
                
                
                    String
                
                
                    Set the event type that will trigger the speed dial choosing between hover|click|none.
                
            
            
                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the speed dial is hidden.
                
            
            
                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the speed dial is shown.
                
            
            
                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the speed dial is toggled.
                
            
        
    


###### Methods

Use the methods from the Speed Dial object to programmatically show or hide the component from directly JavaScript.


    
        
            
                
                    Method
                
                
                    Description
                
            
        
        
            
                
                    show()
                
                
                    Use this method on the Speed Dial object to show the list of menu items or buttons.
                
            
            
                
                    hide()
                
                
                    Use this method on the Speed Dial object to hide the list of menu items or buttons.
                
            
            
                
                    toggle()
                
                
                    Use this method on the Speed Dial object to toggle the visibility of the list of menu items or buttons.
                
            
            
                
                    updateOnShow(callback)
                
                
                    Use this method to set a callback function when the dial has been shown.
                
            
            
                
                    updateOnHide(callback)
                
                
                    Use this method to set a callback function when the dial has been hidden.
                
            
            
                
                    updateOnToggle(callback)
                
                
                    Use this method to set a callback function when the dial visibility has been changed.
                
            
        
    


###### Example

Use following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Speed Dial object.

Three arguments are required for the Speed Dial component, namely the parent element, trigger element, and the target element.

Furthermore, you can also pass an object of options to set the trigger type and set the callback functions.

```javascript
// parent element wrapping the speed dial
const $parentEl = document.getElementById('dialParent');

// the trigger element that can be clicked or hovered
const $triggerEl = document.getElementById('dialButton');

// the content wrapping element of menu items or buttons
const $targetEl = document.getElementById('dialContent');

// options with default values
const options = {
    triggerType: 'click',
    onHide: () => {
        console.log('speed dial is shown');
    },
    onShow: () => {
        console.log('speed dial is hidden');
    },
    onToggle: () => {
        console.log('speed dial is toggled');
    },
};

// instance options with default values
const instanceOptions = {
  id: 'dialContent',
  override: true
};
```

Create a new Speed Dial object based on the options above.

```javascript
import { Dial } from 'flowbite';

/*
 * $parentEl: required
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 * instanceOptions: optional
 */
const dial = new Dial($parentEl, $triggerEl, $targetEl, options, instanceOptions);
```

Use the `show`, `hide`, or `toggle` methods on the Speed Dial object to programmatically show and hide the speed dial component using JavaScript.

```javascript
// show the speed dial
dial.show();

// hide the speed dial
dial.hide();

// toggle the visibility of the speed dial
dial.toggle();
```

###### HTML Markup

Use the following HTML code for the JavaScript example above.

```html

    
        
        
            Share
            
        
        
        
            Print
            
        
        
        
            Download
            
        
        
        
            Copy
            
        
    
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Speed Dial class, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Dial } from 'flowbite';
import type { DialOptions, DialInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// parent element wrapping the speed dial
const $parentEl: HTMLElement = document.getElementById('dialParent');

// the trigger element that can be clicked or hovered
const $triggerEl: HTMLElement = document.getElementById('dialButton');

// the content wrapping element of menu items or buttons
const $targetEl: HTMLElement = document.getElementById('dialContent');

// options with default values
const options: DialOptions = {
    triggerType: 'hover',
    onHide: () => {
        console.log('speed dial is shown');
    },
    onShow: () => {
        console.log('speed dial is hidden');
    },
    onToggle: () => {
        console.log('speed dial is toggled');
    },
};

// instance options with default values
const instanceOptions: InstanceOptions = {
  id: 'dialContent',
  override: true
};

/*
 * $parentEl: required
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 */
const dial: DialInterface = new Dial($parentEl, $triggerEl, $targetEl, options);

// show the speed dial
dial.show();
```

#### Spinner

The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.

##### Default spinner

Use the following SVG element with the `animate-spin` animation class to show a loading animation:

{{< example id="default-spinner-example" github="components/spinner.md" show_dark=true >}}

    
    Loading...

{{< /example >}}

##### Colors

You can change the colors of the spinner element using the fill and color utility classes from Tailwind CSS:

-   use `fill-{*}` to change the main colors
-   use `text-{*}` to change the background

{{< example id="spinner-colors-example" github="components/spinner.md" class="flex items-center space-x-2 rtl:space-x-reverse" show_dark=true >}}

    
    Loading...


    
    Loading...


    
    Loading...


    
    Loading...


    
    Loading...


    
    Loading...


    
    Loading...

{{< /example >}}

##### Sizes

Change the size of the spinner component using the `h-{*}` and `w-{*}` utility classes from Tailwind CSS:

{{< example id="spinner-sizes-example" github="components/spinner.md" class="flex items-center space-x-2 rtl:space-x-reverse" show_dark=true >}}


    
    Loading...


    
    Loading...


    
    Loading...


    
    Loading...

{{< /example >}}

##### Alignment

Because the spinner component is an inline HTML element it can easily be aligned on the left, center, or right side using the `text-{left|center|right}` utility classes:

{{< example id="spinner-alignment-example" github="components/spinner.md" show_dark=true >}}


    
        
        Loading...
    


    
        
        Loading...
    


    
        
        Loading...
    

{{< /example >}}

##### Spinner with card

Use this animated loading indicator when content inside of a card is still loading.

{{< example id="spinner-card-example" github="components/spinner.md" show_dark=true >}}


    Noteworthy technology acquisitions 2021
    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
    
        
        Loading...
    

{{< /example >}}

##### Progress spinner

Use this animated spinner component inside a list of steppers elements.

{{< example id="spinner-progress-example" github="components/spinner.md" show_dark=true >}}

Converting your image:

    
        
        Upload your file to our website
    
    
        
        Choose your file format
    
    
        
            
            Loading...
        
        Preparing your file
    

{{< /example >}}

##### Buttons

The spinner component can also be used inside elements such as buttons when submitting form data:

{{< example id="spinner-buttons-example" github="components/spinner.md" show_dark=true >}}


{{< /example >}}

##### Accessibillity

Use the `aria-hidden="true"` attribute to hide the SVG spinner icon from the accessibility API and screen readers while showing a loading text element visible only to screen readers using the `.sr-only` class.

The `role="status"` attribute on the main `` wrapper is used to indicate a status message to assistive technologies such as screen readers.

#### Stepper

The stepper component can be used to show a numbered list of steps next to a form component to indicate the progress and number of steps that are required to complete and submit the form data.

There are multiple examples that you can use including horizontal or vertical aligned stepper components, different sizes, styles, and showing icons or numbers all coded with the utility classes from Tailwind CSS.

##### Default stepper

Use this example to show a list of form steps with a number and title of the step in a horizontal alignment.

{{< example id="default-stepper-example" github="components/stepper.md" show_dark=true >}}


    
        
            
            Personal Info
        
    
    
        
            2
            Account Info
        
    
    
        3
        Confirmation
    

{{< /example >}}

##### Progress stepper

This example can be used to show the progress of the stepper component based only on icons and showing a checkmark when the step has been finished.

{{< example id="progress-stepper-example" github="components/stepper.md" show_dark=true >}}


    
        
            
        
    
    
        
            
        
    
    
        
            
        
    

{{< /example >}}

##### Detailed stepper

Use this example to show an extra subtitle next to the number and the title of the steppper component based on an ordered list element.

{{< example id="detailed-stepper-example" github="components/stepper.md" show_dark=true >}}

    
        
            1
        
        
            User info
            Step details here
        
    
    
        
            2
        
        
            Company info
            Step details here
        
    
    
        
            3
        
        
            Payment info
            Step details here
        
    


{{< /example >}}

##### Vertical stepper

This example can be used to show a list of steps aligned vertically where you can indicate the completed, currently active, and the unexplored steps.

{{< example id="vertical-stepper-example" github="components/stepper.md" show_dark=true >}}

    
        
            
                User info
                1. User info
                
            
        
    
    
        
            
                Account info
                2. Account info
                
            
        
    
    
        
            
                Social accounts
                3. Social accounts
                
            
        
    
    
        
            
                Review
                4. Review
            
        
    
        
        
            
                Confirmation
                5. Confirmation
            
        
    

{{< /example >}}

##### Breadcrumb stepper

This example can be used to show the number of steps similar to how a breadcrumb component looks like by using double chevron icons between the items.

{{< example id="breadcrumb-stepper-example" github="components/stepper.md" show_dark=true >}}

    
        
            1
        
        Personal Info
        
    
    
        
            2
        
        Account Info
        
    
    
        
            3
        
        Review
    


{{< /example >}}

##### Timeline stepper

Use this example to show the number of steps inside a timeline component using icons, title, and subtitle for each step.

{{< example id="timeline-stepper-example" github="components/stepper.md" class="p-4" show_dark=true >}}

                  
                
        
            
        
        Personal Info
        Step details here
    
    
        
            
        
        Account Info
        Step details here
    
    
        
            
        
        Review
        Step details here
    
    
        
            
        
        Confirmation
        Step details here
    

{{< /example >}}

##### Stepper with form

Use this example to show the stepper component next to a form layout and change the content based on which currently step your are completing.

{{< example id="form-stepper-example" github="components/stepper.md" show_dark=true >}}


    
        
            
        
    
    
        
            
        
    
    
        
            
        
    


    Invoice details
    
        
            Username
            
        
        
            Email
            
        
        
            Password
            
        
                        
            Confirm password
            
        
    
    

{{< /example >}}

#### Tables

The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.

Get started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite.

##### Default table

Use the following example of a responsive table component to show multiple rows and columns of text data.

{{< example id="default-table-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
            
        
    

{{< /example >}}

##### Highlight

Accentuate certain elements inside the table such as the rows, columns or data cells based on your needs.

###### Striped rows

Use this example to increase the readability of the data sets by alternating the background color of every second table row.

{{< example id="table-striped-rows-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            
            
                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            
        
    

{{< /example >}}

###### Striped columns

Use this example to increase the readability of the table cells by alternating the background color of every second table column.

{{< example id="table-striped-columns-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
            
            
                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
            
            
                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
            
        
    

{{< /example >}}

###### Hover state

Use the `hover:{bg-*}` utility class from Tailwind CSS to change the background color of a data row when hovering over the element with the cursor.

{{< example id="table-hover-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Edit
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
        
    

{{< /example >}}

##### Table layout

Use the following examples of table layouts to show the head, foot or caption of the table.

###### Table head (sortable)

This example can be used to show the head of the table component with sortable icons.

{{< example id="table-head-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    
                        Color
                        
                    
                
                
                    
                        Category
                        
                    
                
                
                    
                        Price
                        
                    
                
                
                    Edit
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
        
    

{{< /example >}}

###### Table foot

Use this example where the `` HTML element can be used in conjunction with the head and caption of the table component.

{{< example id="table-foot-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Qty
                
                
                    Price
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    1
                
                
                    $2999
                
            
            
                
                    Microsoft Surface Pro
                
                
                    1
                
                
                    $1999
                
            
            
                
                    Magic Mouse 2
                
                
                   1
                
                
                    $99
                
            
        
        
            
                Total
                3
                21,000
            
        
    

{{< /example >}}

###### Table caption

Improve accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.

{{< example id="table-caption-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            Our products
            Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.
        
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Edit
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
        
    

{{< /example >}}

##### Table styles

Get started with the following table styles and choose the one that best fits your application.

###### Without border

Use this example of a table component without any border between the table cells.

{{< example id="table-borderless-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
            
        
    

{{< /example >}}

###### Table with shadow

Use this example to apply a shadow-sm border to the table component.

{{< example id="table-shadow-example" github="components/tables.md" class="pb-4 overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
        
    

{{< /example >}}

##### Overflow scrolling

Use this example where we apply `overflow-x-auto` to enable horizontal scrolling if the content inside the table overflows that maximum width.

{{< example id="table-scroll-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Accessories
                
                
                    Available
                
                
                    Price
                
                
                    Weight
                
                
                    Action
                
            
        
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    Yes
                
                
                    Yes
                
                
                    $2999
                
                
                    3.0 lb.
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    No
                
                
                    Yes
                
                
                    $1999
                
                
                    1.0 lb.
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    Yes
                
                
                    No
                
                
                    $99
                
                
                    0.2 lb.
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple Watch
                
                
                    Black
                
                
                    Watches
                
                
                    Yes
                
                
                    No
                
                
                    $199
                
                
                    0.12 lb.
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple iMac
                
                
                    Silver
                
                
                    PC
                
                
                    Yes
                
                
                    Yes
                
                
                    $2999
                
                
                    7.0 lb.
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple AirPods
                
                
                    White
                
                
                    Accessories
                
                
                    No
                
                
                    Yes
                
                
                    $399
                
                
                    38 g
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    iPad Pro
                
                
                    Gold
                
                
                    Tablet
                
                
                    No
                
                
                    Yes
                
                
                    $699
                
                
                    1.3 lb.
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Magic Keyboard
                
                
                    Black
                
                
                    Accessories
                
                
                    Yes
                
                
                    Yes
                
                
                    $99
                
                
                    453 g
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple TV 4K
                
                
                    Black
                
                
                    TV
                
                
                    Yes
                
                
                    No
                
                
                    $179
                
                
                    1.78 lb.
                
                
                    Edit
                    Remove
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    AirTag
                
                
                    Silver
                
                
                    Accessories
                
                
                    Yes
                
                
                    No
                
                
                    $29
                
                
                    53 g
                
                
                    Edit
                    Remove
                
            
        
    

{{< /example >}}

##### Table search

Use this example to show a search bar that can be used to query through data inside the table component.

{{< example id="table-search-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        Search
        
            
                
            
            
        
    
    
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple Watch
                
                
                    Silver
                
                
                    Accessories
                
                
                    $179
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    iPad
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple iMac 27"
                
                
                    Silver
                
                
                    PC Desktop
                
                
                    $3999
                
                
                    Edit
                
            
        
    

{{< /example >}}


  {{< requires_js >}}


##### Table filter

Use this example with a filter bar to select certain data sets inside the table based on the options that you've selected.

{{< example id="table-filter-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
            
            
                
                    
                        
                            
                            Last day
                        
                    
                    
                        
                            
                            Last 7 days
                        
                    
                    
                        
                            
                            Last 30 days
                        
                    
                    
                        
                            
                            Last month
                        
                    
                    
                        
                            
                            Last year
                        
                    
                
            
        
        Search
        
            
                
            
            
        
    
    
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple Watch
                
                
                    Silver
                
                
                    Accessories
                
                
                    $179
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    iPad
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple iMac 27"
                
                
                    Silver
                
                
                    PC Desktop
                
                
                    $3999
                
                
                    Edit
                
            
        
    

{{< /example >}}

##### Table pagination

Paginate the table data when using larger data sets based on any given amount of results per page.

{{< example id="table-pagination-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple Watch
                
                
                    Black
                
                
                    Watches
                
                
                    $199
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple iMac
                
                
                    Silver
                
                
                    PC
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple AirPods
                
                
                    White
                
                
                    Accessories
                
                
                    $399
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    iPad Pro
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Magic Keyboard
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Smart Folio iPad Air
                
                
                    Blue
                
                
                    Accessories
                
                
                    $79
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    AirTag
                
                
                    Silver
                
                
                    Accessories
                
                
                    $29
                
                
                    Edit
                
            
        
    
    
        Showing 1-10 of 1000
        
            
                Previous
            
            
                1
            
            
                2
            
            
                3
            
            
                4
            
            
                5
            
            
        Next
            
        
    

{{< /example >}}

##### Checkbox selection

Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.

{{< example id="table-checkbox-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple Watch
                
                
                    Silver
                
                
                    Accessories
                
                
                    $179
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    iPad
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    Apple iMac 27"
                
                
                    Silver
                
                
                    PC Desktop
                
                
                    $3999
                
                
                    Edit
                
            
        
    

{{< /example >}}


  {{< requires_js >}}


##### Table with users

Use this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.

{{< example id="table-users-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
            
            
                
                    
                        Reward
                    
                    
                        Promote
                    
                    
                        Activate account
                    
                
                
                    Delete User
                
            
        
        Search
        
            
                
            
            
        
    
    
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Name
                
                
                    Position
                
                
                    Status
                
                
                    Action
                
            
        
        
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Neil Sims
                        neil.sims@flowbite.com
                      
                
                
                    React Developer
                
                
                    
                         Online
                    
                
                
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Bonnie Green
                        bonnie@flowbite.com
                    
                
                
                    Designer
                
                
                    
                         Online
                    
                
                
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Jese Leos
                        jese@flowbite.com
                    
                
                
                    Vue JS Developer
                
                
                    
                         Online
                    
                
                
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Thomas Lean
                        thomes@flowbite.com
                    
                
                
                    UI/UX Engineer
                
                
                    
                         Online
                    
                
                
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Leslie Livingston
                        leslie@flowbite.com
                    
                
                
                    SEO Specialist
                
                
                    
                         Offline
                    
                
                
                    Edit user
                
            
        
    

{{< /example >}}

##### Table with products

Get started with this example to show a list of products inside the table and show a preview image, product name, quantity selector, price and actions tab.

{{< example id="table-products-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Image
                
                
                    Product
                
                
                    Qty
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    
                
                
                    Apple Watch
                
                
                    
                        
                        
                            
                        
                        
                    
                
                
                    $599
                
                
                    Remove
                
            
            
                
                    
                
                
                    iMac 27"
                
                
                    
                        
                        
                            
                        
                        
                    
                
                
                    $2499
                
                
                    Remove
                
            
            
                
                    
                
                
                    IPhone 12 
                
                
                    
                        
                        
                            
                        
                        
                    
                
                
                    $999
                
                
                    Remove
                
            
        
    

{{< /example >}}


  {{< requires_js >}}


##### Table with modal

Use this example to show a modal with a form where you can edit table data by clicking on one of the rows.

{{< example id="table-modal-example" github="components/tables.md" class="overflow-hidden" show_dark=true iframeHeight="640" >}}

    
        
            
            
            
                
                    
                        Reward
                    
                    
                        Promote
                    
                    
                        Activate account
                    
                
                
                    Delete User
                
            
        
        Search
        
            
                
            
            
        
    
    
        
            
                
                    
                        
                        checkbox
                    
                
                
                    Name
                
                
                    Position
                
                
                    Status
                
                
                    Action
                
            
        
        
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Neil Sims
                        neil.sims@flowbite.com
                      
                
                
                    React Developer
                
                
                    
                         Online
                    
                
                
                    
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Bonnie Green
                        bonnie@flowbite.com
                    
                
                
                    Designer
                
                
                    
                         Online
                    
                
                
                    
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Jese Leos
                        jese@flowbite.com
                    
                
                
                    Vue JS Developer
                
                
                    
                         Online
                    
                
                
                    
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Thomas Lean
                        thomes@flowbite.com
                    
                
                
                    UI/UX Engineer
                
                
                    
                         Online
                    
                
                
                    
                    Edit user
                
            
            
                
                    
                        
                        checkbox
                    
                
                
                    
                    
                        Leslie Livingston
                        leslie@flowbite.com
                    
                
                
                    SEO Specialist
                
                
                    
                         Offline
                    
                
                
                    
                    Edit user
                
            
        
    
    
    
        
            
            
                
                
                    
                        Edit user
                    
                   
                
                
                
                    
                        
                            First Name
                            
                        
                        
                            Last Name
                            
                        
                        
                            Email
                            
                        
                        
                            Phone Number
                            
                        
                        
                            Department
                            
                        
                        
                            Company
                            
                        
                        
                            Current Password
                            
                        
                        
                            New Password
                            
                        
                    
                
                
                
                    
                
            
        
    

{{< /example >}}

##### Comparison table

Use this example to compare values inside a table such as a pricing card.

{{< example id="table-comparison-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            Tailwind CSS code
            Community Edition
            Developer Edition
            Designer Edition
        
        
            Basic components (view all)
            
                
            
            
                
            
            
                
            
        
        
            Application UI (view demo)
            
                
            
            
                
            
            
                
            
        
        
            Marketing UI pre-order
            
                
            
            
                
            
            
                
            
        
        
            E-commerce UI pre-order
            
                
            
            
                
            
            
                
            
        
        
            
            
                Buy now
            
            
                Buy now
            
            
                Buy now
            
        
    

{{< /example >}}

##### Table colors

Apply any color to the table element by using the `bg-{color}` and `text-{color}` color class variants from Tailwind CSS.

{{< example id="table-colors-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            
            
                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            
        
    

{{< /example >}}

###### Striped rows color

Use this example to apply a different color to every second row inside the table.

{{< example id="table-striped-rows-colors-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            
            
                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            
        
    

{{< /example >}}

###### Striped columns color

Use this example to apply a different color to every second column inside a colored table.

{{< example id="table-striped-columns-colors-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            
            
                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            
        
    

{{< /example >}}

###### Hover state

Use this example to apply a different color to every second row inside the table with a colored background.

{{< example id="table-striped-colors-hover-example" github="components/tables.md" class="overflow-hidden" show_dark=true >}}


    
        
            
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            
        
        
            
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            
            
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            
            
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            
            
                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            
            
                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            
        
    

{{< /example >}}

##### More examples

You can check out more table component examples from the following resources from Flowbite Blocks:

-   [Advanced tables](https://flowbite.com/blocks/application/advanced-tables/)
-   [Table headers](https://flowbite.com/blocks/application/table-headers/)
-   [Table footers](https://flowbite.com/blocks/application/table-footers/)
-   [Pricing tables](https://flowbite.com/blocks/marketing/pricing/)

#### Tabs

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

##### Default tabs

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

{{< example id="default-tabs-example" github="components/tabs.md" show_dark=true >}}


    
        Profile
    
    
        Dashboard
    
    
        Settings
    
    
        Contacts
    
    
        Disabled
    

{{< /example >}}

##### Tabs with underline

Use this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.

{{< example id="tabs-underline-example" github="components/tabs.md" show_dark=true >}}


    
        
            Profile
        
        
            Dashboard
        
        
            Settings
        
        
            Contacts
        
        
            Disabled
        
    

{{< /example >}}

##### Tabs with icons

This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.

{{< example id="tabs-icons-example" github="components/tabs.md" show_dark=true >}}


    
        
            
                Profile
            
        
        
            
                Dashboard
            
        
        
            
                Settings
            
        
        
            
                Contacts
            
        
        
            Disabled
        
    

{{< /example >}}

##### Pills tabs

If you want to use pills as a style for the tabs component you can do so by using this example.

{{< example id="tabs-pill-example" github="components/tabs.md" show_dark=true >}}


    
        Tab 1
    
    
        Tab 2
    
    
        Tab 3
    
    
        Tab 4
    
    
        Tab 5
    

{{< /example >}}

##### Vertical tabs

Use this example to show a vertically aligned set of tabs on the left side of the page.

{{< example id="tabs-vertical-example" github="components/tabs.md" show_dark=true >}}


    
        
            
                
                Profile
            
        
        
            
                
                Dashboard
            
        
        
            
                
                Settings
            
        
        
            
                
                Contact
            
        
        
            
                
            Disabled
        
    
    
        Profile Tab
        This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.
        The tab JavaScript swaps classes to control the content visibility and styling. 
    


{{< /example >}}


##### Full width tabs

If you want to show the tabs on the full width relative to the parent element you can do so by using the full width tabs component example.

{{< example id="tabs-full-width-example" github="components/tabs.md" show_dark=true >}}


    Select your country
    


    
        Profile
    
    
        Dashboard
    
    
        Settings
    
    
        Invoice
    

{{< /example >}}


  {{< requires_js >}}


##### Interactive tabs

Use the dynamic tabs component to interactively show and hide the content below the tabs based on the currently active tab item. Make sure that you initialize the component by using the `data-tabs-toggle="{parentTabContentSelector}"` and also apply an `id` attribute to the same element.

Each tab toggle button requires a `role="tab"` attribute and a `data-tabs-target="{tabContentSelector}"` to target the tab content element that will be shown when clicked.

Use the `aria-selected="true"` data attribute so that Flowbite can target the currently active tab component and hide it when another is shown. If not set, it will show the first tab as active.

Apply the `role="tabpanel"` data attribute to every tab content element and set the `id` attribute which will be equal to the `data-tabs-target={tabContentSelector}` from the tabs toggles.

You can use multiple tab components on a single page but make sure that the id's are different.

{{< example id="tabs-interactive-example" github="components/tabs.md" show_dark=true >}}


    
        
            
        
        
            
        
        
            
        
        
            
        
    


    
        This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    
    
        This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    
    
        This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    
    
        This is some placeholder content the Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    

{{< /example >}}

##### Active tab style

Use the `data-tabs-active-classes` and the `data-tabs-inactive-classes` to set the active and inactive tab Tailwind CSS classes. In this example we set the active classes to the purple color instead of blue.

{{< example id="tabs-interactive-active-example" github="components/tabs.md" show_dark=true >}}


    
        
            
        
        
            
        
        
            
        
        
            
        
    


    
        This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    
    
        This is some placeholder content the Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    
    
        This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    
    
        This is some placeholder content the Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling.
    

{{< /example >}}

##### JavaScript behaviour

The **Tabs** class from Flowbite can be used to create an object that will enable the interactive navigation between tabs and its content based on the parameters, options, methods, and callback functions that you apply.

###### Object parameters

Create a new Tabs object with parameters such as an array of the tab and content elements.


    
        
            
                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            
        
        
            
                
                    tabsElement
                
                
                    Element
                
                
                    Required
                
                
                    Parent HTML element of the tabs component.
                
            
            
                
                    items
                
                
                    Array
                
                
                    Required
                
                
                    Array of the tab objects including the id, trigger element, and the content element.
                
            
            
                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    An object of options for the appearances of the tabs and to use callback functions.
                
            
            
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
        
    


###### Options

Use the following options as the second parameter for the Tabs object to set the appearance of the active tab elements and use callback functions.


    
        
            
                
                    Option
                
                
                    Type
                
                
                    Description
                
            
        
        
            
                
                    defaultTabId
                
                
                    String
                
                
                    Set the currently active tab element based on the ID.
                
            
            
                
                    activeClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS class names to apply to the active tab element.
                
            
            
                
                    inactiveClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS class names to apply to the inactive tab elements.
                
            
            
                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the a new tab has been shown.
                
            
        
    


###### Methods

Use the methods from the Tabs object to programmatically change the current active tab using JavaScript.


    
        
            
                
                    Method
                
                
                    Description
                
            
        
        
            
                
                    show(id)
                
                
                    Use the show function on the Tab object to change the current active tab element.
                
            
            
                
                    getTab(id)
                
                
                    Return the tab element based on the ID.
                
            
            
                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function whenever a tab has been shown.
                
            
        
    


###### Example

Check out the following example to learn how to initialize and manipulate a Tabs object in JavaScript.

First of all, create an array of objects that contains the id, trigger element, and content element of each tab, set the active tab based on the id, and optionally set a callback function after a new tab has been shown.

```javascript
const tabsElement = document.getElementById('tabs-example');

// create an array of objects with the id, trigger element (eg. button), and the content element
const tabElements = [
    {
        id: 'profile',
        triggerEl: document.querySelector('#profile-tab-example'),
        targetEl: document.querySelector('#profile-example'),
    },
    {
        id: 'dashboard',
        triggerEl: document.querySelector('#dashboard-tab-example'),
        targetEl: document.querySelector('#dashboard-example'),
    },
    {
        id: 'settings',
        triggerEl: document.querySelector('#settings-tab-example'),
        targetEl: document.querySelector('#settings-example'),
    },
    {
        id: 'contacts',
        triggerEl: document.querySelector('#contacts-tab-example'),
        targetEl: document.querySelector('#contacts-example'),
    },
];

// options with default values
const options = {
    defaultTabId: 'settings',
    activeClasses:
        'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500',
    inactiveClasses:
        'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300',
    onShow: () => {
        console.log('tab is shown');
    },
};

// instance options with default values
const instanceOptions = {
  id: 'tabs-example',
  override: true
};
```

Create a new Tabs object based on the parameters we've previously set.

```javascript
import { Tabs } from 'flowbite';

/*
* tabsElement: parent element of the tabs component (required)
* tabElements: array of tab objects (required)
* options (optional)
* instanceOptions (optional)
*/
const tabs = new Tabs(tabsElement, tabElements, options, instanceOptions);
```

Lastly, you can now use the methods on the Tabs object to show another tab element, get a tab element based on the id, or get the current active tab element.

```javascript
// shows another tab element
tabs.show('dashboard');

// get the tab object based on ID
tabs.getTab('contacts');

// get the current active tab object
tabs.getActiveTab();
```

###### HTML Markup

You can use this HTML code as an example for the JavaScript code from above.

```html

    
        
            
        
        
            
        
        
            
        
        
            
        
    


    
        
            This is some placeholder content the
            Profile tab's associated content. Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
        
    
    
        
            This is some placeholder content the
            Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
        
    
    
        
            This is some placeholder content the
            Settings tab's associated content. Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
        
    
    
        
            This is some placeholder content the
            Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for
            the next. The tab JavaScript swaps classes to control the content
            visibility and styling.
        
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Tabs class, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Tabs } from 'flowbite';
import type { TabsOptions, TabsInterface, TabItem } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

const tabsElement: HTMLElement = document.getElementById('tabs-example');

// create an array of objects with the id, trigger element (eg. button), and the content element
const tabElements: TabItem[] = [
    {
        id: 'profile',
        triggerEl: document.querySelector('#profile-tab-example'),
        targetEl: document.querySelector('#profile-example'),
    },
    {
        id: 'dashboard',
        triggerEl: document.querySelector('#dashboard-tab-example'),
        targetEl: document.querySelector('#dashboard-example'),
    },
    {
        id: 'settings',
        triggerEl: document.querySelector('#settings-tab-example'),
        targetEl: document.querySelector('#settings-example'),
    },
    {
        id: 'contacts',
        triggerEl: document.querySelector('#contacts-tab-example'),
        targetEl: document.querySelector('#contacts-example'),
    },
];

// options with default values
const options: TabsOptions = {
    defaultTabId: 'settings',
    activeClasses:
        'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500',
    inactiveClasses:
        'text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300',
    onShow: () => {
        console.log('tab is shown');
    },
};

// instance options with default values
const instanceOptions: InstanceOptions = {
  id: 'tabs-example',
  override: true
};

/*
* tabsElement: parent element of the tabs component (required)
* tabElements: array of tab elements (required)
* options (optional)
* instanceOptions (optional)
*/
const tabs: TabsInterface = new Tabs(tabsElement, tabElements, options, instanceOptions);

// open tab item based on id
tabs.show('contacts');
```

#### Timeline

The timeline component can be used to show series of data in a chronological order for use cases such as activity feeds, user actions, application updates, and more. Get started with multiple vertical timeline styles built with the utility classes from Tailwind CSS and Flowbite.

##### Default timeline

Use this responsive Tailwind CSS timeline component to show a series of data entries with a date, title, and description with a vertical line with dots on the left or right side of the wrapper element.

Optionally, you can also add a CTA button to any of the timeline elements.

{{< example id="default-timeline-example" github="components/timeline.md" show_dark=true >}}
                  
    
        
        February 2022
        Application UI code in Tailwind CSS
        Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
        Learn more 
    
    
        
        March 2022
        Marketing UI design in Figma
        All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.
    
    
        
        April 2022
        E-Commerce UI code in Tailwind CSS
        Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
    


{{< /example >}}

##### Vertical timeline

Use this vertical timeline component with icons and badges to show a more advanced set of data.

{{< example id="timeline-vertical-example" github="components/timeline.md" show_dark=true >}}
                  
                
        
            
        
        Flowbite Application UI v2.0.0 Latest
        Released on January 13th, 2022
        Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
         Download ZIP
    
    
        
            
        
        Flowbite Figma v1.3.0
        Released on December 7th, 2021
        All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.
    
    
        
            
        
        Flowbite Library v1.2.2
        Released on December 2nd, 2021
        Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
    


{{< /example >}}

##### Stepper timeline

Use this horizontally aligned timeline component to show a series of data in a chronological order.

{{< example id="timeline-stepper-example" github="components/timeline.md" show_dark=true >}}

    
        
            
                
            
            
        
        
            Flowbite Library v1.0.0
            Released on December 2, 2021
            Get started with dozens of web components and interactive elements.
        
    
    
        
            
                
            
            
        
        
            Flowbite Library v1.2.0
            Released on December 23, 2021
            Get started with dozens of web components and interactive elements.
        
    
    
        
            
                
            
            
        
        
            Flowbite Library v1.3.0
            Released on January 5, 2022
            Get started with dozens of web components and interactive elements.
        
    


{{< /example >}}

##### Activity log

This component can be used to show the timline of a user's activity history inside your application by using an avatar, datetime, description, and links to specific pages.

{{< example id="timeline-activity-log-example" github="components/timeline.md" show_dark=true >}}
                  
                
        
            
        
        
            just now
            Bonnie moved Jese Leos to Funny Group
        
    
    
        
            
        
        
            
                2 hours ago
                Thomas Lean commented on  Flowbite Pro
            
            Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design system! This is the second session of our new webinar series on #DesignSystems discussions where we'll be speaking about Measurement.
        
    
    
        
            
        
        
            1 day ago
            Jese Leos has changed Pricing page task status to  Finished
        
    


{{< /example >}}

##### Grouped timeline

Use this component to group multiple data entries inside a single date and show elements like the avatar, title, description, tag and link to a relevant page.

{{< example id="timeline-grouped-example" github="components/timeline.md" show_dark=true >}}

    January 13th, 2022
    
        
            
                
                
                    Jese Leos likes Bonnie Green's post in  How to start with Flowbite library
                    "I wanted to share a webinar zeroheight."
                    
                        
                        Public
                     
                
            
        
        
            
                
                
                    Bonnie Green react to Thomas Lean's comment
                    
                        
                        Private
                     
                
            
        
    


    January 12th, 2022
    
        
            
                
                
                    Laura Romeros likes Bonnie Green's post in  How to start with Flowbite library
                    "I wanted to share a webinar zeroheight."
                    
                        
                        Private
                     
                
            
        
        
            
                
                
                    Mike Willi react to Thomas Lean's comment
                    
                        
                        Public
                     
                
            
        
        
            
                
                
                    Jese Leos likes Bonnie Green's post in  How to start with Flowbite library
                    "I wanted to share a webinar zeroheight."
                    
                        
                        Public
                     
                
            
        
        
            
                
                
                    Bonnie Green likes Bonnie Green's post in  Top figma designs
                    "I wanted to share a webinar zeroheight."
                    
                        
                        Private
                     
                
            
        
    


{{< /example >}}

#### Toast

The toast component can be used to enhance your website's interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component by using the `data-dismiss-target` data attribute from Flowbite.

##### Default toast

Use this simple toast component with an icon, message, and dismissible close button to show alert messages to your website visitors. Make sure that you set the correct id for the `data-dismiss-target` data attribute to enable the dismissible feature.

{{< example id="default-toast-example" class="flex justify-center" github="components/toast.md" show_dark=true >}}


    
        
        Fire icon
    
    Set yourself free.
    


{{< /example >}}

##### Colors

Use these contextual toast components to show success, danger, or warning alert messages to your users.

{{< example id="toast-colors-example" class="flex flex-col items-center" github="components/toast.md" show_dark=true >}}


    
        
        Check icon
    
    Item moved successfully.
    


    
        
        Error icon
    
    Item has been deleted.
    


    
        
        Warning icon
    
    Improve password difficulty.
    


{{< /example >}}

##### Simple toast

This component can be used to show simple messages and notifications without the use of a close button.

{{< example id="toast-simple-example" class="flex justify-center" github="components/toast.md" show_dark=true >}}


    
    Message sent successfully.

{{< /example >}}

##### Undo button

Use this toast component to also show an "undo" button to reverse the action of the user.

{{< example id="toast-undo-example" class="flex justify-center" github="components/toast.md" show_dark=true >}}


    
       Conversation archived.
    
    
        Undo
        
    


{{< /example >}}

##### Toast message

This component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.

{{< example id="toast-message-example" class="flex justify-center" github="components/toast.md" show_dark=true >}}


    
        
        
            Jese Leos
            Hi Neil, thanks for sharing your thoughts regarding Flowbite. 
            Reply   
        
        
    

{{< /example >}}

##### Push notification

This component can be used to show notifications for an action from another user such as posting a comment, receiving a like, being tagged. You can show an avatar, icon, message, and the time of the notification.

{{< example id="toast-push-example" class="flex justify-center" github="components/toast.md" show_dark=true >}}


    
        New notification
        
    
    
        
            
            
                
                Message icon
            
        
        
            Bonnie Green
            commented on your photo 
            a few seconds ago   
        
    


{{< /example >}}

##### Interactive toast

Use this interactive toast component to encourage users to make a certain action such as updating to the latest software version. You can set an icon, message, and two CTA buttons.

{{< example id="toast-interactive-example" class="flex justify-center" github="components/toast.md" show_dark=true >}}


    
        
            
            Refresh icon
        
        
            Update available
            A new software version is available for download. 
            
                
                    Update
                
                
                    Not now 
                
                
        
        
    


{{< /example >}}

##### Positioning

Use the `fixed` class from Tailwind CSS to position these toast components relative to the main content wrapper element from your document:

-   Top left: `fixed top-5 left-5`
-   Top right: `fixed top-5 right-5`
-   Bottom left: `fixed bottom-5 left-5`
-   Bottom right: `fixed bottom-5 right-5`

{{< example id="toast-positioning-example" github="components/toast.md" class="relative h-56" show_dark=true >}}


    Top left positioning.


    Top right positioning.


    Bottom right positioning.


    Bottom left positioning.

{{< /example >}}

You can set your own distance for the `top-*|right-*|bottom-*|left-*` positioning classes.

##### JavaScript behaviour

Please check out the }}#javascript-behaviour">Dismiss object documentation to learn how to programmatically work with the toast component directly from JavaScript.

#### Tooltip

Flowbite allows you to use the Tailwind CSS tooltip component to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.

Before continuing, make sure that you have the }}">Flowbite JavaScript file included in your project in order to make the tooltip component work.

##### Default tooltip example

To get started with using tooltips all you need to do is add the `data-tooltip-target="{elementId}"` data attribute to an element where `elementId` is the id of the tooltip component. In the following example you can see the button that will trigger the `tooltip-default` element to be shown when hovered or focused.

{{< example id="default-tooltip-example" class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}



    Tooltip content
    

{{< /example >}}

##### Tooltip styles

You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `data-tooltip-style="{light|dark}"` data attribute.

{{< example id="tooltip-styles-example" class="flex justify-center pt-8 " github="components/tooltips.md" show_dark=true >}}






    Tooltip content
    







    Tooltip content
    

{{< /example >}}

##### Placement

The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the `data-tooltip-placement="{top|right|bottom|left}"` data attribute.

{{< example id="tooltip-placement-example" class="flex flex-wrap justify-center py-8" github="components/tooltips.md" show_dark=true >}}






    Tooltip on top
    







    Tooltip on right
    







    Tooltip on bottom
    







    Tooltip on left
    

{{< /example >}}

##### Triggering

You can choose the triggering event by using the `data-tooltip-trigger="{hover|click}"` data attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `hover`.

{{< example id="tooltip-triggering-example" class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}






    Tooltip content
    







    Tooltip content
    

{{< /example >}}

##### Animation

You can set tooltip animation styles by using the transition utility classes from Tailwind CSS. Make sure that you add `transition-opacity` and `duration-{x}` to set the animation duration.

{{< example id="tooltip-animation-example" class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}



    Tooltip content
    

{{< /example >}}

##### Disable arrow

You can also disable the tooltip arrow by not including the `data-popper-arrow` element.

{{< example id="tooltip-disable-arrow-example" class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}



    Tooltip content

{{< /example >}}

##### JavaScript behaviour

The **Tooltip** class from Flowbite can be used to create an object that will show a tooltip element relative to the main trigger element, such as a button, based on the parameters, options, and methods that you provide.

###### Object parameters

Initialize a Tooltip object with the object parameters including the trigger element, the tooltip content element, and extra options to set the positioning and offsets of the tooltip.


    
        
            
                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            
        
        
            
                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Apply the tooltip content element to show and hide it either using the methods or the hover or click status of the trigger element.
                
            
            
                
                    triggerEl
                
                
                    Element
                
                
                    Required
                
                
                    Set an element to trigger the tooltip when clicking or hovering (ie. a button, text).
                
            
            
                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the positioning of the tooltip element, trigger type, offsets, and more.
                
            
            
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
        
    


###### Options

Use the following options as the third parameter for the Tooltip class to set the positioning, offset, and the trigger type (hover or click) for the tooltip element.


    
        
            
                
                    Option
                
                
                    Type
                
                
                    Description
                
            
        
        
            
                
                    placement
                
                
                    String
                
                
                    Set the position of the tooltip element relative to the trigger element choosing from top|right|bottom|left.
                
            
            
                
                    triggerType
                
                
                    String
                
                
                    Set the event type that will trigger the tooltip content choosing between hover|click|none.
                
            
            
                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the tooltip is hidden.
                
            
            
                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the tooltip is shown.
                
            
            
                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the tooltip visibility is toggled.
                
            
        
    


###### Methods

Use the methods from the Tooltip object to programmatically show or hide the tooltip from JavaScript.


    
        
            
                
                    Method
                
                
                    Description
                
            
        
        
            
                
                    show()
                
                
                    Use this method on the Tooltip object to show the tooltip content.
                
            
            
                
                    hide()
                
                
                    Use this method on the Tooltip object to hide the tooltip content.
                
            
            
                
                    toggle()
                
                
                    Use this method on the Tooltip object to toggle the visibility of the tooltip content.
                
            
            
                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function when the tooltip has been shown.
                
            
            
                
                    updateOnHide(callback)
                
                
                    Use this method to set a custom callback function when the tooltip has been hidden.
                
            
            
                
                    updateOnToggle(callback)
                
                
                    Use this method to set a custom callback function when the tooltip visibility has been toggled.
                
            
        
    


###### Example

Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Tooltip object.

First of all, set the target element as the tooltip itself and the trigger element which can be a button or text element.

After that you can also set the options object to change the placement and trigger type of the tooltip, alongside with the callback functions.

```javascript
// set the tooltip content element
const $targetEl = document.getElementById('tooltipContent');

// set the element that trigger the tooltip using hover or click
const $triggerEl = document.getElementById('tooltipButton');

// options with default values
const options = {
    placement: 'bottom',
    triggerType: 'hover',
    onHide: () => {
        console.log('tooltip is shown');
    },
    onShow: () => {
        console.log('tooltip is hidden');
    },
    onToggle: () => {
        console.log('tooltip is toggled');
    },
};


// instance options with default values
const instanceOptions = {
  id: 'tooltipContent',
  override: true
};
```

Create a new Tooltip object based on the options above.

```javascript
import { Tooltip } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 */
const tooltip = new Tooltip($targetEl, $triggerEl, options, instanceOptions);
```

Use the `show` and `hide` methods on the Tooltip object to programmatically show and hide the tooltip element using JavaScript.

```javascript
// show the tooltip
tooltip.show();

// hide the tooltip
tooltip.hide();

// toggle the tooltip
tooltip.toggle();

// destroy tooltip object (removes event listeners and off-canvas Popper.js)
tooltip.destroy();

// re-initialize tooltip object
tooltip.init();
```

###### HTML Markup

Use the following HTML code for the JavaScript example above.

```html


    Tooltip content
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Tooltip class, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { Tooltip } from 'flowbite';
import type { TooltipOptions, TooltipInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the tooltip content element
const $targetEl: HTMLElement = document.getElementById('tooltipContent');

// set the element that trigger the tooltip using hover or click
const $triggerEl: HTMLElement = document.getElementById('tooltipButton');

// options with default values
const options: TooltipOptions = {
    placement: 'top',
    triggerType: 'hover',
    onHide: () => {
        console.log('tooltip is shown');
    },
    onShow: () => {
        console.log('tooltip is hidden');
    },
    onToggle: () => {
        console.log('tooltip is toggled');
    },
};

// instance options with default values
const instanceOptions: InstanceOptions = {
  id: 'tooltipContent',
  override: true
};

/*
 * targetEl: required
 * triggerEl: required
 * options: optional
 */
const tooltip: TooltipInterface = new Tooltip($targetEl, $triggerEl, options, instanceOptions);

// show the tooltip
tooltip.show();
```

#### Typography

Get started with the [Flowbite Typography](https://github.com/themesberg/flowbite-typography) plugin forked from the official [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin) plugin to set a custom `format` class to a wrapper element to apply styles to all inline child elements such as headings, paragraphs, images, lists, and more and apply font sizes, font weights, colors, and spacings.

You can check out this [live demo](https://flowbite.com/plugins/typography/) to see how content inside an article will render like.

##### Getting started

Make sure that you have both [Node.js](https://nodejs.org/) and [Tailwind CSS](https://tailwindcss.com/) already installed in your project.

1. Install the Flowbite Typography plugin via NPM:

```bash
npm i -D flowbite-typography
```

2. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:

```javascript
@plugin "flowbite-typography";
```

Alternatively you can do the same but in your `tailwind.config.js` file:

```javascript
// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
```

Now you can go ahead and use the new formatting classes from the Flowbite Typography plugin.

##### Basic usage

Once you have installed the plugin inside your project you can add the `format` class to a wrapper element and use any type of inline elements such as headings, paragraphs, images, lists, captions, links, and tables.

All of these elements will be automatically styled with proper spacing, font sizing, font weight, colors, and more based on recommended UI/UX readability and accessibility standards.

```html

    Prototyping from A to Z: best practices for successful prototypes
    Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.
    Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.
    But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.
    
    ...

    When does design come in handy?
    While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
    
        Usability testing. Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live;
        Involving stakeholders. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;
        Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
        Communicating your vision. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.
    

```

You can also set the `lg:format-lg` class to set increase font sizes and spacings for larger viewport devices.

##### Link colors

You can update the default blue link color to anything you'd like by setting the `format-{color}` class:

```html

    Prototyping from A to Z: best practices for successful prototypes
    Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.
    Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.
    But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.

```
##### Dark mode

Enable dark mode for the typography by using the `dark:format-invert` class on the article wrapper element:

```html

    The content inside this article will invert when switching to dark mode
    Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.
    Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.
    But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.
    
    ...

    When does design come in handy?
    While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
    
        Usability testing. Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live;
        Involving stakeholders. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;
        Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
        Communicating your vision. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.
    

```

##### Max width

Override the default maximum width by setting a custom `max-w-{size}` class next to the `format` class:

```html

    Prototyping from A to Z: best practices for successful prototypes
    Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.
    Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.
    But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.

```

##### Disable format

If you want to disable formatting inside the typography content you can use the `not-format` class:

```html

    The content inside this article will invert when switching to dark mode
    Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.
    Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.
    But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.
    
    ...

    
    
        When does design come in handy?
        While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
        
            Usability testing. Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live;
            Involving stakeholders. Need to check if your GDPR consent boxes are displaying properly? Pass your prototype to your data protection team and they can test it for real;
            Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
            Communicating your vision. By using an interactive medium to preview and test design elements, designers and developers can understand each other — and the project — better.
        
    

```

##### Options

Extend the plugin's options inside the Tailwind configuration file to set your own colors, class name, and more.

###### Custom colors

You can set your own colors by extending the typography plugin inside the `tailwind.config.js` file:

```javascript
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        orange: {
          css: {
            '--tw-format-body': theme('colors.orange[500]'),
            '--tw-format-headings': theme('colors.orange[900]'),
            '--tw-format-lead': theme('colors.orange[500]'),
            '--tw-format-links': theme('colors.orange[600]'),
            '--tw-format-bold': theme('colors.orange[900]'),
            '--tw-format-counters': theme('colors.orange[500]'),
            '--tw-format-bullets': theme('colors.orange[500]'),
            '--tw-format-hr': theme('colors.orange[200]'),
            '--tw-format-quotes': theme('colors.orange[900]'),
            '--tw-format-quote-borders': theme('colors.orange[300]'),
            '--tw-format-captions': theme('colors.orange[700]'),
            '--tw-format-code': theme('colors.orange[900]'),
            '--tw-format-code-bg': theme('colors.orange[50]'),
            '--tw-format-pre-code': theme('colors.orange[100]'),
            '--tw-format-pre-bg': theme('colors.orange[900]'),
            '--tw-format-th-borders': theme('colors.orange[300]'),
            '--tw-format-td-borders': theme('colors.orange[200]'),
            '--tw-format-th-bg': theme('colors.orange[50]'),
            '--tw-format-invert-body': theme('colors.orange[200]'),
            '--tw-format-invert-headings': theme('colors.white'),
            '--tw-format-invert-lead': theme('colors.orange[300]'),
            '--tw-format-invert-links': theme('colors.white'),
            '--tw-format-invert-bold': theme('colors.white'),
            '--tw-format-invert-counters': theme('colors.orange[400]'),
            '--tw-format-invert-bullets': theme('colors.orange[600]'),
            '--tw-format-invert-hr': theme('colors.orange[700]'),
            '--tw-format-invert-quotes': theme('colors.pink[100]'),
            '--tw-format-invert-quote-borders': theme('colors.orange[700]'),
            '--tw-format-invert-captions': theme('colors.orange[400]'),
            '--tw-format-invert-code': theme('colors.white'),
            '--tw-format-invert-pre-code': theme('colors.orange[300]'),
            '--tw-format-invert-pre-bg': 'rgb(0 0 0 / 50%)',
            '--tw-format-invert-th-borders': theme('colors.orange[600]'),
            '--tw-format-invert-td-borders': theme('colors.orange[700]'),
            '--tw-format-invert-th-bg': theme('colors.orange[700]'),
          },
        },
      }),
    },
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
```

Now you can use the `format-red` class and apply these styles.

###### Wrapper class

Change the default `format` class to your own choosing by updating the `tailwind.config.js` file:

```javascript
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography')({
      className: 'custom-class',
    }),
  ]
  ...
}
```

###### Custom CSS

You can also customize the default CSS by extending the `css` key value pair from the Tailwind configuration file:

```javascript
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#666',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
```

##### Blog templates

You can check out the following [blog template](https://flowbite.com/blocks/publisher/blog-templates/) layouts from Flowbite Blocks that use the Typography plugin.

#### Video

Get started with the video component to embed internal video source into a native HTML 5 video player and set custom options such as autoplay or muted to enhance the user experience.

##### Video player

Use this example to create a native browser video player and apply the `w-full` utility class from Tailwind CSS to span the full width of the parent container.

{{< example id="default-video-example" github="typography/video.md" show_dark=true >}}

{{< /example >}}

##### Autoplay

Use the `autoplay` attribute on the video component to automatically start the video when the page has been loaded.

{{< example id="video-autoplay-example" github="typography/video.md" show_dark=true >}}

{{< /example >}}

##### Muted

Use the `muted` attribute together with the `autoplay` option to start the video while the sound is muted.

{{< example id="video-muted-example" github="typography/video.md" show_dark=true >}}

{{< /example >}}

##### Sizes

Set the width and height of the video component using the `w-{size}` and `h-{size}` utility classes from Tailwind CSS.

###### Width

Use the `w-{size}` class to set the width of the video component.

{{< example id="video-width-example" github="typography/video.md" show_dark=true >}}

{{< /example >}}

###### Height

Use the `h-{size}` class to set the height of the video player.

{{< example id="video-height-example" github="typography/video.md" show_dark=true >}}

{{< /example >}}

###### Responsive

Use the following example to make the video responsive across all devices and viewports.

{{< example id="video-responsive-example" github="typography/video.md" show_dark=true >}}

{{< /example >}}

##### Custom styles

Customize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border.

{{< example id="video-customize-example" github="typography/video.md" show_dark=true >}}

{{< /example >}}

### Forms

#### Input field

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.

On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.

##### Input fields

Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.

{{< example id="default-input-field-example" github="forms/input-field.md" show_dark=true >}}

    
        
            First name
            
        
        
            Last name
            
        
        
            Company
            
          
        
            Phone number
            
        
        
            Website URL
            
        
        
            Unique visitors (per month)
            
        
    
    
        Email address
        
     
    
        Password
        
     
    
        Confirm password
        
     
    
        
        
        
        I agree with the terms and conditions.
    
    

{{< /example >}}

##### Input sizes

Use the following examples to apply a small, default or large size for the input fields.

{{< example id="input-field-sizes-example" github="forms/input-field.md" show_dark=true >}}

    Large input
    


    Default input
    


    Small input
    

{{< /example >}}

##### Disabled state

Get started with this example if you want to apply the disabled state to an input field.

{{< example id="input-field-disabled-example" github="forms/input-field.md" show_dark=true >}}


{{< /example >}}

##### Validation

Use the following example to apply validation styles for success and error messages.

{{< example id="input-field-validation-example" github="forms/input-field.md" show_dark=true >}}

  Your name
  
  Well done! Some success message.


  Your name
  
  Oh, snapp! Some error message.

{{< /example >}}

##### Input group

This example can be used to add a descriptive icon or additional text inside the input field.

{{< example id="input-field-group-example" github="forms/input-field.md" show_dark=true >}}
Your Email

  
    
  
  

Username

  
    
  
  

{{< /example >}}

##### Helper text

Use this example to show a helper text below the input field for additional explanation and links.

{{< example id="input-field-helper-example" github="forms/input-field.md" show_dark=true >}}
Your email

We’ll never share your details. Read our Privacy Policy.
{{< /example >}}

##### Search input

Get started with this example where the submit button is positioned inside the input field.

{{< example id="input-field-search-example" github="forms/input-field.md" show_dark=true >}}
   
    Search
    
        
            
        
        
        
    

{{< /example >}}


  {{< requires_js >}}


##### Dropdown input

Use this example to show a dropdown menu right next to the input field.

{{< example id="input-field-dropdown-example" github="forms/input-field.md" show_dark=true iframeHeight="290" >}}

    
        Your Email
        
        
            
            
                Shopping
            
            
                Images
            
            
                News
            
            
                Finance
            
            
        
        
            
            
        
    

{{< /example >}}

#### File input

The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the file input component.

##### File upload example

Get started with a simple file input component to let users upload one single file.

{{< example id="default-file-upload-example" github="forms/file-input.md" show_dark=true >}}
Upload file

{{< /example >}}

##### Helper text

Add a descriptive helper text to inform users the allowed extensions and sizes of the files.

{{< example id="file-upload-helper-example" github="forms/file-input.md" show_dark=true >}}
Upload file

SVG, PNG, JPG or GIF (MAX. 800x400px).
{{< /example >}}

##### Multiple files

Apply the `multiple` attribute to the file input component to allow more files to be uploaded.

{{< example id="file-upload-multiple-example" github="forms/file-input.md" show_dark=true >}}
Upload multiple files

{{< /example >}}

##### Sizes

Choose from the small, default, and large file input sizing options.

{{< example id="file-upload-sizes-example" github="forms/file-input.md" show_dark=true >}}
Small file input


Default size


Large file input

{{< /example >}}

##### Dropzone

The dropzone file input component can be used to upload one or more files by clicking anywhere in the area.

{{< example id="file-upload-dropzone-example" github="forms/file-input.md" show_dark=true >}}

    
        
            
            Click to upload or drag and drop
            SVG, PNG, JPG or GIF (MAX. 800x400px)
        
        
    
 
{{< /example >}}

#### Search input

The search input component can be used to let your users search through your website using string queries and it comes in multiple styles, variants, and sizes built with the utility classes from Tailwind CSS.

You will also find more advanced search components on this page including dropdown category selections, search buttons positioned inside the input field, voice search fields and more.

##### Search bar example

Get started with the default example of a search input component including and icon and submit button.

{{< example id="default-search-bar-example" github="forms/search-input.md" show_dark=true >}}
   
    Search
    
        
            
        
        
        
    

{{< /example >}}


  {{< requires_js >}}


##### Search with dropdown

Use this search component with a dropdown to let your users select a category in which they would like the search query to be targeted in.

{{< example id="search-bar-dropdown-example" github="forms/search-input.md" show_dark=true iframeHeight="290" >}}

    
        Your Email
        
        
            
            
                
            
            
                
            
            
                
            
            
                
            
            
        
        
            
            
        
    

{{< /example >}}

##### Simple search input

Use the simplest form of a search input component with an icon and a search button next to the text field.

{{< example id="search-bar-simple-example" github="forms/search-input.md" show_dark=true >}}
   
    Search
    
        
            
        
        
    
    

{{< /example >}}


  {{< requires_js >}}


##### Location search

Use this example where you can select a country in which you want to search for an address or city.

{{< example id="search-bar-location-example" github="forms/search-input.md" show_dark=true iframeHeight="290" >}}

    
        Your Email
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        
            
            
        
    

{{< /example >}}

##### Voice search

Get started with this example if you would like to enable voice search for your website and users.

{{< example id="search-bar-voice-example" github="forms/search-input.md" show_dark=true >}}
   
    Search
    
        
            
        
        
        
    
    

{{< /example >}}

#### Number input

The number input component from Flowbite can be used to introduce numeric values inside a form such as for a quantity field, a ZIP code, a phone number, your credit card number, and more. All of the UI components are coded exclusively with Tailwind CSS.

The examples on this page have basic functionality coded with JavaScript and the quantity input has a more advanced ability to increment and decrement the value with the help of the `data-input-counter` attribute from the Flowbite JS API.

##### Default number input

Use this component to set a number value inside a form field by applying the `type="number"` attribute.

{{< example id="default-number-input" github="components/number-input.md" show_dark=true >}}

    Select a number:
    

{{< /example >}}

##### ZIP code input

Use this example with an icon and helper text to set a ZIP code value inside a form field by also applying the `pattern` attribute to validate the input using a regular expression for a 5 digit number.

{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true >}}

    ZIP code:
    
        
            
        
        
    
    Please select a 5 digit number from 0 to 9.

{{< /example >}}

##### Phone number

Use this example to set a phone number inside a form field based on the `type="phone"` attribute and a dropdown menu to select the country code.

{{< example id="phone-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="360" >}}

    
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        Phone number:
        
            
        
    

{{< /example >}}

##### Control buttons

Use this example with control buttons to increment and decrement the value inside the input field.

If you have the [Flowbite JS](https://flowbite.com/docs/getting-started/quickstart/) installed in your project then you can use the `data-input-counter` data attribute to initialize the target input field and then use the following data attributes to target the buttons that will increment and decrement the value of the input field:

- `data-input-counter` - initialize the input field
- `data-input-counter-increment` - increment the value of the input field
- `data-input-counter-decrement` - decrement the value of the input field

{{< example id="control-number-input" github="components/number-input.md" show_dark=true >}}

    Choose quantity:
    
        
        
        
    
    Please select a 5 digit number from 0 to 9.

{{< /example >}}

##### Control buttons with icon

Use this example to also add an icon inside the input field to improve the user experience.

{{< example id="control-icon-number-input" github="components/number-input.md" show_dark=true >}}

    Choose quantity:
    
        
        
        
            
            Bedrooms
        
        
    
    Please select the number of bedrooms.

{{< /example >}}

##### Counter input

Use this example as an alternative style to the control buttons example above.

{{< example id="control-icon-number-input" github="components/number-input.md" show_dark=true >}}

    Choose quantity:
    
        
        
        
    

{{< /example >}}

##### Currency input

This component can be used to set a currency value inside a form field when you need to set a price.

{{< example id="control-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" >}}

    Your Email
    
        
            
        
        
    
    
    
        
            
                
            
            
                
            
            
                
            
            
                
            
        
    

{{< /example >}}

##### Credit card input

Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/).

{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="540" >}}

    Card number:
    
        
        
            
        
    
    
        
            
                
            
            Card expiration date:
            
        
        
            Card CVV code:
            
        
    
    

{{< /example >}}

##### Pin code input

Use this example of a pin code input to set a 6 digit code. This can be used when setting up a new account or when making a payment and the code is sent via phone or email.

{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true javascript=`
// use this simple function to automatically focus on the next input
function focusNextInput(el, prevId, nextId) {
    if (el.value.length === 0) {
        if (prevId) {
            document.getElementById(prevId).focus();
        }
    } else {
        if (nextId) {
            document.getElementById(nextId).focus();
        }
    }
}

document.querySelectorAll('[data-focus-input-init]').forEach(function(element) {
    element.addEventListener('keyup', function() {
        const prevId = this.getAttribute('data-focus-input-prev');
        const nextId = this.getAttribute('data-focus-input-next');
        focusNextInput(this, prevId, nextId);
    });
    
// Handle paste event to split the pasted code into each input
    element.addEventListener('paste', function(event) {
        event.preventDefault();
        const pasteData = (event.clipboardData || window.clipboardData).getData('text');
        const digits = pasteData.replace(/\D/g, ''); // Only take numbers from the pasted data

        // Get all input fields
        const inputs = document.querySelectorAll('[data-focus-input-init]');
        
        // Iterate over the inputs and assign values from the pasted string
        inputs.forEach((input, index) => {
            if (digits[index]) {
                input.value = digits[index];
                // Focus the next input after filling the current one
                const nextId = input.getAttribute('data-focus-input-next');
                if (nextId) {
                    document.getElementById(nextId).focus();
                }
            }
        });
    });
});
` >}}

    
        
            First code
            
        
        
            Second code
            
        
        
            Third code
            
        
        
            Fourth code
            
        
        
            Fifth code
            
        
        
            Sixth code
            
        
    
    Please introduce the 6 digit code we sent via email.

{{< /example >}}

##### Number input with slider

This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the [Flowbite Range Slider](https://flowbite.com/docs/components/range-slider/).

{{< example id="zip-code-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" javascript=`
// Get the elements
var rangeInput = document.getElementById('price-range-input');
var currencyInput = document.getElementById('currency-input');

// Function to update the currency input
function updateCurrencyInput() {
currencyInput.value = rangeInput.value;
}

// Add event listener to the range input
rangeInput.addEventListener('input', updateCurrencyInput);
` >}}

    
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        Your Email
        
            
        
    
    
        Default range
        
        Min ($100)
        $500
        $1000
        Max ($1500)
    

{{< /example >}}

##### Convert currency

Use this example of two number input fields and dropdowns to convert currency and even from fiat to crypto.

{{< example id="control-number-input" github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" >}}

    
        
            Your Email
            
                
            
            
            
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
            
        
        
        
            Your Email
            
                
            
            
            
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
            
        
    
    
        Last update: 20:45 AM, November 20, 2023
        
    

{{< /example >}}

##### Advanced control buttons

This example can be used to add multiple number input fields with quantity selectors and control buttons to use for E-commerce UI similar to projects like AirBnb or Booking.

{{< example id="control-icon-number-input" github="components/number-input.md" show_dark=true >}}

    Choose bedrooms number:
    
        
        
        
            
            Bedrooms
        
        
    
    Choose number of nights:
    
        
        
        
            
            Night stays
        
        
    
    Choose guests:
    
        
        
        
            
            Guests
        
        
    

{{< /example >}}

##### Min and max values

By using the InputCounter object from the Flowbite JS API, you ca set the min and max values of a number input component by using the following data attributes:

- `data-input-counter-min` - set the minimum value of the input
- `data-input-counter-max` - set the maximum value of the input

These values will be enforced and validated whenever the user clicks on one of the buttons or tries to introduce the value manually.

{{< example id="control-number-min-max-input" github="components/number-input.md" show_dark=true >}}

    Choose quantity:
    
        
        
        
    
    Please select a 5 digit number from 0 to 9.

{{< /example >}}

##### JavaScript behaviour

Use the **InputCounter** object from the Flowbite JS API to create a number input component with increment and decrement buttons that can be used to increase or decrease the value of the input.

###### Object parameters

Use the object parameters from the InputCounter object to set the target, increment, and decrement elements as well as the options object.


  
      
          
              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          
      
      
          
              
                  targetEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the target input field element that will be incremented or decremented based on click event.
              
          
          
              
                  incrementEl
              
              
                  Element
              
              
                  Optional
              
              
                  Pass the increment button element that will increase the value of the target element based on click event.
              
          
          
              
                  decrementEl
              
              
                  Element
              
              
                  Optional
              
              
                  Pass the decrement button element that will decrease the value of the target element based on click event.
              
          
          
              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Set these options to set the minimum and maximum value of the input field and the callback functions.
              
          
          
                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            
      
  


###### Options

Use these optional options for the InputCounter object to set the minimum and maximum values of the input field and also to set callback functions for the increment and decrement events.


  
      
          
              
                  Option
              
              
                  Type
              
              
                  Description
              
          
      
      
          
              
                  minValue
              
              
                  Integer
              
              
                  Set the minimum value of the input field.
              
          
          
              
                  maxValue
              
              
                  Integer
              
              
                  Set the maximum value of the input field.
              
          
          
              
                  onIncrement
              
              
                  Function
              
              
                  Set a callback function when the item has been incremented.
              
          
          
              
                  onDecrement
              
              
                  Function
              
              
                  Set a callback function when the item has been decremented.
              
          
      
  


###### Methods

Use the following methods of the InputCounter object to programmatically manipulate the behaviour of the input field.


  
      
          
              
                  Method
              
              
                  Description
              
          
      
      
        
              
                  getCurrentValue()
              
              
                  Use this method to get the current value of the input field.
              
          
          
              
                  increment()
              
              
                  Use this method on the InputCounter object to increment the value of the input field.
              
          
          
              
                  decrement()
              
              
                  Use this method on the InputCounter object to decrement the value of the input field.
              
          
          
              
                  updateOnIncrement(callback)
              
              
                  Use this method to set a callback function whenever the input field has been incremented.
              
          
          
              
                  updateOnDecrement(callback)
              
              
                  Use this method to set a callback function whenever the input field has been decremented.
              
          
      
  


###### Example

Check out the following examples to learn how to create a new InputCounter object and how to set it up with custom options and programmatically use the methods available.

First of all, you need to set the object parameters where the target element is required and the other two are optional.

```javascript
// set the target element of the input field
const $targetEl = document.getElementById('counter-input-example');

// optionally set the increment and decrement elements
const $incrementEl = document.getElementById('increment-button');

const $decrementEl = document.getElementById('decrement-button');

// optional options with default values and callback functions
const options = {
    minValue: 0,
    maxValue: null, // infinite
    onIncrement: () => {
        console.log('input field value has been incremented');
    },
    onDecrement: () => {
        console.log('input field value has been decremented');
    }
};

const instanceOptions = {
  id: 'counter-input-example',
  override: true
};
```

Next step is to create a new instance of a InputCounter object using the parameters we have set above.

```javascript
import { InputCounter } from 'flowbite';

/*
 * $targetEl: required
 * $incrementEl: optional
 * $decrementEl: optional
 * options: optional
 */
const counterInput = new InputCounter($targetEl, $incrementEl, $decrementEl, options, instanceOptions);
```

Now you can programmatically increment or decrement the input field using the methods of the InputCounter object.

```javascript
// get the current value of the input field
counterInput.getCurrentValue();

// increment the value of the input field
counterInput.increment();

// decrement the value of the input field
counterInput.decrement();
```

###### HTML Markup

Here is an example of the HTML markup that you can use for the JavaScript example above.

```html

    Choose quantity:
    
        
        
        
    

```

###### TypeScript

If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the InputCounter object, parameters and its options.

Here's an example that applies the types from Flowbite to the code above:

```javascript
import { InputCounter } from 'flowbite';
import type { InputCounterOptions, InputCounterInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the target element of the input field
const $targetEl: HTMLInputElement = document.getElementById('counter-input-example') as HTMLInputElement;

// optionally set the increment and decrement elements
const $incrementEl: HTMLElement = document.getElementById('increment-button');

const $decrementEl: HTMLElement = document.getElementById('decrement-button');

// optional options with default values and callback functions
const options: InputCounterOptions = {
    minValue: 0,
    maxValue: null, // infinite
    onIncrement: () => {
        console.log('input field value has been incremented');
    },
    onDecrement: () => {
        console.log('input field value has been decremented');
    }
};

// instance options object
const instanceOptions: InstanceOptions = {
  id: 'counter-input-example',
  override: true
};

/*
 * $targetEl: required
 * $incrementEl: optional
 * $decrementEl: optional
 * options: optional
 * instanceOptions: optional
 */
const counterInput: InputCounterInterface = new InputCounter(
    $targetEl,
    $incrementEl,
    $decrementEl,
    options,
    instanceOptions
);

// increment the value of the input field
counterInput.increment();

// decrement the value of the input field
counterInput.decrement();
```

#### Phone input

The phone number input component from Flowbite can be used to set a phone number inside a form field by using the native `type="tel"` attribute and also use a dropdown menu to select the country code.

The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.

##### Default phone input

Use this component to set a phone number inside an input field by setting the `type="tel"` attribute.

{{< example id="default-phone-number-input" github="components/phone-input.md" show_dark=true >}}

    Phone number:
    
        
            
        
        
    
    Select a phone number that matches the format.

{{< /example >}}

##### Phone input country code

This example can be used to select the country code from a dropdown menu and set the phone number inside an input field and use the `pattern` attribute to validate the phone number.

{{< example id="phone-code-number-input" github="components/phone-input.md" show_dark=true iframeHeight="360" >}}

    
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        Phone number:
        
            
        
    

{{< /example >}}

##### Floating label input

Set a phone number inside an input field with a floating label inspired by Material UI from Google.

{{< example id="floating-label-phone-example" github="forms/phone-input.md" show_dark=true >}}

    
        
            
        
        
        Phone number
    

{{< /example >}}

##### Verification code input

Use this example to send a verification code to the user's phone number for authentication.

{{< example id="phone-verification-number-input" github="components/phone-input.md" show_dark=true iframeHeight="360" disable_init_js="true" >}}

    
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        Phone number:
        
            
        
    
    We will send you an SMS with a verification code.
    

{{< /example >}}

##### Phone number select

Use this example to select one of your saved phone numbers from an application with a copy-paste feature.

{{< example id="phone-select-number-input" github="components/phone-input.md" show_dark=true disable_init_js="true" javascript=`
window.addEventListener('load', function() {
    const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'phone-numbers');
    const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-phone');

    const $defaultIcon = document.getElementById('copy-icon');
    const $successIcon = document.getElementById('copy-icon-success');

    const $defaultTooltipMessage = document.getElementById('tooltip-text');
    const $successTooltipMessage = document.getElementById('tooltip-text-success');

    clipboard.updateOnCopyCallback((clipboard) => {
        showSuccess();

        // reset to default state
        setTimeout(() => {
            resetToDefault();
        }, 2000);
    })

    const showSuccess = () => {
        $defaultIcon.classList.add('hidden');
        $successIcon.classList.remove('hidden');
        $defaultTooltipMessage.classList.add('hidden');
        $successTooltipMessage.classList.remove('hidden');    
        tooltip.show();
    }

    const resetToDefault = () => {
        $defaultIcon.classList.remove('hidden');
        $successIcon.classList.add('hidden');
        $defaultTooltipMessage.classList.remove('hidden');
        $successTooltipMessage.classList.add('hidden');
        tooltip.hide();
    }
});
` >}}

    
        Primary phone number:
        Manage numbers
    
    
        
            
        
        
        
            Copy number
            Copied!
            
        
    
    Please set your primary phone number.

{{< /example >}}

##### Authentication form

Use this example to authenticate users with a login form using a phone number instead of an email address.

{{< example id="phone-auth-number-input" github="components/phone-input.md" show_dark=true iframeHeight="390" disable_init_js="true" >}}

    Phone number:
    
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        
            
        
    
        
        Your password
        
    
    
        
        I accept the Terms and Conditions
    
    

{{< /example >}}

##### Advanced phone verification

Use this example to verify a phone number via SMS or phone call using a dropdown component.

{{< example id="phone-code-alt-number-input" github="components/phone-input.md" show_dark=true iframeHeight="360" disable_init_js="true" >}}

    
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        Phone number:
        
            
        
        
        
            
                
                    
                
                
                    
                
            
        
    
    

{{< /example >}}

#### Select

The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.

##### Select input example

Get started with the default example of a select input component to get a single option selection.

{{< example id="default-select-example" github="forms/select.md" show_dark=true >}}

  Select an option
  

{{< /example >}}

##### Multiple options

Apply the `multiple` attribute to the select component to allow users to select one or more options.

{{< example id="select-multiple-example" github="forms/select.md" show_dark=true >}}

  Select an option
  

{{< /example >}}

##### Size attribute

Use the size attribute for the select component to specify the number of visible options in the list.

{{< example id="select-size-example" github="forms/select.md" show_dark=true >}}

  Select an option
  

{{< /example >}}

##### Disabled state

Apply the `disable` state to the select component to disallow the selection of new options.

{{< example id="select-disabled-example" github="forms/select.md" show_dark=true >}}

  Select an option
  

{{< /example >}}

##### Underline select

Use the underline style for the select component as an alternative appearance.

{{< example id="select-underline-example" github="forms/select.md" show_dark=true >}}

  Underline select
  

{{< /example >}}


  {{< requires_js >}}


##### Select with dropdown

Use this example if you want to create a multi-level dropdown and select component combination.

{{< example id="select-dropdown-example" github="forms/select.md" show_dark=true iframeHeight="300" >}}

  
      
      
          
              
                  
              
              
                  
              
              
                  
              
              
                  
              
          
      
      Choose a state
      
  

{{< /example >}}

##### Sizes

Get started with the small, default, and large sizes for the select component from the example below.

{{< example id="select-sizes-example" github="forms/select.md" show_dark=true >}}

  Small select
  
  Default select
  
  Large select
  

{{< /example >}}

#### Textarea

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.

From the examples on this page you will find multiple styles and variants of the textarea component coded with the utility classes from Tailwind CSS including a WYSIWYG editor, comment box, chatroom textarea, all available in dark mode as well. 

##### Textarea example

Get started with the default example of a textarea component below.

{{< example id="default-textarea-example" github="forms/textarea.md" show_dark=true >}}
Your message

{{< /example >}}

##### WYSIWYG Editor

If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.

{{< example id="textarea-wysiwyg-example" github="forms/textarea.md" show_dark=true >}}

   
       
           
               
                   
                   
                   
                   
                   
               
               
                   
                   
                   
                   
               
           
           
           
               Show full screen
               
           
       
       
           Publish post
           
       
   
   

{{< /example >}}

##### Comment box

Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.

{{< example id="textarea-comment-example" github="forms/textarea.md" show_dark=true >}}

   
       
           Your comment
           
       
       
           
           
               
               
               
           
       
   

Remember, contributions to this topic should follow our Community Guidelines.
{{< /example >}}

##### Chatroom input

If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.

{{< example id="textarea-chatroom-example" github="forms/textarea.md" show_dark=true >}}

    Your message
    
        
        
        
            
    

{{< /example >}}

#### Timepicker

The timepicker component from Flowbite can be used to choose the hours and minutes of a given day through the usage of input fields such as the native HTML time field or even checkbox fields with predefined time interval which are popularly used for calendar event creation.

The examples on this page are all built with Tailwind CSS and some of the examples require you to install the Flowbite JavaScript dependency to make the interactive UI components functional such as the datepicker, dropdowns, modals and the drawers.

The timepicker component is often used together with a datepicker so the more advanced examples on this page show you a combination of these two components where you can select both the date (year, month and day) and then the time of the day for the event.

##### Default timepicker

Use this example to show a simple input field with the native browser timepicker.

{{< example id="timepicker-default-example" github="components/timepicker.md" show_dark=true >}}

    Select time:
    
        
            
        
        
    

{{< /example >}}

##### Timepicker with icon

This example can be used to select a time via an input field where you can add an icon to the input group.

{{< example id="timepicker-input-group-example" github="components/timepicker.md" show_dark=true >}}

    Select time:
    
        
        
            
        
    

{{< /example >}}

##### Timepicker with dropdown

Use this example to show a timepicker together with a dropdown menu where you can add options such as selecting the timezone or the duration of an event in minutes or hours.

{{< example id="timepicker-dropdown-example" github="components/timepicker.md" iframeHeight="300" show_dark=true >}}

    Select time:
    
        
        
        
            
                
                    
                
                
                    
                
                
                    
                
            
        
    

{{< /example >}}

##### Timepicker with select

Use this example to show a select input next to the timepicker to select an option like a timezone.

{{< example id="timepicker-select-example" class="flex justify-center" github="components/timepicker.md" show_dark=true >}}

    Select time:
    
        
        
    

{{< /example >}}

##### Timepicker range selector

Use this example to select a time interval using two input field often used for the duration of an event.

{{< example id="timepicker-range-selector-example" github="components/timepicker.md" show_dark=true >}}

    
        Start time:
        
            
                
            
            
        
    
    
        End time:
        
            
                
            
            
        
    

{{< /example >}}

##### Timerange with dropdown

This example can be used to show the timerange picker inside a dropdown only when clicking on a button.

{{< example id="timepicker-range-selector-dropdown-example" class="flex justify-center items-center" github="components/timepicker.md" show_dark=true iframeHeight="260" javascript=`
const dropdown = FlowbiteInstances.getInstance('Dropdown', 'dropdownTimepicker');
const $saveTimeButton = document.getElementById('saveTimeButton');

$saveTimeButton.addEventListener('click', function() {
    // save time code and then hide the dropdown
    dropdown.hide();
});
` >}}




    
        
            Start time:
            
                
                    
                
                
            
        
        
            End time:
            
                
                    
                
                
            
        
    
    

{{< /example >}}

##### Timerange picker with toggle

Use this example to show or hide the timepicker when clicking on an trigger element.

{{< example id="timepicker-range-selector-dropdown-example" class="flex items-center justify-center" github="components/timepicker.md" show_dark=true iframeHeight="190" >}}

    
    
        
            Start time:
            
                
                    
                
                
            
        
        
            End time:
            
                
                    
                
                
            
        
    

{{< /example >}}

##### Inline timepicker buttons

This is an advanced example that you can use to show the details of an event and select a date of the event based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select the time using a predefined set of time intervals based on checkbox elements.

{{< example id="timepicker-inline-example" github="components/timepicker.md" show_dark=true >}}
Digital Transformation

   
      
      30.06.2024
   
   
      
      California, USA
   


   
      Participants
      
         
         
         
         +99
      
   
   
      Duration
      30 min
   
   
      Meeting Type
      Web conference
   


   
   
      Wednesday 30 June 2024
      
      
      Pick a time
      
      
         
            
            
            10:00 AM
            
         
         
            
            
            10:30 AM
            
         
         
            
            
            11:00 AM
            
         
         
            
            
            11:30 AM
            
         
         
            
            
            12:00 AM
            
         
         
            
            
            12:30 PM
            
         
         
            
            
            01:00 PM
            
         
         
            
            
            01:30 PM
            
         
         
            
            
            02:00 PM
            
         
         
            
            
            02:30 PM
            
         
         
            
            
            03:00 PM
            
         
         
            
            
            03:30 PM
            
         
      
   

{{< /example >}}

##### Modal with timepicker

Use this example to select a date and time inside of a modal component based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select a time interval using checkbox elements with predefined time values for event time scheduling.

{{< example id="timepicker-modal-example" github="components/timepicker.md" class="flex justify-center" show_dark=true iframeHeight="880" >}}




    
        
        
            
            
                
                    Schedule an appointment
                
                
            
            
            
                
                
                Pick your time
                
                
                    
                        
                        
                        10:00 AM
                        
                    
                    
                        
                        
                        10:30 AM
                        
                    
                    
                        
                        
                        11:00 AM
                        
                    
                    
                        
                        
                        11:30 AM
                        
                    
                    
                        
                        
                        12:00 AM
                        
                    
                    
                        
                        
                        12:30 PM
                        
                    
                    
                        
                        
                        01:00 PM
                        
                    
                    
                        
                        
                        01:30 PM
                        
                    
                    
                        
                        
                        02:00 PM
                        
                    
                    
                        
                        
                        02:30 PM
                        
                    
                    
                        
                        
                        03:00 PM
                        
                    
                    
                        
                        
                        03:30 PM
                        
                    
                
                
                    
                    
                
            
        
    

{{< /example >}}

##### Drawer with timepicker

Use this example to show multiple time interval selections inside of a drawer component to schedule time based on multiple entries (ie. days of the week) using the native browser time selection input element.

{{< example id="timepicker-drawer-example" github="components/timepicker.md" class="flex justify-center" show_dark=true iframeHeight="880" >}}


   



   Time schedule
   
   
      
         
            Business hours
            
               
               
               Business hours
            
         
         Enable or disable business working hours for all weekly working days
      
      
         
            Select a timezone
            
            
               Select a timezone that fits your location to accurately display time-related information.
               
            
         
         
      
      
         
            
               
               Mon
            
            
               Start time:
               
                  
                     
                  
                  
               
            
            
               End time:
               
                  
                     
                  
                  
               
            
            
               
            
         
      
      
         
            
               
               Tue
            
            
               Start time:
               
                  
                     
                  
                  
               
            
            
               End time:
               
                  
                     
                  
                  
               
            
            
               
            
         
      
      
         
            
               
               Wed
            
            
               Start time:
               
                  
                     
                  
                  
               
            
            
               End time:
               
                  
                     
                  
                  
               
            
            
               
            
         
      
      
         
            
               
               Thu
            
            
               Start time:
               
                  
                     
                  
                  
               
            
            
               End time:
               
                  
                     
                  
                  
               
            
            
               
            
         
      
      
         
            
               
               Fri
            
            
               Start time:
               
                  
                     
                  
                  
               
            
            
               End time:
               
                  
                     
                  
                  
               
            
            
               
            
         
      
      
      
         
         
      
   

{{< /example >}}

#### Checkbox

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.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the checkbox component.

##### Checkbox example

Use this default example of a checkbox element in a checked and unchecked state.

{{< example id="default-checkbox-example" github="forms/checkbox.md" show_dark=true >}}

    
    Default checkbox


    
    Checked state

{{< /example >}}

##### Disabled state

This example can be used for the disabled state of the checkbox component by applying the `disabled` attribute to the input element.

{{< example id="disabled-checkbox-example" github="forms/checkbox.md" show_dark=true >}}

    
    Disabled checkbox


    
    Disabled checked

{{< /example >}}

##### Checkbox link

Use this example if you want to add an anchor link inside the label of the checkbox component.

{{< example id="checkbox-link-example" github="forms/checkbox.md" show_dark=true >}}

    
    I agree with the terms and conditions.

{{< /example >}}

##### Helper text

Get started with this example if you want to add a secondary helper text for the checkbox component.

{{< example id="checkbox-helper-example" github="forms/checkbox.md" show_dark=true >}}

    
        
    
    
        Free shipping via Flowbite
        For orders shipped from $25 in books or $29 in other categories
    

{{< /example >}}

##### Bordered

Use this example of a checkbox inside a card element to enable a larger area of clicking activation.

{{< example id="checkbox-bordered-example" class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}

    
    Default radio


    
    Checked state

{{< /example >}}

##### Checkbox list group

Use this example to show a list of checkbox items grouped inside a card.

{{< example id="checkbox-list-example" github="components/radio.md" show_dark=true >}}
Technology

    
        
            
            Vue JS
        
    
    
        
            
            React
        
    
    
        
            
            Angular
        
    
    
        
            
            Laravel
        
    

{{< /example >}}

##### Horizontal list group

Use this example to show a list of checkbox items inside a card horizontally.

{{< example id="checkbox-horizontal-list-example" github="components/radio.md" show_dark=true >}}
Identification

    
        
            
            Vue JS
        
    
    
        
            
            React
        
    
    
        
            
            Angular
        
    
    
        
            
            Laravel
        
    

{{< /example >}}


  {{< requires_js >}}


##### Checkbox dropdown

Use this example to show a list of checkbox items inside a dropdown menu.

{{< example id="checkbox-dropdown-example" class="flex justify-center" github="components/dropdowns.md" show_dark=true iframeHeight="430" >}}




    
      Search
      
        
          
        
        
      
    
    
      
        
          
          Bonnie Green
        
      
      
        
            
            Jese Leos
          
      
      
        
          
          Michael Gough
        
      
      
        
          
          Robert Wall
        
      
      
        
          
          Joseph Mcfall
        
      
      
        
          
          Leslie Livingston
        
      
            
        
          
          Roberta Casas
        
      
    
    
      
      Delete user
  

{{< /example >}}

##### Inline layout

You can align the checkbox elements horizontally by using a wrapper tag and applying the `flex` class.

{{< example id="checkbox-inline-example" github="forms/checkbox.md" show_dark=true >}}

    
        
        Inline 1
    
    
        
        Inline 2
    
    
        
        Inline checked
    
    
        
        Inline disabled
    

{{< /example >}}

##### Colors

Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of the checkbox component.

{{< example id="checkbox-colors-example" class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}

    
    Red


    
    Green


    
    Purple


    
    Teal


    
    Yellow


    
    Orange

{{< /example >}}

##### Advanced layout

Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.

{{< example id="checkbox-advanced-example" class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
Choose technology:

    
        
                                   
            
                
                React Js
                A JavaScript library for building user interfaces.
            
        
    
    
        
        
            
                
                Vue Js
                Vue.js is an model–view front end JavaScript framework.
            
        
    
    
        
        
            
                
                Angular
                A TypeScript-based web application framework.
            
        
    

{{< /example >}}

#### Radio

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.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the radio component.

##### Radio example

Use the default example of a radio component with the checked and unchecked state.

{{< example id="default-radio-example" github="forms/radio.md" show_dark=true >}}

    
    Default radio


    
    Checked state

{{< /example >}}

##### Disabled state

Apply the `disabled` attribute to the radio component to disallow the selection for the user.

{{< example id="radio-disabled-example" github="forms/radio.md" show_dark=true >}}

    
    Disabled radio


    
    Disabled checked

{{< /example >}}

##### Radio link

Use this example if you want to include an anchor tag inside the label of the radio component.

{{< example id="radio-link-example" github="forms/radio.md" show_dark=true >}}

    
    Radio button with a link inside.

{{< /example >}}

##### Helper text

Get started with this example if you want to add a secondary text to the label for the radio component.

{{< example id="radio-helper-example" github="forms/radio.md" show_dark=true >}}

    
        
    
    
        Free shipping via Flowbite
        For orders shipped from $25 in books or $29 in other categories
    

{{< /example >}}

##### Bordered

Use this example to show a radio input elements inside a card with border.

{{< example id="radio-bordered-example" class="grid gap-6 md:grid-cols-2" github="forms/radio.md" show_dark=true >}}

    
    Default radio


    
    Checked state

{{< /example >}}

##### Radio list group

This example can be used to show a list of radio buttons inside a grouped list.

{{< example id="radio-list-group-example" github="components/radio.md" show_dark=true >}}
Identification

    
        
            
            Driver License 
        
    
    
        
            
            State ID
        
    
    
        
            
            US Military
        
    
    
        
            
            US Passport
        
    

{{< /example >}}

##### Horizontal list group

Use this example to group up radio button components inside a list.

{{< example id="radio-horizontal-list-example" github="components/radio.md" show_dark=true >}}
Identification

    
        
            
            Driver License 
        
    
    
        
            
            State ID
        
    
    
        
            
            US Military
        
    
    
        
            
            US Passport
        
    

{{< /example >}}


  {{< requires_js >}}


##### Radio in dropdown

Here's an example of a list group that you can use right away.

{{< example id="radio-dropdown-example" class="flex justify-center" github="components/radio.md" show_dark=true iframeHeight="370" >}}




    
      
        
          
              
          
          
              
                Individual
                Some helpful instruction goes over here.
              
          
        
      
      
        
          
              
          
          
              
                Company
                Some helpful instruction goes over here.
              
          
        
      
      
        
          
              
          
          
              
                Non profit
                Some helpful instruction goes over here.
              
          
        
      
    

{{< /example >}}

##### Inline layout

Use the `flex` class for a wrapper element to horizontally align the radio elements.

{{< example id="radio-inline-example" github="forms/radio.md" show_dark=true >}}

    
        
        Inline 1
    
    
        
        Inline 2
    
    
        
        Inline checked
    
    
        
        Inline disabled
    

{{< /example >}}

##### Advanced layout

Use this example of a more advanced radio component to add more information and update the style of the whole card instead of just the circled dot.

{{< example id="radio-advanced-example" class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}
How much do you expect to use each month?

    
        
                                   
            
                0-50 MB
                Good for small websites
            
            
        
    
    
        
        
            
                500-1000 MB
                Good for large websites
            
            
        
    

{{< /example >}}

##### Colors

Apply the `text-{color}-{shade}` utility class from Tailwind CSS to change the color of the radio component.

{{< example id="radio-colors-example" github="forms/radio.md" show_dark=true >}}

    
        
        Red
    
    
        
        Green
    
    
        
        Purple
    
    
        
        Teal
    
    
        
        Yellow
    
    
        
        Orange
    

{{< /example >}}

#### Toggle

The toggle component can be used to receive a simple "yes" or "no" type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.

##### Toggle example

Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.

{{< example id="default-toggle-example" class="flex justify-center" github="forms/toggle.md" show_dark=true >}}

  
  
  Toggle me

{{< /example >}}

##### Checked state

Apply the `checked` attribute to the toggle component to activate the selection by default.

{{< example id="toggle-checked-example" class="flex justify-center" github="forms/toggle.md" show_dark=true >}}

  
  
  Checked toggle

{{< /example >}}

##### Disabled state

Apply the `disabled` attribute to disallow the users from making any further selections.

{{< example id="toggle-disabled-example" class="flex flex-col flex-wrap items-center" github="forms/toggle.md" show_dark=true >}}

  
  
  Disabled toggle



  
  
  Disabled checked

{{< /example >}}

##### Colors

Change the color of the toggle component by updating the color classes of `peer-focus` and `peer-checked`.

{{< example id="toggle-colors-example" class="flex inline-flex-wrap justify-center" github="forms/toggle.md" show_dark=true >}}

  
  
  Red



  
  
  Green



  
  
  Purple



  
  
  Yellow



  
  
  Teal



  
  
  Orange

{{< /example >}}

##### Sizes

Get started with small, default, or large sizes of the toggle component based on your needs.

{{< example id="toggle-sizes-example" class="flex flex-col flex-wrap items-center" github="forms/toggle.md" show_dark=true >}}

  
  
  Small toggle



  
  
  Default toggle



  
  
  Large toggle

{{< /example >}}

#### Range

The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.

The examples on this page are all coded with Tailwind CSS and requires you to install Flowbite as a plugin inside your project to obtain all the necessary stylings.

##### Range slider example

Get started with this default example with values from 1 to 100 and the default value of 50.

{{< example id="default-range-example" github="forms/range.md" show_dark=true >}}
Default range

{{< /example >}}

##### Disabled state

Apply the `disabled` class to disallow the users from further selecting values.

{{< example id="range-disabled-example" github="forms/range.md" show_dark=true >}}
Default range

{{< /example >}}

##### Min and max

Use the min and max attributes on the range component to set the limits of the range values.

{{< example id="range-minmax-example" github="forms/range.md" show_dark=true >}}
Min-max range

{{< /example >}}

##### Steps

Use the step attribute on the range component to set the increment with which the values will change.

{{< example id="range-steps-example" github="forms/range.md" show_dark=true >}}
Range steps

{{< /example >}}

##### Sizes

Apply the small, default, and large sizes for the range component by applying the `range-sm` and `range-lg` utility classes from Flowbite and Tailwind CSS.

{{< example id="range-sizes-example" github="forms/range.md" show_dark=true >}}
Small range


Default range


Large range

{{< /example >}}

##### Labels

Use the following example to add labels to each value milestone of the range slider component.

{{< example id="range-labels-example" github="forms/range.md" show_dark=true >}}

    Labels range
    
    Min ($100)
    $500
    $1000
    Max ($1500)

{{< /example >}}

#### Floating label

The floating label style was first pioneered by Google in its infamous Material UI design system and it's basically a label tag which floats just above the input field when it is being focused or already has content inside.

On this page you will find a three different input field styles including a standard, outlined, and filled style including validation styles and sizes coded with Tailwind CSS and supported for dark mode.

##### Floating label example

Get started with the following three styles for the floating label component and use the `label` tag as a visual placeholder using the `peer-placeholder-shown` and `peer-focus` utility classes from Tailwind CSS.

{{< example id="default-floating-label-example" class="grid items-end w-full gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}

    
    Floating filled


    
    Floating outlined


    
    Floating standard

{{< /example >}}

##### Disabled state

Apply the `disabled` attribute to the input fields to disallow the user from changing the content.

{{< example id="floating-label-disabled-example" class="grid items-end gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}

    
    Disabled filled


    
    Disabled outlined


    
    Disabled standard

{{< /example >}}

##### Validation

Use the following examples of input validation for the success and error messages by applying the validation text below the input field and using the green or red color classes from Tailwind CSS.

{{< example id="floating-label-validation-example" github="forms/floating-label.md" show_dark=true >}}


    
        
            
            Filled success
        
        Well done! Some success message.
    
       
        
            
            Outlined success
        
        Well done! Some success message.    
    
    
        
            
            Standard success
        
        Well done! Some success message.
    




    
        
            
            Filled error
        
        Oh, snapp! Some error message.
    
       
        
            
            Outlined error
        
        Oh, snapp! Some error message.    
    
    
        
            
            Standard error
        
        Oh, snapp! Some error message.
    

{{< /example >}}

##### Sizes

Use the small and default sizes of the floating label input fields from the following example.

{{< example id="floating-label-sizes-example" github="forms/floating-label.md" show_dark=true >}}

    
        
        Small filled
    
    
        
        Small outlined
    
    
        
        Small standard
    


    
        
        Default filled
    
    
        
        Default outlined
    
    
        
        Default standard
    

{{< /example >}}

##### Helper text

Add a helper text in addition to the label if you want to show more information below the input field.

{{< example id="floating-label-helper-example" github="forms/floating-label.md" show_dark=true >}}

    
    Floating helper

Remember, contributions to this topic should follow our Community Guidelines.
{{< /example >}}

### Typography

#### Headings

Get started with the heading component to define titles and subtitles on a web page and also improve the on-page SEO metrics of your website by targeting high-traffic keywords on Google.

At least one unique H1 tag should be available for each page on your website with the next tags starting from H2 to H6 for each section. Choose from a collection of custom heading components based on multiple styles and layouts built with the utility classes from Tailwind CSS.

##### Default heading

Use this example of a H1 heading in the context of a paragraph and CTA button for landing pages.

{{< example id="default-heading-example" class="text-center" github="typography/headings.md" show_dark=true >}}
We invest in the world’s potential
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

    Learn more
    

{{< /example >}}

##### Second-level heading

Use this example of a second-level H2 heading as the main subtitle for each section of your web page.

{{< example id="second-level-heading-example" github="typography/headings.md" show_dark=true >}}
Payments tool for companies
Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease.

Read more


{{< /example >}}

##### Highlighted heading

Use this example to highlight a certain portion of the heading text with a different color.

{{< example id="highlighted-heading-example" github="typography/headings.md" show_dark=true >}}
Get back to growth with the world's #1 CRM.
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
{{< /example >}}

##### Heading mark

This example can be used to mark one part of the heading text with a solid background for highlighting.

{{< example id="heading-mark-example" github="typography/headings.md" show_dark=true >}}
Regain control over your days
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
{{< /example >}}

##### Heading gradient

Use this example to highlight a portion of the heading text by using a gradient style.

{{< example id="heading-gradient-example" github="typography/headings.md" show_dark=true >}}
Better Data Scalable AI.
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
{{< /example >}}

##### Heading underline

Get started with this example to underline an important part of the heading component using the offset feature from Tailwind CSS.

{{< example id="heading-underline-example" github="typography/headings.md" show_dark=true >}}
We invest in the world’s potential
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
{{< /example >}}

##### Breadcrumb context

Get started with this example to position a breadcrumb component above the H1 heading component.

{{< example id="heading-breadcrumb-example" github="typography/headings.md" show_dark=true >}}

  
    
      
        
        Home
      
    
    
      
        
        Projects
      
    
    
      
        
        Flowbite
      
    
  

Team management
{{< /example >}}

##### Badge context

Use this example to show a badge component inside the heading text element as a secondary indicator.

{{< example id="heading-badge-example" github="typography/headings.md" show_dark=true >}}
FlowbitePRO
{{< /example >}}

##### Secondary text

This example can be used to add a secondary text inside the main heading component.

{{< example id="heading-neutral-secondary-example" github="typography/headings.md" show_dark=true >}}
FlowbiteThis is secondary text
{{< /example >}}

##### Sizes

The heading component has six levels of importance starting from H1 which has to be unique on the page and has the greatest weight of importance all the way to H6.

###### Heading one (H1)

Use the H1 tag as the most important text element to indicate the title of your web page.

{{< example id="heading-one-example" github="typography/headings.md" show_dark=true >}}
Heading 1
{{< /example >}}

###### Heading two (H2)

The H2 tag can be used as subtitles of the page's sections.

{{< example id="heading-two-example" github="typography/headings.md" show_dark=true >}}
Heading 2
{{< /example >}}

###### Heading three (H3)

Use the H3 tags inside sections that already have a H2 available.

{{< example id="heading-three-example" github="typography/headings.md" show_dark=true >}}
Heading 3
{{< /example >}}

###### Heading four (H4)

The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.

{{< example id="heading-four-example" github="typography/headings.md" show_dark=true >}}
Heading 4
{{< /example >}}

###### Heading five (H5)

The H5 tag is most often used in longer articles with other heading already available or in sidebars.

{{< example id="heading-five-example" github="typography/headings.md" show_dark=true >}}
Heading 5
{{< /example >}}

###### Heading six (H6)

Using the H6 tag is quite rare because it means that you've already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.

{{< example id="heading-six-example" github="typography/headings.md" show_dark=true >}}
Heading 6
{{< /example >}}

#### Paragraphs

The paragraph element is one of the most commonly used HTML tags on a document page because it is used to write longer blocks of text separated by a blank line and can massively improve the on-page SEO of the page when used correctly.

Get started with a collection of paragraph components based on multiple styles, layouts, colors and sizes to use for your website built with the utility classes from Tailwind CSS.

##### Default paragraph

Use this example of a paragraph element to use inside article content or a landing page.

{{< example id="default-paragraph-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}


##### Leading paragraph

The leading text can be used as the first paragraph inside an article content page.

{{< example id="paragraph-leading-example" github="typography/paragraphs.md" show_dark=true >}}
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy.
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

##### First letter

Use this example to highlight the first letter of the paragraph, often used in e-books and PDF documents.

{{< example id="paragraph-first-letter-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

##### Paragraph link

This example can be used to add a custom styled link element inside the paragraph.

{{< example id="paragraph-link-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

##### Paragraph bold

Use this example to highlight a piece of text inside the paragraph by using a bolder font weight.

{{< example id="paragraph-bold-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

##### Paragraph underline

This example can be used to underline a certain part of the text inside the paragraph.

{{< example id="paragraph-underline-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

##### Paragraph italic

Use this example to make the font style of the text inside the paragraph italic.

{{< example id="paragraph-italic-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

##### Paragraph popover

Get started with this example to show a popover with extra information inside paragraph elements.

{{< example id="paragraph-popover-example" class="pt-60" github="typography/paragraphs.md" show_dark=true >}}
Due to its central geographic location in Southern Europe, Italy has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy

    
        
            
                About Italy
                Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also considered part of Western Europe. A unitary parliamentary republic with Rome as its capital and largest city.
                Read more 
            
        
        
    
    

{{< /example >}}

##### Layout

Get started with examples of layouts for the paragraph component to separate content into multiple rows and columns.

###### One column

Use this example to show multiple paragraphs on a single line.

{{< example id="paragraph-one-column-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

###### Two columns even

Use this example to separate paragraphs into two columns for better readability.

{{< example id="paragraphs-two-columns-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
    Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

###### Three columns even

This example can be used to separate paragraphs into three separate columns.

{{< example id="paragraphs-three-columns-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
    Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
    Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

###### Two columns uneven

Use this example to separate paragraphs into two uneven columns.

{{< example id="paragraphs-two-columns-uneven-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

    
        Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
        Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
    
    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

##### Text alignment

Align the paragraph component to the left (default), center or right side of the document page using the `text-{left|center|right}` utility class from Tailwind CSS.

###### Left

The default alignment of the paragraph is to the left side and you can use the `text-left` class to align it manually.

{{< example id="paragraph-left-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

###### Center

Use the `text-center` class to align the paragraph text to the center.

{{< example id="paragraph-center-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

###### Right

Use the `text-right` utility class to align the paragraph text the right side of the page.

{{< example id="paragraph-right-example" github="typography/paragraphs.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

#### Blockquote

Get started with a collection of blockquote components when quoting external sources such as quotes inside an article, user reviews, and testimonials based on multiple examples of layouts, styles, and contexts.

The main `` HTML tag can be used together with the `` tag or attribute to also mention the source of the quote content.

##### Default blockquote

Use this example to quote an external source inside a blockquote element.

{{< example id="default-blockquote-example" github="typography/blockquote.md" show_dark=true >}}

    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

##### Solid background

This example can be used as an alternative style to the default one by applying a solid background color.

{{< example id="blockquote-background-example" github="typography/blockquote.md" show_dark=true >}}

Does your user know how to exit out of screens? Can they follow your intended user journey and buy something from the site you’ve designed? By running a usability test, you’ll be able to see how users will interact with your design once it’s live.


    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."


First of all you need to understand how Flowbite works. This library is not another framework. Rather, it is a set of components based on Tailwind CSS that you can just copy-paste from the documentation.

{{< /example >}}

##### Blockquote icon

Use this example to show an icon above the blockquote text content.

{{< example id="blockquote-icon-example" github="typography/blockquote.md" show_dark=true >}}

    
    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

##### Paragraph context

Use this example to show a blockquote component between multiple paragraph elements.

{{< example id="blockquote-paragraph-example" github="typography/blockquote.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

    Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
    
        " Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application. "
    

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

##### User testimonial

This example can be used for user testimonials by mentioning the author and occupation of the author.

{{< example id="blockquote-testimonial-example" github="typography/blockquote.md" show_dark=true >}}

    
    
        "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
    
    
        
        
            Michael Gough
            CEO at Google
        
    

{{< /example >}}

##### User Review

Use this example to show a user review with rating stars and the name and occupation of the author.

{{< example id="blockquote-review-example" github="typography/blockquote.md" show_dark=true >}}

    
        
        
        
        
        
    
    
        "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."
    
    
        
        
            Bonnie Green
            CTO at Flowbite
        
    

{{< /example >}}

##### Alignment

Choose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.

###### Left

The default alignment of the blockquote text content is the left side of the document.

{{< example id="default-blockquote-left-example" github="typography/blockquote.md" show_dark=true >}}

    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

###### Center

Use the `text-center` class from Tailwind CSS to align the text content inside the blockquote to the center.

{{< example id="default-blockquote-center-example" github="typography/blockquote.md" show_dark=true >}}

    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

###### Right

Use the `text-right` utility class from Tailwind CSS to align the blockquote text content to the right side of the page.

{{< example id="default-blockquote-right-example" github="typography/blockquote.md" show_dark=true >}}

    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

##### Sizes

Choose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.

###### Small

Use the `text-lg` font size class from Tailwind CSS to apply the small size for the blockquote component.

{{< example id="default-blockquote-small-example" github="typography/blockquote.md" show_dark=true >}}

    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

###### Medium

Use the `text-xl` utility class to set the default size for the blockquote element.

{{< example id="default-blockquote-medium-example" github="typography/blockquote.md" show_dark=true >}}

    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

###### Large

The `text-2xl` class can be used to set a large size for the blockquote component.

{{< example id="default-blockquote-large-example" github="typography/blockquote.md" show_dark=true >}}

    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

#### Image

Get started with a collection of responsive image components coded with the utility classes from Tailwind CSS that you can use inside articles, cards, sections, and other components based on multiple styles, sizes, layouts, and hover animations.

##### Default image

Use this example to show the a responsive image that won't grow beyond the maximum original width.

{{< example id="default-image-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

{{< /example >}}

##### Image caption

This example can be used to add a caption for the image often used inside articles.

{{< example id="image-caption-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

  
  Image caption

{{< /example >}}

##### Rounded corners

Apply rounded corners to the image by using the specific utility classes from Tailwind CSS.

###### Border radius

Use this example to apply rounded corners to the image by using the `rounded-{size}` class where the size can be anything from small to extra large.

{{< example id="image-rounded-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

{{< /example >}}

###### Full circle

Use this example to mask the image inside a circle using the `rounded-full` utility class from Tailwind CSS.

{{< example id="image-rounded-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

{{< /example >}}

##### Image shadow

This example can be used to show a shadow effect for the image using the `shadow-{size}` utility class.

{{< example id="image-shadow-example" class="flex justify-center pb-8" github="typography/images.md" show_dark=true >}}

{{< /example >}}

##### Retina-ready

Use the `srcset` attribute to set Retina-ready images with double resolution.

{{< example id="image-retina-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

{{< /example >}}

##### Image card

Use this example to make the image a card item with a link and a short text description.

{{< example id="image-card-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

  
    
  
  
      Do you want to get notified when a new component is added to Flowbite?
  

{{< /example >}}

##### Image effects

Use image effects such as grayscale or blur to change the appearances of the image when being hovered.

###### Grayscale

Use the filter option and apply a grayscale to the image element using the `grayscale` class.

{{< example id="image-grayscale-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

{{< /example >}}

###### Blur

Apply a blur by using the `blur-{size}` utility class from Tailwind CSS to an image component.

{{< example id="image-blur-example" class="flex justify-center" github="typography/images.md" show_dark=true >}}

{{< /example >}}

##### Alignment

Align the image component to the left, center or right side of the document page using margin styles.

###### Left

By default, the image component will be aligned to the left side of the page.

{{< example id="image-left-example" github="typography/images.md" show_dark=true >}}

{{< /example >}}

###### Center

Horizontally align the image to the center of the page using the `mx-auto` class.

{{< example id="image-center-example" github="typography/images.md" show_dark=true >}}

{{< /example >}}

###### Right

Use the `ml-auto` (or `ms-auto`) class to align the image to the right side of the page.

{{< example id="image-right-example" github="typography/images.md" show_dark=true >}}

{{< /example >}}

##### Sizes

Set the size of the image using the `w-{size}` and `h-{size}` or `max-w-{size}` utility classes from Tailwind CSS to set the width and height of the element.

###### Small

Use the `max-w-xs` class to set a small size of the image.

{{< example id="image-small-example" github="typography/images.md" show_dark=true >}}

{{< /example >}}

###### Medium

Use the `max-w-md` class to set a medium size of the image.

{{< example id="image-medium-example" github="typography/images.md" show_dark=true >}}

{{< /example >}}

###### Large

Use the `max-w-xl` class to set a large size of the image.

{{< example id="image-large-example" github="typography/images.md" show_dark=true >}}

{{< /example >}}

###### Full width

Use the `max-w-full` class to set the full width of the image as long as it doesn't become larger than the original source.

{{< example id="image-full-example" github="typography/images.md" show_dark=true >}}

{{< /example >}}

#### Lists

Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.

##### Unordered list

Use this example to create a default unordered list of items using the `list-disc` class.

{{< example id="unordered-list-example" github="typography/lists.md" show_dark=true >}}
Password requirements:

    
        At least 10 characters (and up to 100 characters)
    
    
        At least one lowercase character
    
    
        Inclusion of at least one special character, e.g., ! @ # ?
    

{{< /example >}}

###### Icons

This example can be used to apply custom icons instead of the default bullets for the list items.

{{< example id="unordered-list-icon-example" github="typography/lists.md" show_dark=true >}}
Password requirements:

    
        
        At least 10 characters
    
    
        
        At least one lowercase character
    
    
        
        At least one special character, e.g., ! @ # ?
    

{{< /example >}}

###### Nested

Use this example to nested another list of items inside the parent list element.

{{< example id="unordered-list-nested-example" github="typography/lists.md" show_dark=true >}}

    
        List item one
        
            You might feel like you are being really "organized" o
            Nested navigation in UIs is a bad idea too, keep things as flat as possible.
            Nesting tons of folders in your source code is also not helpful.
        
    
    
        List item two
        
            I'm not sure if we'll bother styling more than two levels deep.
            Two is already too much, three is guaranteed to be a bad idea.
            If you nest four levels deep you belong in prison.
        
    
    
        List item three
        
            Again please don't nest lists if you want
            Nobody wants to look at this.
            I'm upset that we even have to bother styling this.
        
    

{{< /example >}}

###### Unstyled

Use the `list-none` class to disable the list style bullets or numbers.

{{< example id="unordered-list-unstyled-example" github="typography/lists.md" show_dark=true >}}
Password requirements:

    
        At least 10 characters (and up to 100 characters)
    
    
        At least one lowercase character
    
    
        Inclusion of at least one special character, e.g., ! @ # ?
    

{{< /example >}}

##### Ordered list

Use the `` tag to create an ordered list of items with numbers.

{{< example id="ordered-list-example" github="typography/lists.md" show_dark=true >}}
Top students:

    
        Bonnie Green with 70 points
    
    
        Jese Leos with 63 points
    
    
        Leslie Livingston with 57 points
    

{{< /example >}}

###### Nested

This example can be used to nest multiple lists into each other.

{{< example id="ordered-list-nested-example" github="typography/lists.md" show_dark=true >}}

   
      List item one
      
         You might feel like you are being really "organized" o
         Nested navigation in UIs is a bad idea too, keep things as flat as possible.
         Nesting tons of folders in your source code is also not helpful.
      
   
   
      List item two
      
         I'm not sure if we'll bother styling more than two levels deep.
         Two is already too much, three is guaranteed to be a bad idea.
         If you nest four levels deep you belong in prison.
      
   
   
      List item three
      
         Again please don't nest lists if you want
         Nobody wants to look at this.
         I'm upset that we even have to bother styling this.
      
   

{{< /example >}}

##### Description list

Create a description list by using the `` tag and set the term and name with the following example.

{{< example id="description-list-example" github="typography/lists.md" show_dark=true >}}

    
        Email address
        yourname@flowbite.com
    
    
        Home address
        92 Miles Drive, Newark, NJ 07103, California, USA
    
    
        Phone number
        +00 123 456 789 / +12 345 678
    

{{< /example >}}

##### List with icons

Use this example to create a list of items with [custom SVG icons](https://flowbite.com/icons/) instead of the default bullets.

{{< example id="list-icons-example" github="typography/lists.md" show_dark=true >}}

    
         
        Individual configuration
    
    
        
        No setup, or hidden fees
    
    
        
        Team size: 1 developer
    
    
        
        Premium support: 6 months
    
    
        
        Free updates: 6 months
    

{{< /example >}}

##### Advanced layout

This example can be used to show more details for each list item such as the user's name, email and profile picture.

{{< example id="list-advanced-layout-example" github="typography/lists.md" show_dark=true >}}

   
      
         
            
         
         
            
               Neil Sims
            
            
               email@flowbite.com
            
         
         
            $320
         
      
   
   
      
         
            
         
         
            
               Bonnie Green
            
            
               email@flowbite.com
            
         
         
            $3467
         
      
   
   
      
         
            
         
         
            
               Michael Gough
            
            
               email@flowbite.com
            
         
         
            $67
         
      
   
   
      
         
            
         
         
            
               Thomas Lean
            
            
               email@flowbite.com
            
         
         
            $2367
         
      
   
   
      
         
            
         
         
            
               Lana Byrd
            
            
               email@flowbite.com
            
         
         
            $367
         
      
   

{{< /example >}}

##### Horizontal list

Use this example to create a horizontally aligned list of items.

{{< example id="horizontal-list-example" github="typography/lists.md" show_dark=true >}}

    
        About
    
    
        Premium
    
    
        Campaigns
    
    
        Blog
    
    
        Affiliate Program
    
    
        FAQs
    
    
        Contact
    

{{< /example >}}

#### Links

Get started with the link component to enable hyperlinks across pages and external websites applied to elements such as inline text, buttons, cards, inside paragraphs, and more.

Hyperlinks are a great way to reduce bounce rate of the current page and encourage visitors to browse your website and become a returning user.

##### Default link

Use this example to set default styles to an inline link element.

{{< example id="default-link-example" class="flex justify-center" github="typography/links.md" show_dark=true >}}
Read more
{{< /example >}}

##### Button

This example can be used to set a hyperlink on a button component.

{{< example id="link-button-example" class="flex justify-center" github="typography/links.md" show_dark=true >}}
Read more
{{< /example >}}

##### Paragraph

Use this example to set a link inside a paragraph with an underline style.

{{< example id="paragraph-link-example" github="typography/links.md" show_dark=true >}}
The free updates that will be provided is based on the roadmap that we have laid out for this project. It is also possible that we will provide extra updates outside of the roadmap as well.
{{< /example >}}

##### Icon link

This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) inside the hyperlink element.

{{< example id="link-icon-example" class="flex justify-center" github="typography/links.md" show_dark=true >}}
500,000 people & companies have made over a million apps with Glide. 
Read their stories



{{< /example >}}

##### CTA link

Use this example to set a hyperlink on a CTA element with text and a custom icon.

{{< example id="link-cta-example" class="flex justify-center" github="typography/links.md" show_dark=true >}}

                                                  
    Get started with our  Figma Design System
    
 
{{< /example >}}

##### Card link

Use this example to set a hyperlink on a card component.

{{< example id="link-card-example" class="flex justify-center" github="typography/links.md" show_dark=true >}}

    Noteworthy technology acquisitions 2021
    Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

{{< /example >}}

##### Image link

This example can be used to set a hyperlink on an image inside a card component.

{{< example id="link-image-example" class="flex justify-center" github="typography/links.md" show_dark=true >}}

    
        
    
    
        
            Noteworthy technology acquisitions 2021
        
        Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
        
            Read more
            
        
    

{{< /example >}}

#### Text

Get started with a collection of text customization examples to learn how to update the size, font weight, style, decoration and spacing of inline text elements using Tailwind CSS.

##### Font size

Use this example to set the font size of inline text elements using the `text-{size}` class.

{{< example id="font-size-example" class="flex items-center space-x-4 rtl:space-x-reverse" github="typography/text.md" show_dark=true >}}
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
{{< /example >}}

##### Font weight

This example can be used to the font weight of an inline text element using the `font-{size}` class.

{{< example id="font-weight-example" class="flex items-center space-x-8 rtl:space-x-reverse" github="typography/text.md" show_dark=true >}}
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
{{< /example >}}

##### Text color

Use the `text-{color}` classes from Tailwind CSS to set the color of the inline text.

{{< example id="text-color-example" class="space-y-2" github="typography/text.md" show_dark=true >}}
This text is in the blue color.
This text is in the green color.
This text is in the red color.
This text is in the purple color.
This text is in the teal color.
{{< /example >}}

##### Letter spacing

Increase or decrease the spacing between letters using the `tracking-{type}` class.

{{< example id="letter-spacing-example" class="space-y-3" github="typography/text.md" show_dark=true >}}
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
{{< /example >}}

##### Text Decoration

Set decoration for the inline text elements such as underline, line through or uppercase using classes from Tailwind CSS.

###### Underline

Underline text by using the `underline` class or disable it using `no-underline`.

{{< example id="text-underline-example" github="typography/text.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

###### Line through

Set a strikethrough line on a text element using the `line-through` class.

{{< example id="text-line-through-example" github="typography/text.md" show_dark=true >}}
$109$79
{{< /example >}}

###### Uppercase

Force uppercase characters for a given portion of text using the `uppercase` class.

{{< example id="text-uppercase-example" github="typography/text.md" show_dark=true >}}
The crypto identity primitive.
{{< /example >}}

##### Font style

Set italic or non italic styles with the utility classes from Tailwind CSS.

###### Italic

Use the `italic` class from Tailwind CSS to set italic font style to a text element.

{{< example id="text-italic-example" github="typography/text.md" show_dark=true >}}
The crypto identity primitive.
{{< /example >}}

###### Normal

Text elements by default are non-italic.

{{< example id="text-normal-example" github="typography/text.md" show_dark=true >}}
The crypto identity primitive.
{{< /example >}}

##### Line Height

Set the height between lines using the `leading-{type}` classes from Tailwind CSS.

###### Leading normal

Use the `leading-normal` class to set default line height.

{{< example id="font-leading-normal-example" github="typography/text.md" show_dark=true >}}
The Al-powered app will help you improve yourself by analysing your everyday life.
{{< /example >}}

###### Leading relaxed

Use the `leading-relaxed` class to increase the space between lines.

{{< example id="leading-relaxed-example" github="typography/text.md" show_dark=true >}}
The Al-powered app will help you improve yourself by analysing your everyday life.
{{< /example >}}

###### Leading loose

Use the `leading-loose` class to set a large amount of space between text lines.

{{< example id="leading-loose-example" github="typography/text.md" show_dark=true >}}
The Al-powered app will help you improve yourself by analysing your everyday life.
{{< /example >}}

##### Text Align

Use the following examples to align the text content to the left, center, or right side of the page.

###### Left

Use the `text-left` class to align the text to the left side of the page.

{{< example id="text-left-example" github="typography/text.md" show_dark=true >}}
Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library
{{< /example >}}

###### Center

Use the `text-center` class to align the text content to the center of the page.

{{< example id="text-center-example" github="typography/text.md" show_dark=true >}}
Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library
{{< /example >}}

###### Right

Use the `text-right` class to align the text element to the right side of the page.

{{< example id="text-right-example" github="typography/text.md" show_dark=true >}}
Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library
{{< /example >}}

###### Text justify

Use the `text-justify` class to justify the text content.

{{< example id="text-justify-example" github="typography/text.md" show_dark=true >}}
Get started with an enterprise-level, professionally designed, fully responsive, and HTML semantic set of web pages, sections and over 400+ components crafted with the utility classes from Tailwind CSS and based on the Flowbite component library
{{< /example >}}

##### Whitespace

Configure the whitespace behaviour of inline text elements using classes from Tailwind CSS.

###### Normal

Use the `whitespace-normal` class to set the default whitespace behaviour.

{{< example id="whitespace-normal-example" github="typography/text.md" show_dark=true >}}

This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

{{< /example >}}

###### Nowrap

Use the `whitespace-nowrap` class to prevent text being added to a new line when the full width has been reached.

{{< example id="whitespace-nowrap-example" github="typography/text.md" show_dark=true >}}

This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

{{< /example >}}

###### Pre line

Use the `whitespace-pre-line` class to add whitespace exactly how it has been set from the source code.

{{< example id="whitespace-preline-example" github="typography/text.md" show_dark=true >}}

This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.

{{< /example >}}

##### Text Decoration Style

Update the text decoration style using the `decoration-{*}` classes from Tailwind CSS.

{{< example id="text-decoration-style-example" github="typography/text.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.
{{< /example >}}

##### Opacity

Use the `text-{color}-{opacity}` class from Tailwind CSS to set the opacity of inline text elements.

{{< example id="text-opacity-example" class="space-y-3" github="typography/text.md" show_dark=true >}}
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
Flowbite app will help you improve yourself by analysing your everyday life.
{{< /example >}}

#### HR (Horizontal Line)

The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.

##### Default HR

Use this example to separate text content with a `` horizontal line.

{{< example id="default-hr-example" github="typography/hr.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

##### Trimmed

Use this example to show a shorter version of the horizontal line.

{{< example id="hr-trimmed-example" github="typography/hr.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.
{{< /example >}}

##### Icon HR

This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.

{{< example id="hr-icon-example" class="text-center" github="typography/hr.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

    
    
        
    

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.
{{< /example >}}

##### HR with text

Use this example to add a text in the middle of the HR component.

{{< example id="hr-text-example" class="text-center" github="typography/hr.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

    
    or

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.
{{< /example >}}

##### HR shape

This example can be used to separate content with a HR tag as a shape instead of a line.

{{< example id="hr-shape-example" github="typography/hr.md" show_dark=true >}}
Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.


    "Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

{{< /example >}}

### Plugins

#### Charts

The chart components from the Flowbite Library are open-source under the MIT license and they are styled with the utility classes from Tailwind CSS and based on the open-source [ApexCharts](https://apexcharts.com/) library.

We provide an extensive collection of responsive chart types such as area, bar, column, pie, and radial that can help you visualize complex data inside graphs in admin dashboard layouts, analytics, diagrams, and more.

You can also easily customize the colors, sizes, and options of these charts either via Tailwind CSS directly or via the JavaScript options from the ApexCharts library. Dark mode is also supported by default.

##### Getting started

Before continuing make sure that you have Tailwind CSS, Flowbite and ApexCharts installed in your project.

1. Follow the }}">quickstart guide from Flowbite to install the plugin styles and functionality

2. Make sure that you have ApexCharts installed and configured in your project:

Install ApexChart via NPM and save it in your `package.json` file:

```bash
npm install apexcharts@3.46.0 --save
``` 

Alternatively, you can also just include the CDN link:

```html

```

Now that you have all the libraries installed you can copy-paste the chart examples below in your code.

##### Area chart

Use this example to show a basic area chart by setting the `type: "area"` option in JavaScript:

{{< example id="default-area-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
  chart: {
    height: "100%",
    maxWidth: "100%",
    type: "area",
    fontFamily: "Inter, sans-serif",
    dropShadow: {
      enabled: false,
    },
    toolbar: {
      show: false,
    },
  },
  tooltip: {
    enabled: true,
    x: {
      show: false,
    },
  },
  fill: {
    type: "gradient",
    gradient: {
      opacityFrom: 0.55,
      opacityTo: 0,
      shade: "#1C64F2",
      gradientToColors: ["#1C64F2"],
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: 6,
  },
  grid: {
    show: false,
    strokeDashArray: 4,
    padding: {
      left: 2,
      right: 2,
      top: 0
    },
  },
  series: [
    {
      name: "New users",
      data: [6500, 6418, 6456, 6526, 6356, 6456],
      color: "#1A56DB",
    },
  ],
  xaxis: {
    categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
    labels: {
      show: false,
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  yaxis: {
    show: false,
  },
}

if (document.getElementById("area-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.getElementById("area-chart"), options);
  chart.render();
}
` >}}

  
    
      32.4k
      Users this week
    
    
      12%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Users Report
        
      
    
  

{{< /example >}}

##### Line chart

To create a double line chart check the example below by setting the chart type to `type: "line"` and copy the HTML markup and JS options to automatically style and populate the chart with data:

{{< example id="line-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
  chart: {
    height: "100%",
    maxWidth: "100%",
    type: "line",
    fontFamily: "Inter, sans-serif",
    dropShadow: {
      enabled: false,
    },
    toolbar: {
      show: false,
    },
  },
  tooltip: {
    enabled: true,
    x: {
      show: false,
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: 6,
  },
  grid: {
    show: true,
    strokeDashArray: 4,
    padding: {
      left: 2,
      right: 2,
      top: -26
    },
  },
  series: [
    {
      name: "Clicks",
      data: [6500, 6418, 6456, 6526, 6356, 6456],
      color: "#1A56DB",
    },
    {
      name: "CPC",
      data: [6456, 6356, 6526, 6332, 6418, 6500],
      color: "#7E3AF2",
    },
  ],
  legend: {
    show: false
  },
  stroke: {
    curve: 'smooth'
  },
  xaxis: {
    categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb'],
    labels: {
      show: true,
      style: {
        fontFamily: "Inter, sans-serif",
        cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
      }
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  yaxis: {
    show: false,
  },
}

if (document.getElementById("line-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.getElementById("line-chart"), options);
  chart.render();
}
` >}}

  
    
      
        Clicks
          
          
              
                  Clicks growth - Incremental
                  Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.
                  Calculation
                  For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.
                  Read more 
              
              
          
        
        42,3k
      
      
        CPC
        
          
              
                  CPC growth - Incremental
                  Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.
                  Calculation
                  For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.
                  Read more 
              
              
          
        
        $5.40
      
    
    
      
    
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
    
  
  
  
          
      
        
        View full report
      
    
  

{{< /example >}}

##### Column chart

You can represent multiple data entries using columns by setting the `type: "bar"` option and also by updating the `horizontal` key value to `false` in JavaScript to adjust them vertically as columns:

{{< example id="column-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
  colors: ["#1A56DB", "#FDBA8C"],
  series: [
    {
      name: "Organic",
      color: "#1A56DB",
      data: [
        { x: "Mon", y: 231 },
        { x: "Tue", y: 122 },
        { x: "Wed", y: 63 },
        { x: "Thu", y: 421 },
        { x: "Fri", y: 122 },
        { x: "Sat", y: 323 },
        { x: "Sun", y: 111 },
      ],
    },
    {
      name: "Social media",
      color: "#FDBA8C",
      data: [
        { x: "Mon", y: 232 },
        { x: "Tue", y: 113 },
        { x: "Wed", y: 341 },
        { x: "Thu", y: 224 },
        { x: "Fri", y: 522 },
        { x: "Sat", y: 411 },
        { x: "Sun", y: 243 },
      ],
    },
  ],
  chart: {
    type: "bar",
    height: "320px",
    fontFamily: "Inter, sans-serif",
    toolbar: {
      show: false,
    },
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: "70%",
      borderRadiusApplication: "end",
      borderRadius: 8,
    },
  },
  tooltip: {
    shared: true,
    intersect: false,
    style: {
      fontFamily: "Inter, sans-serif",
    },
  },
  states: {
    hover: {
      filter: {
        type: "darken",
        value: 1,
      },
    },
  },
  stroke: {
    show: true,
    width: 0,
    colors: ["transparent"],
  },
  grid: {
    show: false,
    strokeDashArray: 4,
    padding: {
      left: 2,
      right: 2,
      top: -14
    },
  },
  dataLabels: {
    enabled: false,
  },
  legend: {
    show: false,
  },
  xaxis: {
    floating: false,
    labels: {
      show: true,
      style: {
        fontFamily: "Inter, sans-serif",
        cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
      }
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  yaxis: {
    show: false,
  },
  fill: {
    opacity: 1,
  },
}

if(document.getElementById("column-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.getElementById("column-chart"), options);
  chart.render();
}
` >}}

  
    
      
        
      
      
        3.4k
        Leads generated per week
      
    
    
      
        
        42.5%
      
    
  

  
    
        Money spent:
        $3,232
    
    
        Conversion rate:
        1.2%
    
  

  
    
      
        
        
        
        
            
              
                Yesterday
              
              
                Today
              
              
                Last 7 days
              
              
                Last 30 days
              
              
                Last 90 days
              
            
        
        
          Leads Report
          
        
      
    

{{< /example >}}

##### Bar chart

Create a horizontal bar chart with as many data series as you like by setting the `type: "bar"` chart type via JavaScript and copy the example below into your project. You can enable or disable the labels on the X or Y axis by setting `show` to `false` for the `xaxis` and `yaxis` objects of the chart options.

{{< example id="bar-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
  series: [
    {
      name: "Income",
      color: "#31C48D",
      data: ["1420", "1620", "1820", "1420", "1650", "2120"],
    },
    {
      name: "Expense",
      data: ["788", "810", "866", "788", "1100", "1200"],
      color: "#F05252",
    }
  ],
  chart: {
    sparkline: {
      enabled: false,
    },
    type: "bar",
    width: "100%",
    height: 400,
    toolbar: {
      show: false,
    }
  },
  fill: {
    opacity: 1,
  },
  plotOptions: {
    bar: {
      horizontal: true,
      columnWidth: "100%",
      borderRadiusApplication: "end",
      borderRadius: 6,
      dataLabels: {
        position: "top",
      },
    },
  },
  legend: {
    show: true,
    position: "bottom",
  },
  dataLabels: {
    enabled: false,
  },
  tooltip: {
    shared: true,
    intersect: false,
    formatter: function (value) {
      return "$" + value
    }
  },
  xaxis: {
    labels: {
      show: true,
      style: {
        fontFamily: "Inter, sans-serif",
        cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
      },
      formatter: function(value) {
        return "$" + value
      }
    },
    categories: ["Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    axisTicks: {
      show: false,
    },
    axisBorder: {
      show: false,
    },
  },
  yaxis: {
    labels: {
      show: true,
      style: {
        fontFamily: "Inter, sans-serif",
        cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
      }
    }
  },
  grid: {
    show: true,
    strokeDashArray: 4,
    padding: {
      left: 2,
      right: 2,
      top: -20
    },
  },
  fill: {
    opacity: 1,
  }
}

if(document.getElementById("bar-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.getElementById("bar-chart"), options);
  chart.render();
}
` >}}

  
    
      Profit
      $5,405
    
    
      
        
        Profit rate 23.5%
      
    
  

  
    
      Income
      $23,635
    
    
      Expense
      -$18,230
    
  

  
    
      
        
        
        
        
            
              
                Yesterday
              
              
                Today
              
              
                Last 7 days
              
              
                Last 30 days
              
              
                Last 90 days
              
              
                Last 6 months
              
              
                Last year
              
            
        
        
          Revenue Report
          
        
      
    

{{< /example >}}

##### Pie chart

Create a pie chart with multiple data series by setting the `type: "pie"` chart type option via JavaScript and copy the following HTML markup code and options from below:

{{< example id="pie-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const getChartOptions = () => {
  return {
    series: [52.8, 26.8, 20.4],
    colors: ["#1C64F2", "#16BDCA", "#9061F9"],
    chart: {
      height: 420,
      width: "100%",
      type: "pie",
    },
    stroke: {
      colors: ["white"],
      lineCap: "",
    },
    plotOptions: {
      pie: {
        labels: {
          show: true,
        },
        size: "100%",
        dataLabels: {
          offset: -25
        }
      },
    },
    labels: ["Direct", "Organic search", "Referrals"],
    dataLabels: {
      enabled: true,
      style: {
        fontFamily: "Inter, sans-serif",
      },
    },
    legend: {
      position: "bottom",
      fontFamily: "Inter, sans-serif",
    },
    yaxis: {
      labels: {
        formatter: function (value) {
          return value + "%"
        },
      },
    },
    xaxis: {
      labels: {
        formatter: function (value) {
          return value  + "%"
        },
      },
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
  }
}

if (document.getElementById("pie-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.getElementById("pie-chart"), getChartOptions());
  chart.render();
}
` >}}


  
      
        
            Website traffic
            
            
                
                    Activity growth - Incremental
                    Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.
                    Calculation
                    For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.
                    Read more 
            
            
        
      
      
      
          
            
                
                  
                      
                  
                  
                
                to
                
                  
                      
                  
                  
              
            
          
      
    
    
      
      
          
            
              Edit widget
              
            
            
              Download data
              
            
            
              Add to repository
              
            
            
              Delete widget
              
            
          
    
  
  

  
  

  
    
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Traffic analysis
        
      
    
  

{{< /example >}}

##### Donut chart

Set the JavaScript API option to `type: "donut"` to create a donut chart and copy the options from the example below to style the elements such as the data series, legends and labels for the X and Y axis.

In this example we also show how you can set event listeners on the UI components from Flowbite to update the data series from the chart by clicking the device checkboxes.

{{< example id="donut-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const getChartOptions = () => {
  return {
    series: [35.1, 23.5, 2.4, 5.4],
    colors: ["#1C64F2", "#16BDCA", "#FDBA8C", "#E74694"],
    chart: {
      height: 320,
      width: "100%",
      type: "donut",
    },
    stroke: {
      colors: ["transparent"],
      lineCap: "",
    },
    plotOptions: {
      pie: {
        donut: {
          labels: {
            show: true,
            name: {
              show: true,
              fontFamily: "Inter, sans-serif",
              offsetY: 20,
            },
            total: {
              showAlways: true,
              show: true,
              label: "Unique visitors",
              fontFamily: "Inter, sans-serif",
              formatter: function (w) {
                const sum = w.globals.seriesTotals.reduce((a, b) => {
                  return a + b
                }, 0)
                return '$' + sum + 'k'
              },
            },
            value: {
              show: true,
              fontFamily: "Inter, sans-serif",
              offsetY: -20,
              formatter: function (value) {
                return value + "k"
              },
            },
          },
          size: "80%",
        },
      },
    },
    grid: {
      padding: {
        top: -2,
      },
    },
    labels: ["Direct", "Sponsor", "Affiliate", "Email marketing"],
    dataLabels: {
      enabled: false,
    },
    legend: {
      position: "bottom",
      fontFamily: "Inter, sans-serif",
    },
    yaxis: {
      labels: {
        formatter: function (value) {
          return value + "k"
        },
      },
    },
    xaxis: {
      labels: {
        formatter: function (value) {
          return value  + "k"
        },
      },
      axisTicks: {
        show: false,
      },
      axisBorder: {
        show: false,
      },
    },
  }
}

if (document.getElementById("donut-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.getElementById("donut-chart"), getChartOptions());
  chart.render();

  // Get all the checkboxes by their class name
  const checkboxes = document.querySelectorAll('#devices input[type="checkbox"]');

  // Function to handle the checkbox change event
  function handleCheckboxChange(event, chart) {
      const checkbox = event.target;
      if (checkbox.checked) {
          switch(checkbox.value) {
            case 'desktop':
              chart.updateSeries([15.1, 22.5, 4.4, 8.4]);
              break;
            case 'tablet':
              chart.updateSeries([25.1, 26.5, 1.4, 3.4]);
              break;
            case 'mobile':
              chart.updateSeries([45.1, 27.5, 8.4, 2.4]);
              break;
            default:
              chart.updateSeries([55.1, 28.5, 1.4, 5.4]);
          }

      } else {
          chart.updateSeries([35.1, 23.5, 2.4, 5.4]);
      }
  }

  // Attach the event listener to each checkbox
  checkboxes.forEach((checkbox) => {
      checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));
  });
}
` >}}

  
  
      
          Website traffic
          
          
              
                  Activity growth - Incremental
                  Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.
                  Calculation
                  For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.
                  Read more 
              
              
          
        
      
        
        
            Download CSV
            
        
      
  

  
    
      
          
          Desktop
      
      
          
          Tablet
      
      
          
          Mobile
      
    
  

  
  

  
    
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Traffic analysis
        
      
    
  

{{< /example >}}

##### Radial chart

To create a radial chart with multiple data entries you need to set the `type: "radialBar"` when initialising a new chart and introduce multiple series and labels to the options and copy the following code:

{{< example id="radial-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const getChartOptions = () => {
  return {
    series: [90, 85, 70],
    colors: ["#1C64F2", "#16BDCA", "#FDBA8C"],
    chart: {
      height: "350px",
      width: "100%",
      type: "radialBar",
      sparkline: {
        enabled: true,
      },
    },
    plotOptions: {
      radialBar: {
        track: {
          background: '#E5E7EB',
        },
        dataLabels: {
          show: false,
        },
        hollow: {
          margin: 0,
          size: "32%",
        }
      },
    },
    grid: {
      show: false,
      strokeDashArray: 4,
      padding: {
        left: 2,
        right: 2,
        top: -23,
        bottom: -20,
      },
    },
    labels: ["Done", "In progress", "To do"],
    legend: {
      show: true,
      position: "bottom",
      fontFamily: "Inter, sans-serif",
    },
    tooltip: {
      enabled: true,
      x: {
        show: false,
      },
    },
    yaxis: {
      show: false,
      labels: {
        formatter: function (value) {
          return value + '%';
        }
      }
    }
  }
}

if (document.getElementById("radial-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.querySelector("#radial-chart"), getChartOptions());
  chart.render();
}
` >}}

  
    
      
        Your team's progress
        
        
            
                Activity growth - Incremental
                Report helps navigate cumulative growth of community activities. Ideally, the chart should have a growing trend, as stagnating chart signifies a significant decrease of community activity.
                Calculation
                For each date bucket, the all-time volume of activities is calculated. This means that activities in period n contain all activities up to period n, plus the activities generated by your community in period.
                Read more 
            
            
        
      
    
  

  
    
      
        12
        To do
      
      
        23
        In progress
      
      
        64
        Done
      
    
    
    
      
        Average task completion rate:
        
           57%
        
      
      
        Days until sprint ends:
        13 days
      
      
        Next meeting:
        Thursday
      
    
  

  
  

  
    
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Progress report
        
      
    
  

{{< /example >}}

##### Options

Learn more about how you can customize the charts including the data, labels, legend indicators, size and appearance of the graphs, and other options by checking out the examples below.

###### Data series

You can add multiple data sets by using the `series` object and setting a name, array of data and custom color of choice. In this example we added two data series based on a blue and purple color.

{{< example id="data-series-chart" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
// add data series via arrays, learn more here: https://apexcharts.com/docs/series/
series: [
  {
    name: "Developer Edition",
    data: [1500, 1418, 1456, 1526, 1356, 1256],
    color: "#1A56DB",
  },
  {
    name: "Designer Edition",
    data: [643, 413, 765, 412, 1423, 1731],
    color: "#7E3BF2",
  },
],
chart: {
  height: "100%",
  maxWidth: "100%",
  type: "area",
  fontFamily: "Inter, sans-serif",
  dropShadow: {
    enabled: false,
  },
  toolbar: {
    show: false,
  },
},
tooltip: {
  enabled: true,
  x: {
    show: false,
  },
},
legend: {
  show: false
},
fill: {
  type: "gradient",
  gradient: {
    opacityFrom: 0.55,
    opacityTo: 0,
    shade: "#1C64F2",
    gradientToColors: ["#1C64F2"],
  },
},
dataLabels: {
  enabled: false,
},
stroke: {
  width: 6,
},
grid: {
  show: false,
  strokeDashArray: 4,
  padding: {
    left: 2,
    right: 2,
    top: 0
  },
},
xaxis: {
  categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
  labels: {
    show: false,
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: false,
  },
},
yaxis: {
  show: false,
  labels: {
    formatter: function (value) {
      return '$' + value;
    }
  }
},
}

if (document.getElementById("data-series-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("data-series-chart"), options);
chart.render();
}
` >}}

  
    
      $12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

###### Labels

Show labels for the X and Y axis by enabling the `xaxis: {show: true}` and `yaxis: {show: true}` and customize the appearance of the labels by adding Tailwind CSS utility classes to the `cssClass` object based on the following example:

{{< example id="labels-example-chart" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
// set the labels option to true to show the labels on the X and Y axis
xaxis: {
  show: true,
  categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb'],
  labels: {
    show: true,
    style: {
      fontFamily: "Inter, sans-serif",
      cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
    }
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: false,
  },
},
yaxis: {
  show: true,
  labels: {
    show: true,
    style: {
      fontFamily: "Inter, sans-serif",
      cssClass: 'text-xs font-normal fill-gray-500 dark:fill-gray-400'
    },
    formatter: function (value) {
      return '$' + value;
    }
  }
},
series: [
  {
    name: "Developer Edition",
    data: [150, 141, 145, 152, 135, 125],
    color: "#1A56DB",
  },
  {
    name: "Designer Edition",
    data: [43, 13, 65, 12, 42, 73],
    color: "#7E3BF2",
  },
],
chart: {
  sparkline: {
    enabled: false
  },
  height: "100%",
  width: "100%",
  type: "area",
  fontFamily: "Inter, sans-serif",
  dropShadow: {
    enabled: false,
  },
  toolbar: {
    show: false,
  },
},
tooltip: {
  enabled: true,
  x: {
    show: false,
  },
},
fill: {
  type: "gradient",
  gradient: {
    opacityFrom: 0.55,
    opacityTo: 0,
    shade: "#1C64F2",
    gradientToColors: ["#1C64F2"],
  },
},
dataLabels: {
  enabled: false,
},
stroke: {
  width: 6,
},
legend: {
  show: false
},
grid: {
  show: false,
},
}

if (document.getElementById("labels-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("labels-chart"), options);
chart.render();
}
` >}}

  
    
      $12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

###### Legends

Automatically show the legend indicators of the chart by setting the `legend: { show: true }` value when configuring the options via JavaScript. You can also set position of the legend by using the `position: {x}` option inside the legend object to place it to the top or bottom side of the chart.  

{{< example id="legend-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
// add data series via arrays, learn more here: https://apexcharts.com/docs/series/
series: [
  {
    name: "Developer Edition",
    data: [1500, 1418, 1456, 1526, 1356, 1256],
    color: "#1A56DB",
  },
  {
    name: "Designer Edition",
    data: [643, 413, 765, 412, 1423, 1731],
    color: "#7E3BF2",
  },
],
chart: {
  height: "100%",
  maxWidth: "100%",
  type: "area",
  fontFamily: "Inter, sans-serif",
  dropShadow: {
    enabled: false,
  },
  toolbar: {
    show: false,
  },
},
tooltip: {
  enabled: true,
  x: {
    show: false,
  },
},
legend: {
  show: true
},
fill: {
  type: "gradient",
  gradient: {
    opacityFrom: 0.55,
    opacityTo: 0,
    shade: "#1C64F2",
    gradientToColors: ["#1C64F2"],
  },
},
dataLabels: {
  enabled: false,
},
stroke: {
  width: 6,
},
grid: {
  show: false,
  strokeDashArray: 4,
  padding: {
    left: 2,
    right: 2,
    top: -26
  },
},
xaxis: {
  categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
  labels: {
    show: false,
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: false,
  },
},
yaxis: {
  show: false,
  labels: {
    formatter: function (value) {
      return '$' + value;
    }
  }
},
}

if (document.getElementById("legend-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("legend-chart"), options);
chart.render();
}
` >}}

  
    
      $12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

###### Tooltip

Enable the tooltip that is shown when hovering over a data set by setting `{tooltip: {enabled: true}}` and customize the tooltip component via the following options:

- `x: {show: false}` will show or hide the X axis data
- `y: {show: true}` will show or hide the Y axis data

{{< example id="tooltip-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
// set this option to enable the tooltip for the chart, learn more here: https://apexcharts.com/docs/tooltip/
tooltip: {
  enabled: true,
  x: {
    show: true,
  },
  y: {
    show: true,
  },
},
grid: {
  show: false,
  strokeDashArray: 4,
  padding: {
    left: 2,
    right: 2,
    top: -26
  },
},
series: [
  {
    name: "Developer Edition",
    data: [1500, 1418, 1456, 1526, 1356, 1256],
    color: "#1A56DB",
  },
  {
    name: "Designer Edition",
    data: [643, 413, 765, 412, 1423, 1731],
    color: "#7E3BF2",
  },
],
chart: {
  height: "100%",
  maxWidth: "100%",
  type: "area",
  fontFamily: "Inter, sans-serif",
  dropShadow: {
    enabled: false,
  },
  toolbar: {
    show: false,
  },
},
legend: {
  show: true
},
fill: {
  type: "gradient",
  gradient: {
    opacityFrom: 0.55,
    opacityTo: 0,
    shade: "#1C64F2",
    gradientToColors: ["#1C64F2"],
  },
},
dataLabels: {
  enabled: false,
},
stroke: {
  width: 6,
},
xaxis: {
  categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
  labels: {
    show: false,
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: false,
  },
},
yaxis: {
  show: false,
  labels: {
    formatter: function (value) {
      return '$' + value;
    }
  }
},
}

if (document.getElementById("tooltip-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("tooltip-chart"), options);
chart.render();
}
` >}}

  
    
      $12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

###### Grid

Add a grid layout of dashed lines to improve the readability of the data entries for the charts by configuring the `{grid: { show: true }}` object and customize the appearance via the `strokeDashArray` object.

{{< example id="grid-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
// set grid lines to improve the readability of the chart, learn more here: https://apexcharts.com/docs/grid/
grid: {
  show: true,
  strokeDashArray: 4,
  padding: {
    left: 2,
    right: 2,
    top: -26
  },
},
series: [
  {
    name: "Developer Edition",
    data: [1500, 1418, 1456, 1526, 1356, 1256],
    color: "#1A56DB",
  },
  {
    name: "Designer Edition",
    data: [643, 413, 765, 412, 1423, 1731],
    color: "#7E3BF2",
  },
],
chart: {
  height: "100%",
  maxWidth: "100%",
  type: "area",
  fontFamily: "Inter, sans-serif",
  dropShadow: {
    enabled: false,
  },
  toolbar: {
    show: false,
  },
},
tooltip: {
  enabled: true,
  x: {
    show: false,
  },
},
legend: {
  show: true
},
fill: {
  type: "gradient",
  gradient: {
    opacityFrom: 0.55,
    opacityTo: 0,
    shade: "#1C64F2",
    gradientToColors: ["#1C64F2"],
  },
},
dataLabels: {
  enabled: false,
},
stroke: {
  width: 6,
},
xaxis: {
  categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
  labels: {
    show: false,
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: false,
  },
},
yaxis: {
  show: false,
  labels: {
    formatter: function (value) {
      return '$' + value;
    }
  }
},
}

if (document.getElementById("grid-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("grid-chart"), options);
chart.render();
}
` >}}

  
    
      $12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

###### Data labels

Show data points on the chart by enable the `dataLabels: {enabled: true}` object when configuring the options via JavaScript and customize the appearance based on the following example:

{{< example id="data-labels-chart-example" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
// enable and customize data labels using the following example, learn more from here: https://apexcharts.com/docs/datalabels/
dataLabels: {
  enabled: true,
  // offsetX: 10,
  style: {
    cssClass: 'text-xs text-white font-medium'
  },
},
grid: {
  show: false,
  strokeDashArray: 4,
  padding: {
    left: 16,
    right: 16,
    top: -26
  },
},
series: [
  {
    name: "Developer Edition",
    data: [150, 141, 145, 152, 135, 125],
    color: "#1A56DB",
  },
  {
    name: "Designer Edition",
    data: [64, 41, 76, 41, 113, 173],
    color: "#7E3BF2",
  },
],
chart: {
  height: "100%",
  maxWidth: "100%",
  type: "area",
  fontFamily: "Inter, sans-serif",
  dropShadow: {
    enabled: false,
  },
  toolbar: {
    show: false,
  },
},
tooltip: {
  enabled: true,
  x: {
    show: false,
  },
},
legend: {
  show: true
},
fill: {
  type: "gradient",
  gradient: {
    opacityFrom: 0.55,
    opacityTo: 0,
    shade: "#1C64F2",
    gradientToColors: ["#1C64F2"],
  },
},
stroke: {
  width: 6,
},
xaxis: {
  categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
  labels: {
    show: false,
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: false,
  },
},
yaxis: {
  show: false,
  labels: {
    formatter: function (value) {
      return '$' + value;
    }
  }
},
}

if (document.getElementById("data-labels-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("data-labels-chart"), options);
chart.render();
}
` >}}

  
    
      $12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

###### Format data

If you want to format and prefix your data with something such as a currency sign you can do that by using the `formatter` function. For example, here we use the euro ("€") sign instead of the dollar ("$").

{{< example id="default-area-chart" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
// set the formatter callback function to format data
yaxis: {
  show: false,
  labels: {
    formatter: function (value) {
      return '€' + value;
    }
  }
},
chart: {
  height: "100%",
  maxWidth: "100%",
  type: "area",
  fontFamily: "Inter, sans-serif",
  dropShadow: {
    enabled: false,
  },
  toolbar: {
    show: false,
  },
},
tooltip: {
  enabled: true,
  x: {
    show: false,
  },
},
fill: {
  type: "gradient",
  gradient: {
    opacityFrom: 0.55,
    opacityTo: 0,
    shade: "#1C64F2",
    gradientToColors: ["#1C64F2"],
  },
},
dataLabels: {
  enabled: false,
},
stroke: {
  width: 6,
},
grid: {
  show: false,
  strokeDashArray: 4,
  padding: {
    left: 2,
    right: 2,
    top: -26
  },
},
series: [
  {
    name: "Developer Edition",
    data: [1500, 1418, 1456, 1526, 1356, 1256],
    color: "#1A56DB",
  },
  {
    name: "Designer Edition",
    data: [643, 413, 765, 412, 1423, 1731],
    color: "#7E3BF2",
  },
],
xaxis: {
  categories: ['01 Feb', '02 Feb', '03 Feb', '04 Feb', '05 Feb', '06 Feb', '07 Feb'],
  labels: {
    show: false,
  },
  axisBorder: {
    show: false,
  },
  axisTicks: {
    show: false,
  },
},
}

if (document.getElementById("main-chart") && typeof ApexCharts !== 'undefined') {
const chart = new ApexCharts(document.getElementById("main-chart"), options);
chart.render();
}
` >}}

  
    
      €12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

###### Chart size

You can set the size (width and height) of the chart by passing the `width: {size}` and `height: {size}` options via JavaScript to the chart object using pixels or percentages:

{{< example id="size-example-chart" class="flex justify-center dark:bg-gray-900" github="plugins/charts.md" show_dark=true charts=true disable_init_js=true javascript=`
const options = {
  chart: {
    // add these lines to update the size of the chart
    height: 240,
    width: 240,
    type: "area",
    fontFamily: "Inter, sans-serif",
    dropShadow: {
      enabled: false,
    },
    toolbar: {
      show: false,
    },
  },
  tooltip: {
    enabled: true,
    x: {
      show: false,
    },
  },
  fill: {
    type: "gradient",
    gradient: {
      opacityFrom: 0.55,
      opacityTo: 0,
      shade: "#1C64F2",
      gradientToColors: ["#1C64F2"],
    },
  },
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: 6,
  },
  grid: {
    show: false,
    strokeDashArray: 4,
    padding: {
      left: 2,
      right: 2,
      top: -26
    },
  },
  series: [
    {
      name: "Developer Edition",
      data: [1500, 1418, 1456, 1526, 1356, 1256],
      color: "#1A56DB",
    },
    {
      name: "Designer Edition",
      data: [643, 413, 765, 412, 1423, 1731],
      color: "#7E3BF2",
    },
  ],
  xaxis: {
    categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],
    labels: {
      show: false,
    },
    axisBorder: {
      show: false,
    },
    axisTicks: {
      show: false,
    },
  },
  yaxis: {
    show: false,
    labels: {
      formatter: function (value) {
        return '$' + value;
      }
    }
  },
}

if (document.getElementById("size-chart") && typeof ApexCharts !== 'undefined') {
  const chart = new ApexCharts(document.getElementById("size-chart"), options);
  chart.render();
}
` >}}

  
    
      $12,423
      Sales this week
    
    
      23%
      
    
  
  
  
    
      
      
      
      
          
            
              Yesterday
            
            
              Today
            
            
              Last 7 days
            
            
              Last 30 days
            
            
              Last 90 days
            
          
      
      
        Sales Report
        
      
    
  

{{< /example >}}

##### JavaScript behaviour

With the charts from Flowbite and through the API of ApexCharts you can programmatically configure and handle the behaviour of the components by using the methods directly on the chart object.

For example, here's how you can initialize a new chart with an options object and call the `render()` function:

```javascript
const chart = new ApexCharts(el, options);
chart.render();
```

You can also update the options or data on demand. Here's an example how you can add or remove data:

```javascript
const chart = new ApexCharts(el, options);

chart.updateSeries([{
  data: [342, 442, 311, 421, 212]
}]);
```

You can also toggle the visibility of a data series by calling the `toggleSeries()` method:

```javascript
const chart = new ApexCharts(el, {
  series: [{
    name: 'Developer Edition'
    data: [342, 442, 311, 421, 212]
  }, {
    name: 'Designer Edition'
    data: [342, 442, 311, 421, 212]
  }]
});

chart.toggleSeries('Designer Edition');
```

You can read more about all of the methods by checking out the official ApexCharts documentation.

##### More examples

Check out more chart examples built with Flowbite, Tailwind CSS and Flowbite with these resources:

- [Flowbite Admin Dashboard](https://github.com/themesberg/flowbite-admin-dashboard)

#### Datatables

The datatable component examples from Flowbite are open-source under the MIT License and they are based on the [simple-datatables](https://github.com/fiduswriter/simple-datatables) repository from GitHub which you need to install via NPM or CDN.

This page provides multiple examples of datatable components where you can search, sort, filter, paginate and export table data up to thousands of entries coded with Tailwind CSS and leveraging JavaScript code provided by the parent library.

All examples are responsive, dark mode and RTL support included and by installing the Flowbite plugin the custom styles will automatically be applied to the datatable components using Tailwind CSS.

##### Getting started

Before continuing make sure that you have Tailwind CSS, Flowbite, and Simple Datables in your project.

1. Install Tailwind CSS and follow our }}">quickstart guide to install Flowbite and the official plugin

2. Install the `simple-datatables` library using NPM:

```bash
npm install simple-datatables --save
```

Alternatively, you can also include it in your project using CDN:

```html

```

Now that you have installed all libraries you can start copy-pasting the datatable components from Flowbite.

Make sure that in addition to the HTML markup you also copy the JavaScript code to initialize the component.

##### Default datatable

Use this example to show table data with default sorting and pagination functionalities.

{{< example id="default-datatable-example" class="flex justify-center dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
if (document.getElementById("default-table") && typeof simpleDatatables.DataTable !== 'undefined') {
    const dataTable = new simpleDatatables.DataTable("#default-table", {
        searchable: false,
        perPageSelect: false
    });
}
` >}}

    
        
            
                
                    Name
                    
                
            
            
                
                    Release Date
                    
                
            
            
                
                    NPM Downloads
                    
                
            
            
                
                    Growth
                    
                
            
        
    
    
        
            Flowbite
            2021/25/09
            269000
            49%
        
        
            React
            2013/24/05
            4500000
            24%
        
        
            Angular
            2010/20/09
            2800000
            17%
        
        
            Vue
            2014/12/02
            3600000
            30%
        
        
            Svelte
            2016/26/11
            1200000
            57%
        
        
            Ember
            2011/08/12
            500000
            44%
        
        
            Backbone
            2010/13/10
            300000
            9%
        
        
            jQuery
            2006/28/01
            6000000
            5%
        
        
            Bootstrap
            2011/19/08
            1800000
            12%
        
        
            Foundation
            2011/23/09
            700000
            8%
        
        
            Bulma
            2016/24/10
            500000
            7%
        
        
            Next.js
            2016/25/10
            2300000
            45%
        
        
            Nuxt.js
            2016/16/10
            900000
            50%
        
        
            Meteor
            2012/17/01
            1000000
            10%
        
        
            Aurelia
            2015/08/07
            200000
            20%
        
        
            Inferno
            2016/27/09
            100000
            35%
        
        
            Preact
            2015/16/08
            600000
            28%
        
        
            Lit
            2018/28/05
            400000
            60%
        
        
            Alpine.js
            2019/02/11
            300000
            70%
        
        
            Stimulus
            2018/06/03
            150000
            25%
        
        
            Solid
            2021/05/07
            250000
            80%
        
    

{{< /example >}}

##### Table search

Set the `searchable` option to `true` to enable the search functionality for all table data.

{{< example id="search-datatable-example" class="flex justify-center dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
if (document.getElementById("search-table") && typeof simpleDatatables.DataTable !== 'undefined') {
    const dataTable = new simpleDatatables.DataTable("#search-table", {
        searchable: true,
        sortable: false
    });
}
` >}}

    
        
            
                
                    Company Name
                
            
            
                
                    Ticker
                
            
            
                
                    Stock Price
                
            
            
                
                    Market Capitalization
                
            
        
    
    
        
            Apple Inc.
            AAPL
            $192.58
            $3.04T
        
        
            Microsoft Corporation
            MSFT
            $340.54
            $2.56T
        
        
            Alphabet Inc.
            GOOGL
            $134.12
            $1.72T
        
        
            Amazon.com Inc.
            AMZN
            $138.01
            $1.42T
        
        
            NVIDIA Corporation
            NVDA
            $466.19
            $1.16T
        
        
            Tesla Inc.
            TSLA
            $255.98
            $811.00B
        
        
            Meta Platforms Inc.
            META
            $311.71
            $816.00B
        
        
            Berkshire Hathaway Inc.
            BRK.B
            $354.08
            $783.00B
        
        
            TSMC
            TSM
            $103.51
            $538.00B
        
        
            UnitedHealth Group Incorporated
            UNH
            $501.96
            $466.00B
        
        
            Johnson & Johnson
            JNJ
            $172.85
            $452.00B
        
        
            JPMorgan Chase & Co.
            JPM
            $150.23
            $431.00B
        
        
            Visa Inc.
            V
            $246.39
            $519.00B
        
        
            Eli Lilly and Company
            LLY
            $582.97
            $552.00B
        
        
            Walmart Inc.
            WMT
            $159.67
            $429.00B
        
        
            Samsung Electronics Co., Ltd.
            005930.KS
            $70.22
            $429.00B
        
        
            Procter & Gamble Co.
            PG
            $156.47
            $366.00B
        
        
            Nestlé S.A.
            NESN.SW
            $120.51
            $338.00B
        
        
            Roche Holding AG
            ROG.SW
            $296.00
            $317.00B
        
        
            Chevron Corporation
            CVX
            $160.92
            $310.00B
        
        
            LVMH Moët Hennessy Louis Vuitton
            MC.PA
            $956.60
            $478.00B
        
        
            Pfizer Inc.
            PFE
            $35.95
            $200.00B
        
        
            Novo Nordisk A/S
            NVO
            $189.15
            $443.00B
        
        
            PepsiCo, Inc.
            PEP
            $182.56
            $311.00B
        
        
            ASML Holding N.V.
            ASML
            $665.72
            $273.00B
        
        
            The Coca-Cola Company
            KO
            $61.37
            $265.00B
        
        
            Oracle Corporation
            ORCL
            $118.36
            $319.00B
        
        
            Merck & Co., Inc.
            MRK
            $109.12
            $276.00B
        
        
            Broadcom Inc.
            AVGO
            $861.80
            $356.00B
        
        
            Mastercard Incorporated
            MA
            $421.44
            $396.00B
        
    


{{< /example >}}

##### Filtering data

To enable filtering data based on a search query for each column you need to copy the custom code from the JavaScript tab and the HTML structure of the table. Enabling search for each individual data column is an advanced way of letting users browse complex data.

{{< example id="filter-datatable-example" class="flex justify-center dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
if (document.getElementById("filter-table") && typeof simpleDatatables.DataTable !== 'undefined') {
    const dataTable = new simpleDatatables.DataTable("#filter-table", {
        tableRender: (_data, table, type) => {
            if (type === "print") {
                return table
            }
            const tHead = table.childNodes[0]
            const filterHeaders = {
                nodeName: "TR",
                attributes: {
                    class: "search-filtering-row"
                },
                childNodes: tHead.childNodes[0].childNodes.map(
                    (_th, index) => ({nodeName: "TH",
                        childNodes: [
                            {
                                nodeName: "INPUT",
                                attributes: {
                                    class: "datatable-input",
                                    type: "search",
                                    "data-columns": "[" + index + "]"
                                }
                            }
                        ]})
                )
            }
            tHead.childNodes.push(filterHeaders)
            return table
        }
    });
}
` >}}

    
        
            
                
                    Name
                    
                
            
            
                
                    Category
                    
                
            
            
                
                    Brand
                    
                
            
            
                
                    Price
                    
                
            
            
                
                    Stock
                    
                
            
            
                
                    Total Sales
                    
                
            
            
                
                    Status
                    
                
            
        
    
    
        
            Apple iMac
            Computers
            Apple
            $1,299
            50
            200
            In Stock
        
        
            Apple iPhone
            Mobile Phones
            Apple
            $999
            120
            300
            In Stock
        
        
            Samsung Galaxy
            Mobile Phones
            Samsung
            $899
            80
            150
            In Stock
        
        
            Dell XPS 13
            Computers
            Dell
            $1,099
            30
            120
            In Stock
        
        
            HP Spectre x360
            Computers
            HP
            $1,299
            25
            80
            In Stock
        
        
            Google Pixel 6
            Mobile Phones
            Google
            $799
            100
            200
            In Stock
        
        
            Sony WH-1000XM4
            Headphones
            Sony
            $349
            60
            150
            In Stock
        
        
            Apple AirPods Pro
            Headphones
            Apple
            $249
            200
            300
            In Stock
        
        
            Asus ROG Zephyrus
            Computers
            Asus
            $1,899
            15
            50
            In Stock
        
        
            Microsoft Surface Pro 7
            Computers
            Microsoft
            $899
            40
            100
            In Stock
        
        
            Samsung QLED TV
            Televisions
            Samsung
            $1,299
            25
            70
            In Stock
        
        
            LG OLED TV
            Televisions
            LG
            $1,499
            20
            50
            In Stock
        
        
            Canon EOS R5
            Cameras
            Canon
            $3,899
            10
            30
            In Stock
        
        
            Nikon Z7 II
            Cameras
            Nikon
            $3,299
            8
            25
            In Stock
        
        
            Apple Watch Series 7
            Wearables
            Apple
            $399
            150
            500
            In Stock
        
        
            Fitbit Charge 5
            Wearables
            Fitbit
            $179
            100
            250
            In Stock
        
        
            Dyson V11 Vacuum
            Home Appliances
            Dyson
            $599
            30
            90
            In Stock
        
        
            iRobot Roomba i7+
            Home Appliances
            iRobot
            $799
            20
            70
            In Stock
        
        
            Bose SoundLink Revolve
            Speakers
            Bose
            $199
            80
            200
            In Stock
        
        
            Sonos One
            Speakers
            Sonos
            $219
            60
            180
            In Stock
        
        
            Apple iPad Pro
            Tablets
            Apple
            $1,099
            50
            150
            In Stock
        
        
            Samsung Galaxy Tab S7
            Tablets
            Samsung
            $649
            70
            130
            In Stock
        
        
            Amazon Echo Dot
            Smart Home
            Amazon
            $49
            300
            800
            In Stock
        
        
            Google Nest Hub
            Smart Home
            Google
            $89
            150
            400
            In Stock
        
        
            PlayStation 5
            Gaming Consoles
            Sony
            $499
            10
            500
            Out of Stock
        
        
            Xbox Series X
            Gaming Consoles
            Microsoft
            $499
            15
            450
            Out of Stock
        
        
            Nintendo Switch
            Gaming Consoles
            Nintendo
            $299
            40
            600
            In Stock
        
        
            Apple MacBook Pro
            Computers
            Apple
            $1,299
            20
            100
            In Stock
        
    

{{< /example >}}

##### Sorting data

By setting the value `sortable` to `true` you'll enable all data rows from the datatable to be sortable by clicking on the table column heading. You can also disable it by setting the same option to `false`.

{{< example id="sorting-datatable-example" class="flex justify-center dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
if (document.getElementById("sorting-table") && typeof simpleDatatables.DataTable !== 'undefined') {
    const dataTable = new simpleDatatables.DataTable("#sorting-table", {
        searchable: false,
        perPageSelect: false,
        sortable: true
    });
}
` >}}

    
        
            
                
                    Country
                    
                
            
            
                
                    GDP
                    
                
            
            
                
                    Population
                    
                
            
            
                
                    GDP per Capita
                    
                
            
        
    
    
        
            United States
            $21433 billion
            331 million
            $64763
        
        
            China
            $14342 billion
            1441 million
            $9957
        
        
            Japan
            $5082 billion
            126 million
            $40335
        
        
            Germany
            $3846 billion
            83 million
            $46386
        
        
            India
            $2875 billion
            1380 million
            $2083
        
        
            United Kingdom
            $2829 billion
            67 million
            $42224
        
        
            France
            $2716 billion
            65 million
            $41723
        
        
            Italy
            $2001 billion
            60 million
            $33350
        
        
            Canada
            $1643 billion
            38 million
            $43237
        
        
            South Korea
            $1631 billion
            52 million
            $31365
        
        
            Russia
            $1460 billion
            144 million
            $10139
        
        
            Brazil
            $1430 billion
            213 million
            $6718
        
        
            Australia
            $1393 billion
            25 million
            $55720
        
        
            Spain
            $1326 billion
            47 million
            $28255
        
        
            Mexico
            $1194 billion
            129 million
            $9255
        
        
            Indonesia
            $1158 billion
            273 million
            $4241
        
        
            Netherlands
            $1010 billion
            17 million
            $59412
        
        
            Saudi Arabia
            $804 billion
            35 million
            $22914
        
        
            Turkey
            $761 billion
            84 million
            $9060
        
        
            Switzerland
            $741 billion
            9 million
            $82333
        
    

{{< /example >}}

##### Table pagination

Pagination is enabled by default for all datatables from Flowbite, however, you can disable it by setting the option `paging` to `false`. Use the `perPage` option to specify how many data rows to show by default. 

You can also set the `perPageSelect` option to set the selection options of the table.

{{< example id="pagination-datatable-example" class="flex justify-center dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
if (document.getElementById("pagination-table") && typeof simpleDatatables.DataTable !== 'undefined') {
    const dataTable = new simpleDatatables.DataTable("#pagination-table", {
        paging: true,
        perPage: 5,
        perPageSelect: [5, 10, 15, 20, 25],
        sortable: false
    });
}
` >}}

    
        
            
                
                    Model Name
                
            
            
                
                    Developer
                
            
            
                
                    Release Date
                
            
            
                
                    Parameters
                
            
            
                
                    Primary Application
                
            
        
    
    
        
            GPT-4
            OpenAI
            March 2023
            1 trillion
            Natural Language Processing
        
        
            BERT
            Google
            October 2018
            340 million
            Natural Language Understanding
        
        
            DALL-E 2
            OpenAI
            April 2022
            3.5 billion
            Image Generation
        
        
            T5
            Google
            October 2019
            11 billion
            Text-to-Text Transfer
        
        
            GPT-3.5
            OpenAI
            November 2022
            175 billion
            Natural Language Processing
        
        
            Codex
            OpenAI
            August 2021
            12 billion
            Code Generation
        
        
            PaLM 2
            Google
            May 2023
            540 billion
            Multilingual Understanding
        
        
            LaMDA
            Google
            May 2021
            137 billion
            Conversational AI
        
        
            CLIP
            OpenAI
            January 2021
            400 million
            Image and Text Understanding
        
        
            XLNet
            Google
            June 2019
            340 million
            Natural Language Processing
        
        
            Meena
            Google
            January 2020
            2.6 billion
            Conversational AI
        
        
            BigGAN
            Google
            September 2018
            Unlimited
            Image Generation
        
        
            Electra
            Google
            March 2020
            14 million
            Natural Language Understanding
        
        
            Swin Transformer
            Microsoft
            April 2021
            88 million
            Vision Processing
        
        
            GPT-NeoX-20B
            EleutherAI
            April 2022
            20 billion
            Natural Language Processing
        
        
            Ernie 3.0
            Baidu
            July 2021
            10 billion
            Natural Language Processing
        
        
            Turing-NLG
            Microsoft
            February 2020
            17 billion
            Natural Language Processing
        
        
            Wu Dao 2.0
            Beijing Academy of AI
            June 2021
            1.75 trillion
            Multimodal Processing
        
        
            Jukebox
            OpenAI
            April 2020
            1.2 billion
            Music Generation
        
        
            StyleGAN2
            NVIDIA
            February 2020
            Unlimited
            Image Generation
        
        
            FLAN
            Google
            December 2021
            137 billion
            Few-shot Learning
        
        
            GShard
            Google
            June 2020
            600 billion
            Multilingual Understanding
        
        
            AlphaFold
            DeepMind
            December 2020
            Unknown
            Protein Folding
        
        
            GPT-J
            EleutherAI
            June 2021
            6 billion
            Natural Language Processing
        
        
            M6
            Alibaba
            December 2020
            10 billion
            Multimodal Processing
        
        
            Megatron-Turing NLG
            NVIDIA & Microsoft
            October 2021
            530 billion
            Natural Language Processing
        
        
            DeepSpeed
            Microsoft
            February 2020
            Not disclosed
            AI Training Optimization
        
    

{{< /example >}}

##### Selecting rows

Use this example to enable the selection of rows by clicking anywhere one of the table row elements by copying setting the `multiselect` option to `true` and copying the JavaScript configuration from Flowbite.

Use the `datatable.selectrow` event to write your own code and get the data from the selected table row.

{{< example id="selection-datatable-example" class="flex justify-center dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
if (document.getElementById("selection-table") && typeof simpleDatatables.DataTable !== 'undefined') {

    let multiSelect = true;
    let rowNavigation = false;
    let table = null;

    const resetTable = function() {
        if (table) {
            table.destroy();
        }

        const options = {
            rowRender: (row, tr, _index) => {
                if (!tr.attributes) {
                    tr.attributes = {};
                }
                if (!tr.attributes.class) {
                    tr.attributes.class = "";
                }
                if (row.selected) {
                    tr.attributes.class += " selected";
                } else {
                    tr.attributes.class = tr.attributes.class.replace(" selected", "");
                }
                return tr;
            }
        };
        if (rowNavigation) {
            options.rowNavigation = true;
            options.tabIndex = 1;
        }

        table = new simpleDatatables.DataTable("#selection-table", options);

        // Mark all rows as unselected
        table.data.data.forEach(data => {
            data.selected = false;
        });

        table.on("datatable.selectrow", (rowIndex, event) => {
            event.preventDefault();
            const row = table.data.data[rowIndex];
            if (row.selected) {
                row.selected = false;
            } else {
                if (!multiSelect) {
                    table.data.data.forEach(data => {
                        data.selected = false;
                    });
                }
                row.selected = true;
            }
            table.update();
        });
    };

    // Row navigation makes no sense on mobile, so we deactivate it and hide the checkbox.
    const isMobile = window.matchMedia("(any-pointer:coarse)").matches;
    if (isMobile) {
        rowNavigation = false;
    }

    resetTable();
}
` >}}

    
        
            
                
                    Name
                    
                
            
            
                
                    Release Date
                    
                
            
            
                
                    NPM Downloads
                    
                
            
            
                
                    Growth
                    
                
            
        
    
    
        
            Flowbite
            2021/25/09
            269000
            49%
        
        
            React
            2013/24/05
            4500000
            24%
        
        
            Angular
            2010/20/09
            2800000
            17%
        
        
            Vue
            2014/12/02
            3600000
            30%
        
        
            Svelte
            2016/26/11
            1200000
            57%
        
        
            Ember
            2011/08/12
            500000
            44%
        
        
            Backbone
            2010/13/10
            300000
            9%
        
        
            jQuery
            2006/28/01
            6000000
            5%
        
        
            Bootstrap
            2011/19/08
            1800000
            12%
        
        
            Foundation
            2011/23/09
            700000
            8%
        
        
            Bulma
            2016/24/10
            500000
            7%
        
        
            Next.js
            2016/25/10
            2300000
            45%
        
        
            Nuxt.js
            2016/16/10
            900000
            50%
        
        
            Meteor
            2012/17/01
            1000000
            10%
        
        
            Aurelia
            2015/08/07
            200000
            20%
        
        
            Inferno
            2016/27/09
            100000
            35%
        
        
            Preact
            2015/16/08
            600000
            28%
        
        
            Lit
            2018/28/05
            400000
            60%
        
        
            Alpine.js
            2019/02/11
            300000
            70%
        
        
            Stimulus
            2018/06/03
            150000
            25%
        
        
            Solid
            2021/05/07
            250000
            80%
        
    

{{< /example >}}

##### Export files

If you want to enable the export of the table data, you can use the `simpleDatatables.exportCSV` function to export the data as a CSV file. The option is also available for TXT, JSON, and SQL formats.

{{< example id="export-datatable-example" class="dark:bg-gray-900" github="plugins/datatables.md" show_dark=true datatables=true disable_init_js=true javascript=`
if (document.getElementById("export-table") && typeof simpleDatatables.DataTable !== 'undefined') {

    const exportCustomCSV = function(dataTable, userOptions = {}) {
        // A modified CSV export that includes a row of minuses at the start and end.
        const clonedUserOptions = {
            ...userOptions
        }
        clonedUserOptions.download = false
        const csv = simpleDatatables.exportCSV(dataTable, clonedUserOptions)
        // If CSV didn't work, exit.
        if (!csv) {
            return false
        }
        const defaults = {
            download: true,
            lineDelimiter: "\n",
            columnDelimiter: ";"
        }
        const options = {
            ...defaults,
            ...clonedUserOptions
        }
        const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length)
            .fill("+")
            .join("+"); // Use "+" as the delimiter

        const str = separatorRow + options.lineDelimiter + csv + options.lineDelimiter + separatorRow;

        if (userOptions.download) {
            // Create a link to trigger the download
            const link = document.createElement("a");
            link.href = encodeURI("data:text/csv;charset=utf-8," + str);
            link.download = (options.filename || "datatable_export") + ".txt";
            // Append the link
            document.body.appendChild(link);
            // Trigger the download
            link.click();
            // Remove the link
            document.body.removeChild(link);
        }

        return str
    }
    const table = new simpleDatatables.DataTable("#export-table", {
        template: (options, dom) => "" +
            "" +
            (options.paging && options.perPageSelect ?
                "" +
                    "" +
                        " " + options.labels.perPage +
                    "" +
                "" : ""
            ) + "" +
        "" +
            "" +
                "" +
                    "" +
                "" +
                "" +
                    "" +
                "" +
                "" +
                    "" +
                "" +
                "" +
                    "" +
                "" +
            "" +
        "
" + "" +
            (options.searchable ?
                "" +
                    "" +
                "" : ""
            ) +
        "" +
        "" +
        "" +
            (options.paging ?
                "" : ""
            ) +
            "" +
        ""
    })
    const $exportButton = document.getElementById("exportDropdownButton");
    const $exportDropdownEl = document.getElementById("exportDropdown");
    const dropdown = new Dropdown($exportDropdownEl, $exportButton);
    console.log(dropdown)

    document.getElementById("export-csv").addEventListener("click", () => {
        simpleDatatables.exportCSV(table, {
            download: true,
            lineDelimiter: "\n",
            columnDelimiter: ";"
        })
    })
    document.getElementById("export-sql").addEventListener("click", () => {
        simpleDatatables.exportSQL(table, {
            download: true,
            tableName: "export_table"
        })
    })
    document.getElementById("export-txt").addEventListener("click", () => {
        simpleDatatables.exportTXT(table, {
            download: true
        })
    })
    document.getElementById("export-json").addEventListener("click", () => {
        simpleDatatables.exportJSON(table, {
            download: true,
            space: 3
        })
    })
}
` >}}

    
        
            
                
                    Name
                    
                
            
            
                
                    Release Date
                    
                
            
            
                
                    NPM Downloads
                    
                
            
            
                
                    Growth
                    
                
            
        
    
    
        
            Flowbite
            2021/25/09
            269000
            49%
        
        
            React
            2013/24/05
            4500000
            24%
        
        
            Angular
            2010/20/09
            2800000
            17%
        
        
            Vue
            2014/12/02
            3600000
            30%
        
        
            Svelte
            2016/26/11
            1200000
            57%
        
        
            Ember
            2011/08/12
            500000
            44%
        
        
            Backbone
            2010/13/10
            300000
            9%
        
        
            jQuery
            2006/28/01
            6000000
            5%
        
        
            Bootstrap
            2011/19/08
            1800000
            12%
        
        
            Foundation
            2011/23/09
            700000
            8%
        
        
            Bulma
            2016/24/10
            500000
            7%
        
        
            Next.js
            2016/25/10
            2300000
            45%
        
        
            Nuxt.js
            2016/16/10
            900000
            50%
        
        
            Meteor
            2012/17/01
            1000000
            10%
        
        
            Aurelia
            2015/08/07
            200000
            20%
        
        
            Inferno
            2016/27/09
            100000
            35%
        
        
            Preact
            2015/16/08
            600000
            28%
        
        
            Lit
            2018/28/05
            400000
            60%
        
        
            Alpine.js
            2019/02/11
            300000
            70%
        
        
            Stimulus
            2018/06/03
            150000
            25%
        
        
            Solid
            2021/05/07
            250000
            80%
        
    

{{< /example >}}

##### JavaScript behaviour

Learn more about how you can customize the DataTables plugin such as changing the default options, customizing the table appearance, dynamically loading data, and more by checking the examples below.

After installing the DataTables plugin either via NPM or CDN you can initialize by calling the `DataTable` constructor and passing the table selector as the first argument.

```javascript
// if you installed via CDN
const dataTable = new simpleDatatables.DataTable("#default-table");

// if you installed via NPM
import { DataTable } from "simple-datatables";
const dataTable = DataTable("#default-table");
```

You can pass an object of options as the second argument to customize the table appearance and behavior.

```javascript
const dataTable = new simpleDatatables.DataTable("#default-table", options);
```

After initializing the DataTable, you can access the instance methods and properties.

Here's a full list of the exposed methods and properties from the simple-datatables repository.

##### Options

Check out some of the more commonly used options that you can pass to the DataTable instance.

###### Injecting data

Use the `data` option to pass data from an array of arrays to the table using JavaScript.

```javascript
const customData = {
    "headings": [
        "Name",
        "Company",
        "Date",
    ],
    "data": [
        [
            "Flowbite",
            "Bergside",
            "05/23/2023",
        ],
        [
            "Next.js",
            "Vercel",
            "03/12/2024",
    ],
};

const dataTable = new DataTable("#default-table", { data: customData });
```

This is a useful feature where instead of a hard coded array you can pass data from an API or a JSON file.

###### Appearance

Use the following options to customize the appearance of the table such as adding a caption, custom classes, footer, header, updating the HTML rendering template, and enabling vertical scrolling, and more.

```javascript
const dataTable = new DataTable("#default-table", {
    caption: "Flowbite is an open-source library",
    classes: {
        // add custom HTML classes, full list: https://fiduswriter.github.io/simple-datatables/documentation/classes
        // we recommend keeping the default ones in addition to whatever you want to add because Flowbite hooks to the default classes for styles
    },
    footer: true, // enable or disable the footer
    header: true, // enable or disable the header
    labels: {
        // add custom text for the labels, full list: https://fiduswriter.github.io/simple-datatables/documentation/labels
    },
    template: (options, dom) => {
        // add custom HTML template for the table, full list: https://fiduswriter.github.io/simple-datatables/documentation/template
    },
    scrollY: "300px", // enable vertical scrolling
});
```

These options are useful if you want to add your own HTML elements inside the dynamically generated table header or footer as we used in the export a file example above.

###### Pagination

Use these options to enable pagination, set the number of rows per page, and customize the appearance.

```javascript
const dataTable = new DataTable("#default-table", {
    paging: true, // enable or disable pagination
    perPage: 10, // set the number of rows per page
    perPageSelect: [5, 10, 20, 50], // set the number of rows per page options
    firstLast: true, // enable or disable the first and last buttons
    nextPrev: true, // enable or disable the next and previous buttons
});
```

Pagination is a useful feature when you have a large dataset and you want to split it into multiple pages.

###### Searching

These options can be used to enable searching, set the search placeholder, and customize the appearance.

```javascript
const dataTable = new DataTable("#default-table", {
    searchable: true, // enable or disable searching
    sensitivity: "base" // set the search sensitivity (base, accent, case, variant)
    searchQuerySeparator: " ", // set the search query separator
});
```

The searching feature is great when you have a large dataset and you want to search for a specific row.

###### Sorting

Use these options to enable sorting, set the default sort column, and customize the sort appearance.

```javascript
const dataTable = new DataTable("#default-table", {
    sortable: true, // enable or disable sorting
    locale: "en-US", // set the locale for sorting
    numeric: true, // enable or disable numeric sorting
    caseFirst: "false", // set the case first for sorting (upper, lower)
    ignorePunctuation: true // enable or disable punctuation sorting
});
```

The sorting feature is useful when you want to sort the table rows based on a specific column.

##### Methods

Check out some of the common methods that you can use to interact with the DataTable instance.

```javascript
// programatically search the table where the "term" variable is the query string
dataTable.search(term, columns);

// add a new table row data to the table (considering you have four columns)
dataTable.insert({
    "Heading 1": "Cell 1",
    "Heading 2": "Cell 2",
    "Heading 3": "Cell 3",
    "Heading 4": "Cell 4",
});

// updates the DOM of the table
dataTable.update();
```

Here's a full list of the exposed methods and properties from the simple-datatables repository.

##### License

All of the examples above built by Flowbite are open-source and licensed under the MIT license. The simple-datatables repository is also open-source and licensed under the GNU license.

#### WYSIWYG

The WYSIWYG text editor from Flowbite is open-source under the MIT license based on the [Tip Tap library](https://github.com/ueberdosis/tiptap) and allows you to easily edit complex text data with typography styles, links, images, videos, and more.

The markup and styles provided by Flowbite are all built with the utility classes from Tailwind CSS and the styles for the content inside the WYSIWYG text editor are based on the [Flowbite Typography](https://flowbite.com/docs/components/typography/) plugin.

All examples provided on this page have support for dark mode, RTL (right-to-left) styles, responsiveness on mobile devices and you can easily add your own functionality using JavaScript and the Flowbite API.

##### Getting started

Before continuing make sure that you have Tailwind CSS, Flowbite, and Tip Tap installed in your project.

1. Follow the [quickstart guide](https://flowbite.com/docs/getting-started/quickstart/) from Flowbite to enable the interactive elements

2. Install the [Flowbite Typography](https://flowbite.com/docs/components/typography/) plugin to format the content of text inside the WYSYIWYG editor preview:

```bash
npm i flowbite-typography
```

3. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:

```javascript
@plugin "flowbite-typography";
```

Alternatively you can do the same but in your `tailwind.config.js` file:

```javascript
// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
```

4. Finally, install Tip Tap either via NPM or skip this step if you're using CDN:

```bash
npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
```

Now you're ready to use the examples below by copying the HTML markup and the JavaScript code.

##### Default text editor

Use this example of a WYSIWYG text editor to enable basic typography styling and formatting, adding lists, links, images, videos, code blocks, aligning text, blockquotes, setting headers and paragraphs and more.

{{< example id="default-wysiwyg-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';
import Highlight from 'https://esm.sh/@tiptap/extension-highlight@2.6.6';
import Underline from 'https://esm.sh/@tiptap/extension-underline@2.6.6';
import Link from 'https://esm.sh/@tiptap/extension-link@2.6.6';
import TextAlign from 'https://esm.sh/@tiptap/extension-text-align@2.6.6';
import Image from 'https://esm.sh/@tiptap/extension-image@2.6.6';
import YouTube from 'https://esm.sh/@tiptap/extension-youtube@2.6.6';
import TextStyle from 'https://esm.sh/@tiptap/extension-text-style@2.6.6';
import FontFamily from 'https://esm.sh/@tiptap/extension-font-family@2.6.6';
import { Color } from 'https://esm.sh/@tiptap/extension-color@2.6.6';
import Bold from 'https://esm.sh/@tiptap/extension-bold@2.6.6'; // Import the Bold extension


window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-example")) {

    const FontSizeTextStyle = TextStyle.extend({
        addAttributes() {
            return {
            fontSize: {
                default: null,
                parseHTML: element => element.style.fontSize,
                renderHTML: attributes => {
                if (!attributes.fontSize) {
                    return {};
                }
                return { style: 'font-size: ' + attributes.fontSize };
                },
            },
            };
        },
    });
    const CustomBold = Bold.extend({
        // Override the renderHTML method
        renderHTML({ mark, HTMLAttributes }) {
            const { style, ...rest } = HTMLAttributes;

            // Merge existing styles with font-weight
            const newStyle = 'font-weight: bold;' + (style ? ' ' + style : '');

            return ['span', { ...rest, style: newStyle.trim() }, 0];
        },
        // Ensure it doesn't exclude other marks
        addOptions() {
            return {
                ...this.parent?.(),
                HTMLAttributes: {},
            };
        },
    });
    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-example'),
        extensions: [
            StarterKit.configure({
                textStyle: false,
                bold: false,
                marks: {
                    bold: false,
                },
            }),
            // Include the custom Bold extension
            CustomBold,
            TextStyle,
            Color,
            FontSizeTextStyle,
            FontFamily,
            Highlight,
            Underline,
            Link.configure({
                openOnClick: false,
                autolink: true,
                defaultProtocol: 'https',
            }),
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
            Image,
            YouTube,
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('toggleBoldButton').addEventListener('click', () => editor.chain().focus().toggleBold().run());
    document.getElementById('toggleItalicButton').addEventListener('click', () => editor.chain().focus().toggleItalic().run());
    document.getElementById('toggleUnderlineButton').addEventListener('click', () => editor.chain().focus().toggleUnderline().run());
    document.getElementById('toggleStrikeButton').addEventListener('click', () => editor.chain().focus().toggleStrike().run());
    document.getElementById('toggleHighlightButton').addEventListener('click', () => {
    const isHighlighted = editor.isActive('highlight');
    // when using toggleHighlight(), judge if is is already highlighted.
    editor.chain().focus().toggleHighlight({
        color: isHighlighted ? undefined : '#ffc078' // if is already highlighted，unset the highlight color
    }).run();
    });

    document.getElementById('toggleLinkButton').addEventListener('click', () => {
        const url = window.prompt('Enter image URL:', 'https://flowbite.com');
        editor.chain().focus().toggleLink({ href: url }).run();
    });
    document.getElementById('removeLinkButton').addEventListener('click', () => {
        editor.chain().focus().unsetLink().run()
    });
    document.getElementById('toggleCodeButton').addEventListener('click', () => {
        editor.chain().focus().toggleCode().run();
    })

    document.getElementById('toggleLeftAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('left').run();
    });
    document.getElementById('toggleCenterAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('center').run();
    });
    document.getElementById('toggleRightAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('right').run();
    });
    document.getElementById('toggleListButton').addEventListener('click', () => {
       editor.chain().focus().toggleBulletList().run();
    });
    document.getElementById('toggleOrderedListButton').addEventListener('click', () => {
        editor.chain().focus().toggleOrderedList().run();
    });
    document.getElementById('toggleBlockquoteButton').addEventListener('click', () => {
        editor.chain().focus().toggleBlockquote().run();
    });
    document.getElementById('toggleHRButton').addEventListener('click', () => {
        editor.chain().focus().setHorizontalRule().run();
    });
    document.getElementById('addImageButton').addEventListener('click', () => {
        const url = window.prompt('Enter image URL:', 'https://placehold.co/600x400');
        if (url) {
            editor.chain().focus().setImage({ src: url }).run();
        }
    });
    document.getElementById('addVideoButton').addEventListener('click', () => {
        const url = window.prompt('Enter YouTube URL:', 'https://www.youtube.com/watch?v=KaLxCiilHns');
        if (url) {
            editor.commands.setYoutubeVideo({
                src: url,
                width: 640,
                height: 480,
            })
        }
    });

    // typography dropdown
    const typographyDropdown = FlowbiteInstances.getInstance('Dropdown', 'typographyDropdown');

    document.getElementById('toggleParagraphButton').addEventListener('click', () => {
        editor.chain().focus().setParagraph().run();
        typographyDropdown.hide();
    });
    
    document.querySelectorAll('[data-heading-level]').forEach((button) => {
        button.addEventListener('click', () => {
            const level = button.getAttribute('data-heading-level');
            editor.chain().focus().toggleHeading({ level: parseInt(level) }).run()
            typographyDropdown.hide();
        });
    });

    const textSizeDropdown = FlowbiteInstances.getInstance('Dropdown', 'textSizeDropdown');

    // Loop through all elements with the data-text-size attribute
    document.querySelectorAll('[data-text-size]').forEach((button) => {
        button.addEventListener('click', () => {
            const fontSize = button.getAttribute('data-text-size');

            // Apply the selected font size via pixels using the TipTap editor chain
            editor.chain().focus().setMark('textStyle', { fontSize }).run();

            // Hide the dropdown after selection
            textSizeDropdown.hide();
        });
    });

    // Listen for color picker changes
    const colorPicker = document.getElementById('color');
    colorPicker.addEventListener('input', (event) => {
        const selectedColor = event.target.value;

        // Apply the selected color to the selected text
        editor.chain().focus().setColor(selectedColor).run();
    })

    document.querySelectorAll('[data-hex-color]').forEach((button) => {
        button.addEventListener('click', () => {
            const selectedColor = button.getAttribute('data-hex-color');

            // Apply the selected color to the selected text
            editor.chain().focus().setColor(selectedColor).run();
        });
    });

    document.getElementById('reset-color').addEventListener('click', () => {
        editor.commands.unsetColor();
    })

    const fontFamilyDropdown = FlowbiteInstances.getInstance('Dropdown', 'fontFamilyDropdown');

    // Loop through all elements with the data-font-family attribute
    document.querySelectorAll('[data-font-family]').forEach((button) => {
        button.addEventListener('click', () => {
            const fontFamily = button.getAttribute('data-font-family');

            // Apply the selected font size via pixels using the TipTap editor chain
            editor.chain().focus().setFontFamily(fontFamily).run();

            // Hide the dropdown after selection
            fontFamilyDropdown.hide();
        });
    });
}
})
` >}}

    
        
            
                
                
                    Toggle bold
                    
                
                
                
                    Toggle italic
                    
                
                
                
                    Toggle underline
                    
                
                
                
                    Toggle strike
                    
                
                
                
                    Toggle highlight
                    
                
                
                
                    Format code
                    
                
                
                
                    Add link
                    
                
                
                
                    Remove link
                    
                
                
                
                    Text size
                    
                
                
                    
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                    
                
                
                
                    Text color
                    
                
                
                    
                        
                        Pick a color
                    
                    
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    
                    
                
                
                
                    Font Family
                    
                
                
                    
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                    
                
                
                    
                
                
                
                    Align left
                    
                
                
                
                    Align center
                    
                
                
                
                    Align right
                    
                
            
    
    
        
        
            
        
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        
            
                Add image
                
            
            
            
                Add video
                
            
            
            
                Toggle list
            
        
        
        
            Toggle ordered list
            
        
        
        
            Toggle blockquote
            
        
        
        
            Toggle Horizontal Rule
            
        
    


    Publish post
    


{{< /example >}}

Notice: there is a known issue from TipTap when splitting blocks (ie. using enter to create break lines) and using the bullet list item. A quickfix for `v2.6.6` when using CDN is to match the import statements:

```html

```

If you're importing the package with Yarn or NPM then you need to add this in your `package.json` file:

```javascript
// when using Yarn
"resolutions": {
    "prosemirror-model": "1.19.3"
}

// when using NPM
"overrides": {
    "prosemirror-model": "1.19.3"
}
```

We recommend later checking the Tip Tap library for a proper update to prevent this quickfix in the future.

##### Text formatting

Use this example of a WYSIWYG text editor to enable typography styling, formatting and marking such as underline, bold, italic, strikethrough, code, highlight and also selecting text size, color, font family and more using the utility classes from Tailwind CSS.

{{< example id="default-wysiwyg-text-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';
import Highlight from 'https://esm.sh/@tiptap/extension-highlight@2.6.6';
import Underline from 'https://esm.sh/@tiptap/extension-underline@2.6.6';
import Subscript from 'https://esm.sh/@tiptap/extension-subscript@2.6.6';
import Superscript from 'https://esm.sh/@tiptap/extension-superscript@2.6.6';
import TextStyle from 'https://esm.sh/@tiptap/extension-text-style@2.6.6';
import FontFamily from 'https://esm.sh/@tiptap/extension-font-family@2.6.6';
import { Color } from 'https://esm.sh/@tiptap/extension-color@2.6.6';
import Bold from 'https://esm.sh/@tiptap/extension-bold@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-text-example")) {

    const FontSizeTextStyle = TextStyle.extend({
        addAttributes() {
            return {
            fontSize: {
                default: null,
                parseHTML: element => element.style.fontSize,
                renderHTML: attributes => {
                if (!attributes.fontSize) {
                    return {};
                }
                return { style: 'font-size: ' + attributes.fontSize };
                },
            },
            };
        },
    });
    const CustomBold = Bold.extend({
    // Override the renderHTML method
    renderHTML({ HTMLAttributes }) {
    return ['span', { ...HTMLAttributes, style: 'font-weight: bold;' }, 0];
    },
    // Ensure it doesn't exclude other marks
    excludes: '',
    });

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-text-example'),
          extensions: [
            StarterKit.configure({
                textStyle: false,
                bold: false,
                marks: {
                    bold: false,
                },
            }),
            // Include the custom Bold extension
            CustomBold,
            Highlight,
            Underline,
            Subscript,
            Superscript,
            TextStyle,
            FontSizeTextStyle,
            Color,
            FontFamily
        ],
        content: 'Flowbite React is an open-source library of UI components built using React and Tailwind CSS. It supports dark mode, a Figma design system, and more.
It includes essential components for web apps like buttons, dropdowns, navigation bars, modals, datepickers, and charts, all optimized for React.
Example button component in Flowbite React:
import { Button } from 'flowbite-react'; <Button color="blue">Default</Button>These components can also be easily customized using the theme props from the Flowbite Docs and allows you to add your own Tailwind CSS utility classes to override the default styles.
Explore more components and props values in the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('toggleBoldButton').addEventListener('click', () => editor.chain().focus().toggleBold().run());
    document.getElementById('toggleItalicButton').addEventListener('click', () => editor.chain().focus().toggleItalic().run());
    document.getElementById('toggleUnderlineButton').addEventListener('click', () => editor.chain().focus().toggleUnderline().run());
    document.getElementById('toggleStrikeButton').addEventListener('click', () => editor.chain().focus().toggleStrike().run());
    document.getElementById('toggleSubscriptButton').addEventListener('click', () => editor.chain().focus().toggleSubscript().run());
    document.getElementById('toggleSuperscriptButton').addEventListener('click', () => editor.chain().focus().toggleSuperscript().run());
    document.getElementById('toggleHighlightButton').addEventListener('click', () => {
    const isHighlighted = editor.isActive('highlight');
    // when using toggleHighlight(), judge if is is already highlighted.
    editor.chain().focus().toggleHighlight({
        color: isHighlighted ? undefined : '#ffc078' // if is already highlighted，unset the highlight color
    }).run();
    });

    document.getElementById('toggleCodeButton').addEventListener('click', () => {
        editor.chain().focus().toggleCode().run();
    });

    const textSizeDropdown = FlowbiteInstances.getInstance('Dropdown', 'textSizeDropdown');

    // Loop through all elements with the data-text-size attribute
    document.querySelectorAll('[data-text-size]').forEach((button) => {
        button.addEventListener('click', () => {
            const fontSize = button.getAttribute('data-text-size');

            // Apply the selected font size via pixels using the TipTap editor chain
            editor.chain().focus().setMark('textStyle', { fontSize }).run();

            // Hide the dropdown after selection
            textSizeDropdown.hide();
        });
    });

    // Listen for color picker changes
    const colorPicker = document.getElementById('color');
    colorPicker.addEventListener('input', (event) => {
        const selectedColor = event.target.value;

        // Apply the selected color to the selected text
        editor.chain().focus().setColor(selectedColor).run();
    })

    document.querySelectorAll('[data-hex-color]').forEach((button) => {
        button.addEventListener('click', () => {
            const selectedColor = button.getAttribute('data-hex-color');

            // Apply the selected color to the selected text
            editor.chain().focus().setColor(selectedColor).run();
        });
    });

    document.getElementById('reset-color').addEventListener('click', () => {
        editor.commands.unsetColor();
    })

    const fontFamilyDropdown = FlowbiteInstances.getInstance('Dropdown', 'fontFamilyDropdown');

    // Loop through all elements with the data-font-family attribute
    document.querySelectorAll('[data-font-family]').forEach((button) => {
        button.addEventListener('click', () => {
            const fontFamily = button.getAttribute('data-font-family');

            // Apply the selected font size via pixels using the TipTap editor chain
            editor.chain().focus().setFontFamily(fontFamily).run();

            // Hide the dropdown after selection
            fontFamilyDropdown.hide();
        });
    });

    }
})
` >}}

    
        
            
                
                
                    Toggle bold
                    
                
                
                
                    Toggle italic
                    
                
                
                
                    Toggle underline
                    
                
                
                
                    Toggle strike
                    
                
                
                
                    Toggle subscript
                    
                
                
                
                    Toggle superscript
                    
                
                
                
                    Toggle highlight
                    
                
                
                
                    Format code
                    
                
                
                
                    Text size
                    
                
                
                    
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                    
                
                
                
                    Text color
                    
                
                
                    
                        
                        Pick a color
                    
                    
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    
                    
                
                
                
                    Font Family
                    
                
                
                    
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                        
                            
                        
                    
                
            
    


    Write comment
    


{{< /example >}}

##### Text alignment

Enable text alignment to the left, center, right, and justify for the content inside of the WYSIWYG component.

{{< example id="default-wysiwyg-alignment-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';
import Highlight from 'https://esm.sh/@tiptap/extension-highlight@2.6.6';
import Underline from 'https://esm.sh/@tiptap/extension-underline@2.6.6';
import Link from 'https://esm.sh/@tiptap/extension-link@2.6.6';
import TextAlign from 'https://esm.sh/@tiptap/extension-text-align@2.6.6';
import Image from 'https://esm.sh/@tiptap/extension-image@2.6.6';
import YouTube from 'https://esm.sh/@tiptap/extension-youtube@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-alignment-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-alignment-example'),
        extensions: [
            StarterKit,
            Highlight,
            Underline,
            Link.configure({
                openOnClick: false,
                autolink: true,
                defaultProtocol: 'https',
            }),
            TextAlign.configure({
                types: ['heading', 'paragraph'],
            }),
            Image,
            YouTube
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('toggleLeftAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('left').run();
    });
    document.getElementById('toggleCenterAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('center').run();
    });
    document.getElementById('toggleRightAlignButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('right').run();
    });
    document.getElementById('toggleJustifyButton').addEventListener('click', () => {
        editor.chain().focus().setTextAlign('justify').run();
    });
    }
})
` >}}

    
        
            
                
                
                    Align left
                    
                
                
                
                    Align center
                    
                
                
                
                    Align right
                    
                
                
                
                    Justify text
                    
                
            
    


    Publish post
    


{{< /example >}}

##### Typography elements

Use this example to create typography elements like bullet lists, ordered lists, blockquotes, horizontal rules, paragraphs, headings, code blocks based on Tailwind CSS utility classees and the Flowbite API.

{{< example id="default-wysiwyg-typography-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-typography-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-typography-example'),
        extensions: [
            StarterKit
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Over 600+ open-source UI components
Supports dark mode and RTL
Available in React, Vue, Svelte frameworks
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('toggleListButton').addEventListener('click', () => {
       editor.chain().focus().toggleBulletList().run();
    });
    document.getElementById('toggleOrderedListButton').addEventListener('click', () => {
        editor.chain().focus().toggleOrderedList().run();
    });
    document.getElementById('toggleBlockquoteButton').addEventListener('click', () => {
        editor.chain().focus().toggleBlockquote().run();
    });
    document.getElementById('toggleHRButton').addEventListener('click', () => {
        editor.chain().focus().setHorizontalRule().run();
    });
    document.getElementById('toggleCodeBlockButton').addEventListener('click', () => {
        editor.chain().focus().toggleCodeBlock().run();
    });

    // typography dropdown
    const typographyDropdown = FlowbiteInstances.getInstance('Dropdown', 'typographyDropdown');

    document.getElementById('toggleParagraphButton').addEventListener('click', () => {
        editor.chain().focus().setParagraph().run();
        typographyDropdown.hide();
    });
    
    document.querySelectorAll('[data-heading-level]').forEach((button) => {
        button.addEventListener('click', () => {
            const level = button.getAttribute('data-heading-level');
            editor.chain().focus().toggleHeading({ level: parseInt(level) }).run()
            typographyDropdown.hide();
        });
    });
}
})
` >}}

    
    
        
        
            
        
        
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
        
        
            
            
                Toggle code block
                
            
            
            
                Toggle list
                
            
            
            
                Toggle ordered list
                
            
            
            
                Toggle blockquote
                
            
            
            
                Toggle Horizontal Rule
                
            
        
    


    Publish post
    


{{< /example >}}

##### Configuring links

Use this example to add and remove anchor links for the content inside of the WYSIWYG text editor.

{{< example id="default-wysiwyg-links-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';
import Link from 'https://esm.sh/@tiptap/extension-link@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-links-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-links-example'),
        extensions: [
            StarterKit,
            Link.configure({
                openOnClick: false,
                autolink: true,
                defaultProtocol: 'https',
            })
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('toggleLinkButton').addEventListener('click', () => {
        const url = window.prompt('Enter image URL:', 'https://flowbite.com');
        editor.chain().focus().toggleLink({ href: url }).run();
    });
    document.getElementById('removeLinkButton').addEventListener('click', () => {
        editor.chain().focus().unsetLink().run()
    });
}
})
` >}}

    
        
            
                
                
                    Add link
                    
                
                
                
                    Remove link
                    
                
            
    


    Publish post
    


{{< /example >}}

##### Using images

Use this example to learn how to add images inside of the WYSIWYG text editor and configure settings such as the image URL, image alt attribute which is important for SEO and accessibility and the image title.

{{< example id="default-wysiwyg-image-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';
import Image from 'https://esm.sh/@tiptap/extension-image@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-images-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-images-example'),
        extensions: [
            StarterKit,
            Image
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('addImageButton').addEventListener('click', () => {
        const url = window.prompt('Enter image URL:', 'https://placehold.co/600x400');
        if (url) {
            editor.chain().focus().setImage({ src: url }).run();
        }
    });

    const advancedImageModal = FlowbiteInstances.getInstance('Modal', 'advanced-image-modal');
    
    document.getElementById('advancedImageForm').addEventListener('submit', (e) => {

        e.preventDefault();
        
        const imageUrl = document.getElementById('URL').value;
        const imageAlt = document.getElementById('alt').value;
        const imageTitle = document.getElementById('title').value;

        if (imageUrl) {
            editor.chain().focus().setImage({ src: imageUrl, alt: imageAlt ? imageAlt : '', title: imageTitle ? imageTitle: '' }).run();
            document.getElementById('advancedImageForm').reset();
            advancedImageModal.hide();
        }
    });
    
}
})
` >}}

    
    
        
            
            
                Add image
                
            
            
            
                Image with settings
                
            
        
    


    Publish post
    





    
        
        
            
            
                
                    Insert advanced image
                
                
            
            
            
                
                    
                        Image URL
                        
                    
                    
                        Image alt
                        
                    
                    
                        Image title
                        
                    
                    
                
            
        
    

{{< /example >}}

##### Adding videos

Use this example to embed videos inside the WYSIWYG text editor based on a YouTube URL source and set the width and height of the video by using the Flowbite modal component API.

{{< example id="default-wysiwyg-video-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';
import YouTube from 'https://esm.sh/@tiptap/extension-youtube@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-video-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-video-example'),
        extensions: [
            StarterKit,
            YouTube
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('addVideoButton').addEventListener('click', () => {
        const url = window.prompt('Enter YouTube URL:', 'https://www.youtube.com/watch?v=KaLxCiilHns');
        if (url) {
            editor.commands.setYoutubeVideo({
                src: url,
                width: 640,
                height: 480,
            })
        }
    });

    const advancedVideoModal = FlowbiteInstances.getInstance('Modal', 'advanced-video-modal');
    
    document.getElementById('advancedVideoForm').addEventListener('submit', (e) => {

        e.preventDefault();
        
        const videoUrl = document.getElementById('URL').value;
        const videoWidth = document.getElementById('width').value;
        const videoHeight = document.getElementById('height').value;

        if (videoUrl) {
            editor.commands.setYoutubeVideo({ src: videoUrl, width: videoWidth ? videoWidth : 640, height: videoHeight ? videoHeight: 480 });
            document.getElementById('advancedVideoForm').reset();
            advancedVideoModal.hide();
        }
    });
    
}
})
` >}}

    
    
        
            
            
                Add video
                
            
            
            
                Video with settings
                
            
        
    


    Publish post
    






    
        
        
            
            
                
                    Insert advanced video
                
                
            
            
            
                
                    
                        YouTube URL
                        
                    
                    
                        
                            Video width
                            
                        
                        
                            Video height
                            
                        
                    
                    
                
            
        
    
 
{{< /example >}}

##### Editing tables

Use this example to edit table data inside the WYSIWYG text editor by adding and removing table column, rows, and cells and use other features to navigate through the table data for a convenient editing process.

{{< example id="default-wysiwyg-tables-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';
import Table from 'https://esm.sh/@tiptap/extension-table@2.6.6';
import TableCell from 'https://esm.sh/@tiptap/extension-table-cell@2.6.6';
import TableHeader from 'https://esm.sh/@tiptap/extension-table-header@2.6.6';
import TableRow from 'https://esm.sh/@tiptap/extension-table-row@2.6.6';

const TipTapExtensionTableCell = TableCell.extend({
	addAttributes() {
		return {
			...this.parent?.(),
			backgroundColor: {
				default: null,
				renderHTML: (attributes) => {
					if (!attributes.backgroundColor) {
						return {}
					}

					return {
						style: 'background-color: ' + attributes.backgroundColor,
					}
				},
				parseHTML: (element) => {
					return element.style.backgroundColor.replace(/['"]+/g, '')
				},
			},
		}
	},
});

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-tables-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-tables-example'),
        extensions: [
            StarterKit,
            Table.configure({
                resizable: true,
            }),
            TableRow,
            TableHeader,
            TableCell,
            TipTapExtensionTableCell
        ],
        content: 'Understanding global population growth trends is essential for analyzing the development and future of nations. Population growth rates provide insights into economic prospects, resource allocation, and potential challenges for countries worldwide.
Here is an example of population data:
Country Population Growth rate
United States 333 million 0.4%
China 1.41 billion 0%
Germany 83.8 million 0.7%
India 1.42 billion 1.0%
Brazil 214 million 0.6%
Indonesia 273 million 1.1%
Pakistan 231 million 2.0%
Nigeria 223 million 2.5%
Learn more about global population trends from reliable sources like the World Population Review.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('addTableButton').addEventListener('click', () => {
        editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();
    });

    // add column before
    document.getElementById('addColumnBeforeButton').addEventListener('click', () => {
        editor.chain().focus().addColumnBefore().run();
    });

    // add column after
    document.getElementById('addColumnAfterButton').addEventListener('click', () => {
        editor.chain().focus().addColumnAfter().run();
    });

    // remove column
    document.getElementById('removeColumnButton').addEventListener('click', () => {
        editor.chain().focus().deleteColumn().run();
    });

    // add row before
    document.getElementById('addRowBeforeButton').addEventListener('click', () => {
        editor.chain().focus().addRowBefore().run();
    });

    // add row after
    document.getElementById('addRowAfterButton').addEventListener('click', () => {
        editor.chain().focus().addRowAfter().run();
    });

    // remove row
    document.getElementById('removeRowButton').addEventListener('click', () => {
        editor.chain().focus().deleteRow().run();
    });

    // delete table
    document.getElementById('deleteTableButton').addEventListener('click', () => {
        editor.chain().focus().deleteTable().run();
    });

    // merge cells
    document.getElementById('mergeCellsButton').addEventListener('click', () => {
        editor.chain().focus().mergeCells().run();
    });

    // split cells
    document.getElementById('splitCellsButton').addEventListener('click', () => {
        editor.chain().focus().splitCell().run();
    });

    // merge or split
    document.getElementById('mergeOrSplitButton').addEventListener('click', () => {
        editor.chain().focus().mergeOrSplit().run();
    });

    // toggle header column
    document.getElementById('toggleHeaderColumnButton').addEventListener('click', () => {
        editor.chain().focus().toggleHeaderColumn().run();
    });

    // toggle header row
    document.getElementById('toggleHeaderRowButton').addEventListener('click', () => {
        editor.chain().focus().toggleHeaderRow().run();
    });

    // toggle header cell
    document.getElementById('toggleHeaderCellButton').addEventListener('click', () => {
        editor.chain().focus().toggleHeaderCell().run();
    });

    const cellAttributeModal = FlowbiteInstances.getInstance('Modal', 'cell-attribute-modal');
    
    document.getElementById('addCellAttributeForm').addEventListener('submit', (e) => {

        e.preventDefault();
        
        const attributeName = document.getElementById('attribute-name').value;
        const attributeValue = document.getElementById('attribute-value').value;

        if (attributeName && attributeValue) {
            const result = editor.commands.setCellAttribute(attributeName ? attributeName : '', attributeValue ? attributeValue : '');
            document.getElementById('addCellAttributeForm').reset();
            cellAttributeModal.hide();
        }
    });

    // fix tables
    document.getElementById('fixTablesButton').addEventListener('click', () => {
       editor.commands.fixTables();
    });

    // go to previous cell
    document.getElementById('previousCellButton').addEventListener('click', () => {
        editor.chain().focus().goToPreviousCell().run();
    });

    // go to the next cell
    document.getElementById('nextCellButton').addEventListener('click', () => {
        editor.chain().focus().goToNextCell().run();
    });
}
})
` >}}

    
    
        
            
            
                Add table
                
            
            
            
                Delete table
                
            
            
                
            
            
            
                Add column before
                
            
            
            
                Add column after
                
            
            
            
                Remove column
                
            
            
                
            
            
            
                Add row before
                
            
            
            
                Add row after
                
            
            
            
                Remove row
                
            
        
    
    
        
        
            Merge cells
            
        
        
        
            Split cells
            
        
        
        
            Merge or split
            
        
        
            
        
        
        
            Toggle header column
            
        
        
        
            Toggle header row
            
        
        
        
            Toggle header cell
            
        
        
        
            Add cell attribute
            
        
        
            
        
        
        
            Fix tables
            
        
        
        
            Previous cell
            
        
        
        
            Next cell
            
        
    


    Publish post
    




    
        
        
            
            
                
                    Add cell attribute
                
                
            
            
            
                
                    
                        Attribute name
                        
                    
                    
                        Attribute value
                        
                    
                    
                
            
        
    

{{< /example >}}

##### Undo and redo

Use the history functionality from the WYSIWYG text editor component to integrate undo and redo actions.

{{< example id="default-wysiwyg-history-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-history-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-history-example'),
        extensions: [
            StarterKit
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    // set up custom event listeners for the buttons
    document.getElementById('toggleUndoButton').addEventListener('click', () => {
        editor.chain().focus().undo().run();
    });
    document.getElementById('toggleRedoButton').addEventListener('click', () => {
        editor.chain().focus().redo().run()
    });

}
})
` >}}

    
        
            
                
                
                    Undo
                    
                
                
                
                    Redo
                    
                
            
    


    Publish post
    


{{< /example >}}

##### Exporting data

Use the `editor.getJSON()` and the `editor.getHTML()` functions to export the text content inside of the WYSIWYG text editor in JSON or raw HTML format to persist into your database or API structure.

{{< example id="default-wysiwyg-export-example" class="flex justify-center dark:bg-gray-900" github="plugins/wysiwyg.md" show_dark=true wysiwyg=true script_module=true  disable_init_js=true javascript=`
import { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';
import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';

window.addEventListener('load', function() {
    if (document.getElementById("wysiwyg-export-example")) {

    // tip tap editor setup
    const editor = new Editor({
        element: document.querySelector('#wysiwyg-export-example'),
        extensions: [
            StarterKit
        ],
        content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Here is an example of a button component:
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>Learn more about all components from the Flowbite Docs.',
        editorProps: {
            attributes: {
                class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
            },
        }
    });

    const sourceCodeModal = FlowbiteInstances.getInstance('Modal', 'source-code-modal');
    const sourceCodeWrapper = document.getElementById('sourceCode');

    // set up custom event listeners for the buttons
    document.getElementById('toggleHTMLButton').addEventListener('click', () => {

        // basically just use editor.getHTML(); to get the raw html

        sourceCodeWrapper.innerHTML = editor.getHTML()
            .replace(/&/g, "&") // Escape & character
            .replace(//g, ">")  // Escape > character
            .replace(/"/g, """) // Escape " character
            .replace(/'/g, "'"); // Escape ' character
    });

    document.getElementById('toggleJSONButton').addEventListener('click', () => {

        // basically just use editor.getJSON(); to get the raw json

        sourceCode.innerHTML = JSON.stringify(editor.getJSON(), null, 2)
            .replace(/&/g, "&")
            .replace(//g, ">");
    });
}
})
` >}}

    
        
            
                
                
                    Get JSON
                    
                
                
                
                    Get HTML
                    
                
            
    


    Publish post
    




    
        
        
            
            
                
                    JSON/HTML data export result
                
                
            
            
            
                
            
        
    

{{< /example >}}

##### Javascript behaviour

Learn more about how you can programmatically use the WYSIWYG editor using Javascript by creating a new instance of the object, setting options, method, event listeners, and more to integrate with your code base.

After you have installed Tip Tap via NPM or CDN you can create a new `Editor` object:

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

new Editor({
  element: document.getElementById('wysiwyg'),
  extensions: [StarterKit],
  content: 'Welcome to Flowbite!',
})
```

Make sure that you also have an empty `div` element with the appropiate ID:

```html

```

This code will automatically set up the markup needed inside of the WYSIWYG component. Please note the fact that the Tip Tap library is headless so you need to style the elements yourself, but you can copy-paste the examples from Flowbite on this page.

###### Content styling

We also recommend adding custom typography classes from the [Flowbite Typography](https://flowbite.com/docs/components/typography/) package so that the content inside of the text editor will be correctly styled:

```javascript
new Editor({
  element: document.getElementById('wysiwyg'),
  extensions: [StarterKit],
  content: 'Welcome to Flowbite!',
  editorProps: {
        attributes: {
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
        },
    }
})
```

###### Extensions

Tip Tap is a modular library meaning that if you want to introduce images, videos, links and other elements inside the WYSIWYG component you need to specifically import that resources from the library and set it as an extension when initialising the `Editor` object.

Here is one example where we add the link extension:

```javascript
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';

const editor = new Editor({
    element: document.querySelector('#wysiwyg-links-example'),
    extensions: [
        StarterKit,
        Link.configure({
            openOnClick: false,
            autolink: true,
            defaultProtocol: 'https',
        })
    ],
    content: 'Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.
Learn more about all components from the Flowbite Docs.',
    editorProps: {
        attributes: {
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
        },
    }
});
```

Links will now be available inside the WYSIWYG component. Learn more about all of the extensions API.

###### Methods

You can easily call the methods from the `Editor` object to set text styles, links, images, and more. Here is one example where based upon a click event on a button you will be prompted with the URL of the link and it will add it to the currently selected text:

```javascript
// set up custom event listeners for the buttons
document.getElementById('toggleLinkButton').addEventListener('click', () => {
    const url = window.prompt('Enter image URL:', 'https://flowbite.com');
    editor.chain().focus().toggleLink({ href: url }).run();
});
```

And here's another example where you can unset a link:

```javascript
// unset the links based on a button click
document.getElementById('removeLinkButton').addEventListener('click', () => {
    editor.chain().focus().unsetLink().run()
});
```

Examples from this page have functional elements so you can check the JavaScript tab for the source code.

##### License

Resources from this page are licensed under the MIT License, including the Flowbite examples and Tip Tap.

### Other resources

- [Flowbite Figma](https://flowbite.com/figma/)
- [Flowbite Icons](https://flowbite.com/icons/)
- [Flowbite Illustrations](https://flowbite.com/illustrations/)
- [Flowbite Pro](https://flowbite.com/pro/)

Option	Type	Description
`contentType`	String	Set the source of the text that will be copied: input (default), innerHTML or textContent.
`htmlEntities`	String	Set this option to true if you want to decode the HTML entities for code blocks. Default is false.
`onCopy`	Function	Set a callback function when the text has been copied to the clipboard.

Method	Description
`getTargetValue()`	Get the value of the target element (ie. input field, code block, address tag).
`copy()`	Use this method to copy the text from the target element to the clipboard.
`decodeHTML()`	Use this method to decode the HTML entities from the target element.
`updateOnCopyCallback(callback)`	Use this method to update the callback function that is called when the text has been copied to the clipboard.

Parameter	Type	Required	Description
`datepickerEl`	Element	Required	Pass the main HTML element that will be rendered for the datepicker. It can be an input element or a `div` for inline rendering.
`options`	Object	Optional	Use the options parameter to set custom datepicker options such as the default date, minimum and maximum values, action buttons and callback functions.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

Option	Type	Description
`rangePicker`	Boolean	If set to true then the datepicker will be converted to a date range picker. By default it's false.
`format`	String	Use this option to set a custom format for the datepicker. By default it's `mm/dd/yyyy`.
`maxDate`	String	Use this option to set the maximum selectable date of the datepicker component.
`minDate`	String	Use this option to set the minimum selectable date of the datepicker component.
`orientation`	String	Set the orientation of the datepicker component when it's not inline. It can be top, bottom, left, or right.
`buttons`	Boolean	If set to true then the "today" and "clear" action buttons will be shown that lets you select today's date or clear selections.
`autoSelectToday`	Integer	If set to 1 then it will automatically have today's date preselected.
`title`	String	Set a custom title for the datepicker component. By default it's null.

Method	Description
`getDate()`	Use this method to get the currenctly select date from the datepicker.
`setDate()`	Use this method to set the date value of the datepicker component.
`show()`	Use this function to programatically show the datepicker component.
`hide()`	Use this function to programatically hide the datepicker component.
`getDatepickerInstance()`	Use this method to get the parent datepicker instance with the extended collection of methods and options.
`updateOnShow(callback)`	Use this method to set a callback function whenever the datepicker component has been shown.
`updateOnHide(callback)`	Use this method to set a callback function whenever the datepicker component has been hidden.

Option	Type	Description
`placement`	String	Set the position of the drawer component relative to the document body by choosing one of the values from `{top\|right\|bottom\|left}`.
`backdrop`	Boolean	Enable or disable the backdrop element. Values can be `true` or `false`.
`bodyScrolling`	Boolean	Enable or disable body scrolling behaviour when the drawer is active. Values can be `true` or `false`.
`edge`	Boolean	Enable or disable the edge functionality by showing a small part of the drawer component even when inactive. Values can be `true` or `false`.
`edgeOffset`	String	Set the offset height that should be shown when the drawer is inactive. Default value is `bottom-[60px]`
`backdropClasses`	String	Set a string of Tailwind CSS utility classes to override the custom backdrop classes.
`onShow()`	Function	Set a callback function when the drawer has been shown.
`onHide()`	Function	Set a callback function when the drawer has been hidden.
`onToggle()`	Function	Set a callback function when the drawer visibility has been toggled.

Method	Description
`show()`	Use the show function to show the drawer element.
`hide()`	Use the hide function to hide the drawer element.
`toggle()`	Use the toggle function to toggle the drawer element's visibility.
`isVisible()`	Use the isVisible function to check whether the element is visible or not.
`updateOnShow(callback)`	Set a callback function when the drawer has been shown.
`updateOnHide(callback)`	Set a callback function when the drawer has been hidden.
`updateOnToggle(callback)`	Set a callback function when the drawer visibility has been toggled.

Parameter	Type	Required	Description
`targetElement`	Element	Required	Apply the main dropdown menu element as the first parameter of the Dropdown object.
`triggerElement`	Element	Required	Apply the trigger element, such as a button, which is required to position the dropdown menu and set a click event.
`options`	Object	Optional	Use the options parameter to set the positioning of the dropdown menu.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

Option	Type	Description
`placement`	String	Set the position of the dropdown menu relative to the trigger element choosing from `top\|right\|bottom\|left`.
`triggerType`	String	Set the event type that will trigger the dropdown menu choosing between `hover\|click\|none`.
`offsetDistance`	String	Set the amount of pixels the dropdown menu should be offset relative to the trigger element on the X horizontal axis.
`offsetSkidding`	String	Set the number of pixels the dropdown menu should be offset relative to the trigger element on the Y horizontal axis.
`delay`	Number	Set the milliseconds for which the showing or hiding of the dropdown will be delayed for when using the hover trigger type.
`ignoreClickOutsideClass`	String	Set a class for one or more elements that when they are clicked should ignore closing the dropdown (ie. offcanvas datepicker).
`onHide`	Function	Set a callback function when the dropdown has been hidden.
`onShow`	Function	Set a callback function when the dropdown has been shown.
`onToggle`	Function	Set a callback function when the dropdown visibility has been toggled.

Method	Description
`show()`	Use this method on the Dropdown object to show the dropdown menu.
`hide()`	Use this method on the Dropdown object to hide the dropdown menu.
`toggle()`	Use this method on the Dropdown object to toggle the visibility of the dropdown menu.
`isVisible()`	Returns true or false based on the visibility of the dropdown.
`updateOnShow(callback)`	Use this method to set a callback function when the dropdown has been shown.
`updateOnHide(callback)`	Use this method to set a callback function when the dropdown has been hidden.
`updateOnToggle(callback)`	Use this method to set a callback function when the dropdown visibility has been changed.

Key	Description
`Shift` or `Tab`	Navigate to interactive elements
`Enter` or `Spacebar`	Ensure elements with ARIA role="button" can be activated with both key commands.
`Arrow key up` `Arrow key down` or `Arrow key left` `Arrow key right`	Choose and activate previous/next tab.

Option	Type	Description
`placement`	String	Set the position of the modal element relative to the document body by choosing one of the values from `{top\|center\|right}-{left\|center\|right}`. (eg. top-left or bottom-right)
`backdrop`	String	Choose between `static` or `dynamic` to prevent closing the modal when clicking outside.
`backdropClasses`	String	Set a string of Tailwind CSS classes for the backdrop element (eg. `'bg-blue-500 dark:bg-blue-400'`.
`closable`	Boolean	Set to `false` to disable closing the modal on hitting ESC or clicking on the backdrop.
`onHide`	Function	Set a callback function when the modal has been hidden.
`onShow`	Function	Set a callback function when the modal has been shown.
`onToggle`	Function	Set a callback function when the modal visibility has been toggled.

Method	Description
`toggle()`	Use the toggle function on the Modal object to toggle the modal element's visibility.
`show()`	Use the show function on the Modal object to show the modal element.
`hide()`	Use the hide function on the Modal object to hide the modal element.
`isHidden()`	Use this function to check if the modal is hidden.
`isVisible()`	Use this function to check if the modal is visible.
`updateOnShow(callback)`	Use this method to set a custom callback function when the modal has been shown.
`updateOnHide(callback)`	Use this method to set a custom callback function when the modal has been closed.
`updateOnToggle(callback)`	Use this method to set a custom callback function when the modal visibility has been toggled.

Option	Type	Description
`onCollapse`	Function	Set a callback function when the item has been collapsed.
`onExpand`	Function	Set a callback function when the item has been expanded.
`onToggle`	Function	Set a callback function when the item has either been expanded or collapsed.

Method	Description
`collapse()`	Use this method on the Collapse object to hide the target element.
`expand()`	Use this method on the Collapse object to show the target element.
`toggle()`	Use this method on the Collapse object toggle the current visibility of the target element.
`updateOnCollapse(callback)`	Use this method to set a callback function when the item has been collapsed.
`updateOnExpand(callback)`	Use this method to set a callback function when the item has been expanded.
`updateOnToggle(callback)`	Use this method to set a callback function when the item has been toggled.

Option	Type	Description
`placement`	String	Set the position of the popover element relative to the trigger element choosing from `top\|right\|bottom\|left`.
`triggerType`	String	Set the event type that will trigger the popover content choosing between `hover\|click\|none`.
`offset`	Integer	Set the offset distance between the popover and the trigger element.
`onHide`	Function	Set a callback function when the popover is hidden.
`onShow`	Function	Set a callback function when the popover is shown.
`onToggle`	Function	Set a callback function when the popover visibility has been toggled.

Method	Description
`show()`	Use this method on the Popover object to show the popover content.
`hide()`	Use this method on the Popover object to hide the popover content.
`toggle()`	Use this method on the Popover object to toggle the visibility of the popover content.
`isVisible()`	Use this function to check if the popover is visible or not.
`updateOnShow(callback)`	Use this method to set a custom callback function when the popover has been shown.
`updateOnHide(callback)`	Use this method to set a custom callback function when the popover has been hidden.
`updateOnToggle(callback)`	Use this method to set a custom callback function when the popover has been toggled.

Parameter	Type	Required	Description
`parentEl`	Element	Required	This is the parent and main wrapping element of the speed dial component.
`triggerEl`	Element	Required	Set a button as the trigger element for the speed dial.
`targetEl`	Element	Required	This is the element that is the list of menu items or buttons that will be toggled.
`options`	Object	Optional	Use the options parameter to set the trigger type and other options of the speed dial.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

Method	Description
`show()`	Use this method on the Speed Dial object to show the list of menu items or buttons.
`hide()`	Use this method on the Speed Dial object to hide the list of menu items or buttons.
`toggle()`	Use this method on the Speed Dial object to toggle the visibility of the list of menu items or buttons.
`updateOnShow(callback)`	Use this method to set a callback function when the dial has been shown.
`updateOnHide(callback)`	Use this method to set a callback function when the dial has been hidden.
`updateOnToggle(callback)`	Use this method to set a callback function when the dial visibility has been changed.

Product name	Color	Category	Price
Apple MacBook Pro 17"	Silver	Laptop	$2999
Microsoft Surface Pro	White	Laptop PC	$1999
Magic Mouse 2	Black	Accessories	$99

Quickstart

Components

Figma design files

Flowbite Icons

Flowbite Blocks

Upgrade to Pro

Hello Tailwind CSS!

Hello Tailwind CSS!

Dark mode

What is Flowbite?

Is there a Figma file available?

What are the differences between Flowbite and Tailwind UI?

What is Flowbite?

Is there a Figma file available?

What are the differences between Flowbite and Tailwind UI?

What is Flowbite?

Is there a Figma file available?

What are the differences between Flowbite and Tailwind UI?

What is Flowbite?

Is there a Figma file available?

What are the differences between Flowbite and Tailwind UI?

Accordion without an arrow

Accordion with another icon

Accordion without arrow rotation

What is Flowbite?

Open source

Architecture

Can I use both?

Is there a Figma file available?

What is Flowbite?

Is there a Figma file available?

What are the differences between Flowbite and Tailwind UI?

This is a info alert

This is a danger alert

This is a success alert

This is a warning alert

This is a dark alert

Integration is the key

Noteworthy technology acquisitions 2021

Noteworthy technology acquisitions 2021

Need a help in Claim?

Noteworthy technology acquisitions 2021

Noteworthy technology acquisitions 2021

Bonnie Green

Sign in to our platform

Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport

Work fast from anywhere

Powering innovation & trust at 200,000+ companies worldwide

We invest in the world’s potential

We invest in the world’s potential

What is Flowbite?

Is there a Figma file available?

What are the differences between Flowbite and Tailwind UI?

Latest Customers

Standard plan

Very easy this was to integrate

Solid foundation for any project

Mindblowing workflow

Efficient Collaborating

Connect wallet

Create a role with read only in-line policies

Contact details

Info

Menu

Contact us

New event

Left drawer

Right drawer

Top drawer

Bottom drawer

Menu

Menu

Menu

Menu

Add widget

Info

Step 1

Step 2

Step 2

Step 3

checkbox	Product name	Color	Category	Accessories	Available	Price	Weight	Action
checkbox	Apple MacBook Pro 17"	Silver	Laptop	Yes	Yes	$2999	3.0 lb.	Edit Remove
checkbox	Microsoft Surface Pro	White	Laptop PC	No	Yes	$1999	1.0 lb.	Edit Remove
checkbox	Magic Mouse 2	Black	Accessories	Yes	No	$99	0.2 lb.	Edit Remove
checkbox	Apple Watch	Black	Watches	Yes	No	$199	0.12 lb.	Edit Remove
checkbox	Apple iMac	Silver	PC	Yes	Yes	$2999	7.0 lb.	Edit Remove
checkbox	Apple AirPods	White	Accessories	No	Yes	$399	38 g	Edit Remove
checkbox	iPad Pro	Gold	Tablet	No	Yes	$699	1.3 lb.	Edit Remove
checkbox	Magic Keyboard	Black	Accessories	Yes	Yes	$99	453 g	Edit Remove
checkbox	Apple TV 4K	Black	TV	Yes	No	$179	1.78 lb.	Edit Remove
checkbox	AirTag	Silver	Accessories	Yes	No	$29	53 g	Edit Remove

checkbox	Name	Position	Status	Action
checkbox	Neil Sims neil.sims@flowbite.com	React Developer	Online	Edit user
checkbox	Bonnie Green bonnie@flowbite.com	Designer	Online	Edit user
checkbox	Jese Leos jese@flowbite.com	Vue JS Developer	Online	Edit user
checkbox	Thomas Lean thomes@flowbite.com	UI/UX Engineer	Online	Edit user
checkbox	Leslie Livingston leslie@flowbite.com	SEO Specialist	Offline	Edit user

Parameter	Type	Required	Description
`tabsElement`	Element	Required	Parent HTML element of the tabs component.
`items`	Array	Required	Array of the tab objects including the id, trigger element, and the content element.
`options`	Object	Optional	An object of options for the appearances of the tabs and to use callback functions.
`instanceOptions`	Object	Optional	Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.

Option	Type	Description
`defaultTabId`	String	Set the currently active tab element based on the ID.
`activeClasses`	String	Set a string of Tailwind CSS class names to apply to the active tab element.
`inactiveClasses`	String	Set a string of Tailwind CSS class names to apply to the inactive tab elements.
`onShow`	Function	Set a callback function when the a new tab has been shown.

Method	Description
`show(id)`	Use the show function on the Tab object to change the current active tab element.
`getTab(id)`	Return the tab element based on the ID.
`updateOnShow(callback)`	Use this method to set a custom callback function whenever a tab has been shown.

Option	Type	Description
`placement`	String	Set the position of the tooltip element relative to the trigger element choosing from `top\|right\|bottom\|left`.
`triggerType`	String	Set the event type that will trigger the tooltip content choosing between `hover\|click\|none`.
`onHide`	Function	Set a callback function when the tooltip is hidden.
`onShow`	Function	Set a callback function when the tooltip is shown.
`onToggle`	Function	Set a callback function when the tooltip visibility is toggled.

Method	Description
`show()`	Use this method on the Tooltip object to show the tooltip content.
`hide()`	Use this method on the Tooltip object to hide the tooltip content.
`toggle()`	Use this method on the Tooltip object to toggle the visibility of the tooltip content.
`updateOnShow(callback)`	Use this method to set a custom callback function when the tooltip has been shown.
`updateOnHide(callback)`	Use this method to set a custom callback function when the tooltip has been hidden.
`updateOnToggle(callback)`	Use this method to set a custom callback function when the tooltip visibility has been toggled.

Option	Type	Description
`minValue`	Integer	Set the minimum value of the input field.
`maxValue`	Integer	Set the maximum value of the input field.
`onIncrement`	Function	Set a callback function when the item has been incremented.
`onDecrement`	Function	Set a callback function when the item has been decremented.

Method	Description
`getCurrentValue()`	Use this method to get the current value of the input field.
`increment()`	Use this method on the InputCounter object to increment the value of the input field.
`decrement()`	Use this method on the InputCounter object to decrement the value of the input field.
`updateOnIncrement(callback)`	Use this method to set a callback function whenever the input field has been incremented.
`updateOnDecrement(callback)`	Use this method to set a callback function whenever the input field has been decremented.

Name	Release Date	NPM Downloads	Growth
Flowbite	2021/25/09	269000	49%
React	2013/24/05	4500000	24%
Angular	2010/20/09	2800000	17%
Vue	2014/12/02	3600000	30%
Svelte	2016/26/11	1200000	57%
Ember	2011/08/12	500000	44%
Backbone	2010/13/10	300000	9%
jQuery	2006/28/01	6000000	5%
Bootstrap	2011/19/08	1800000	12%
Foundation	2011/23/09	700000	8%
Bulma	2016/24/10	500000	7%
Next.js	2016/25/10	2300000	45%
Nuxt.js	2016/16/10	900000	50%
Meteor	2012/17/01	1000000	10%
Aurelia	2015/08/07	200000	20%
Inferno	2016/27/09	100000	35%
Preact	2015/16/08	600000	28%
Lit	2018/28/05	400000	60%
Alpine.js	2019/02/11	300000	70%
Stimulus	2018/06/03	150000	25%
Solid	2021/05/07	250000	80%