[
{
"path": ".eslintignore",
"content": "*.md\n.gitignore\nbuild/\ndist/\nlib/"
},
{
"path": ".eslintrc.js",
"content": "module.exports = {\n root: true,\n parser: '@typescript-eslint/parser',\n plugins: ['@typescript-eslint'],\n env: {\n node: true,\n browser: true,\n es6: true,\n },\n extends: [\n 'eslint:recommended',\n 'plugin:@typescript-eslint/eslint-recommended',\n 'plugin:@typescript-eslint/recommended',\n 'plugin:prettier/recommended',\n ],\n};\n"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the bug**\nA clear and concise description of what the bug is.\n\n**To Reproduce**\nSteps to reproduce the behavior:\n1. Go to '...'\n2. Click on '....'\n3. Scroll down to '....'\n4. See error\n\n**Expected behavior**\nA clear and concise description of what you expected to happen.\n\n**Screenshots**\nIf applicable, add screenshots to help explain your problem.\n\n**Desktop (please complete the following information):**\n - OS: [e.g. iOS]\n - Browser [e.g. chrome, safari]\n - Version [e.g. 22]\n\n**Smartphone (please complete the following information):**\n - Device: [e.g. iPhone6]\n - OS: [e.g. iOS8.1]\n - Browser [e.g. stock browser, safari]\n - Version [e.g. 22]\n\n**Additional context**\nAdd any other context about the problem here.\n"
},
{
"path": ".github/ISSUE_TEMPLATE/custom.md",
"content": "---\nname: Custom issue template\nabout: Describe this issue template's purpose here.\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n\n**Additional context**\nAdd any other context or screenshots about the feature request here.\n"
},
{
"path": ".gitignore",
"content": "node_modules/\ndist/\nlib/\nbuild/\n_gh_pages/\nstatic/*.css\nstatic/*.js\n!static/sw.js\nstatic/*.map\n.DS_Store\nyarn-error.log\n/.idea\n.hugo_build.lock\n"
},
{
"path": ".npmignore",
"content": "_gh_pages/\nassets/\nbuild/\ncontent/\ndata/\nlayouts/\nnode_modules/\nresources/\nstatic/\nsrc/docs.js\nconfig.yml\nyarn-error.log\nsyntax.css\nBUILD-TOOLS.md"
},
{
"path": ".prettierrc",
"content": "{\n \"singleQuote\": true,\n \"eslintIntegration\": true,\n \"tabWidth\": 4,\n \"plugins\": [\n \"prettier-plugin-tailwindcss\"\n ]\n}"
},
{
"path": ".vscode/settings.json",
"content": "{\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": \"explicit\"\n }\n}\n"
},
{
"path": "BUILD-TOOLS.md",
"content": "## FlowBite Documentation\n\nThese are the source files for the Flowbite Tailwind CSS components library.\n\n### Getting started\n\n1. Make sure you have Node and NPM installed\n2. Run `yarn install`\n3. Run `yarn start` to start developing\n\n## Building the docs website\n\nMake sure to switch `enabled` to `true` in the `tailwind.config.js` file when building for docs to purge the extra CSS. (doesn't work with the process env for some reason).\n\nRun `yarn build` to build the static HTML files that will be uploaded to FlowBite. The static HTML files can be found in the `_gh_pages/` folder then moved to the `static/docs` folder from the main FlowBite Gatsby repo.\n\n## Building for NPM registry\n\nMake sure that purge is NOT enabled in `tailwind.config.js` (this needs to be fixed with env variables).\n\nRun `npm run build:npm` and then `npm publish` to release a new version. Make sure you also change the version."
},
{
"path": "CONTRIBUTING.md",
"content": "# Contributing guide\n\n## What do I need to know to help?\n\nIf you are looking to help to with a code contribution our project uses JavaScript and Tailwind CSS. If you don't feel ready to make a code contribution yet, no problem!\n\nIf you are interested in making a code contribution and would like to learn more about the technologies that we use, check out the list below.\n\n- [Learn JavaScript - Full Course for Beginners](https://www.youtube.com/watch?v=PkZNo7MFNFg)\n- [Tailwind CSS](https://tailwindcss.com/)\n\n## How do I make a contribution?\n\nNever made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown!\n\n1. [Find an issue](https://github.com/themesberg/flowbite/issues) that you are interested in addressing or a feature that you would like to add.\n2. Fork the repository associated with the issue to your local GitHub organization. This means that you will have a copy of the repository under `your-GitHub-username/repository-name`.\n3. Clone the repository to your local machine using `git clone https://github.com/github-username/repository-name.git`.\n4. Create a new branch for your fix using `git checkout -b branch-name-here`.\n5. Make the appropriate changes for the issue you are trying to address or the feature that you want to add.\n6. Use `git add insert-paths-of-changed-files-here` to add the file contents of the changed files to the \"snapshot\" git uses to manage the state of the project, also known as the index.\n7. Use `git commit` to store the contents of the index with a descriptive message. Use [conventional commits](https://www.conventionalcommits.org/) to create a nice message.\n8. Push the changes to the remote repository using `git push origin branch-name-here`.\n9. Submit a pull request to the upstream repository.\n10. Title the pull request with a short description of the changes made and the issue or bug number associated with your change. For example, you can title an issue like so `\"Added more log outputting to resolve #4352\"`.\n11. In the description of the pull request, explain the changes that you made, any issues you think exist with the pull request you made, and any questions you have for the maintainer. It's OK if your pull request is not perfect (no pull request is), the reviewer will be able to help you fix any problems and improve it!\n12. Wait for the pull request to be reviewed by a maintainer.\n13. Make changes to the pull request if the reviewing maintainer recommends them.\n14. Celebrate your success after your pull request is merged! π π\n\n## Where can I go for help?\n\nIf you need help, you can ask questions please, [join us at our Discord Community](https://discord.gg/S6J9pUmj2t).\n\n## What does the Code of Conduct mean for me?\n\nOur Code of Conduct means that you are responsible for treating everyone on the project with respect and courtesy regardless of their identity. If you are the victim of any inappropriate behavior or comments as described in our Code of Conduct, we are here for you and will do the best to ensure that the abuser is reprimanded appropriately, per our code.\n\n## Code of conduct\n\nFor more information [check this file](CODE_OF_CONDUCT.md).\n"
},
{
"path": "LICENSE.md",
"content": "MIT License\n\nCopyright (c) 2023 Bergside Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "
\n \n \n \n Build websites even faster with components on top of Tailwind CSS\n
\n\n
\n \n \n \n \n
\n\n------\n## Table of Contents\n\n- [Table of Contents](#table-of-contents)\n- [Documentation](#documentation)\n- [Getting started](#getting-started)\n - [Install using NPM](#install-using-npm)\n - [Include via CDN](#include-via-cdn)\n - [Bundled JavaScript](#bundled-javascript)\n - [Data attributes](#data-attributes)\n - [Init functions](#init-functions)\n - [ESM and CJS](#esm-and-cjs)\n - [TypeScript](#typescript)\n - [RTL support](#rtl-support)\n - [JavaScript Frameworks](#javascript-frameworks)\n - [Back-end Frameworks](#back-end-frameworks)\n- [Components](#components)\n- [Figma Design System](#figma-design-system)\n- [Flowbite Blocks](#flowbite-blocks)\n- [Flowbite Icons](#flowbite-icons)\n- [Flowbite GPT](#flowbite-gpt)\n- [Pro version](#pro-version)\n- [Hire us](#hire-us)\n- [Learn Design Concepts](#learn-design-concepts)\n- [Community](#community)\n- [Copyright and license](#copyright-and-license)\n\n## Documentation\n\nFor full documentation, visit [flowbite.com](https://flowbite.com/).\n\n## Getting started\n\nFlowbite can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.\n\n### Install using NPM\n\nMake sure that you have Node.js and Tailwind CSS installed. This guide works with Tailwind v4.\n\n1. Install Flowbite as a dependency using NPM by running the following command:\n\n```\nnpm install flowbite\n```\n\n2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:\n\n```\n/* choose one of the following */\n\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\n@import \"flowbite/src/themes/default\";\n\n/* MINIMAL THEME\n@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');\n@import \"flowbite/src/themes/minimal\";\n*/\n\n/* ENTERPRISE THEME\n@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');\n@import \"flowbite/src/themes/enterprise\";\n*/\n\n/* PLAYFUL THEME\n@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');\n@import \"flowbite/src/themes/playful\";\n*/\n\n/* MONO THEME\n@import \"flowbite/src/themes/mono\";\n*/\n```\n\n3. Import the Flowbite plugin file in your CSS:\n\n```\n@plugin \"flowbite/plugin\";\n```\n\n4. Configure the source files of Flowbite in your CSS:\n\n```\n@source \"../node_modules/flowbite\";\n```\n\n5. Include the JavaScript code that powers the interactive elements before the end of your `` tag:\n\n```\n\n```\n\nLearn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/).\n\nIf you have and old project with Tailwind CSS v3 then [check out this guide](https://flowbite.com/docs/getting-started/quickstart/#tailwind-css-v3-to-v4) to learn how to upgrade to v4.\n\n### Include using CDN\n\nThe quickest way to get started working with Flowbite is to include the CSS and JS into your project via CDN.\n\nRequire the following minified stylesheet inside the `head` tag:\n\n```html\n}}/dist/flowbite.min.css\" rel=\"stylesheet\" />\n```\n\nAnd include the following JavaScript file before the end of the `body` element:\n\n```html\n\n```\n\nPlease remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.\n\n### Bundled JavaScript\n\nOne 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.\n\nYou can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this:\n\n```javascript\nimport 'flowbite';\n```\n\nThis file has access to all of the components and it automatically applies event listeners to the data attributes.\n\n### Data attributes\n\nThe 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.\n\nFor 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.\n\n```html\n\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n```\n\n#### Init functions\n\nYou 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:\n\n```\n\n\n\n // Modal HTML markup with data attributes from Flowbite\n\n```\n\nThe `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`.\n\nYou can view more examples by browsing the [components from Flowbite](#components).\n\n### ESM and CJS\n\nFlowbite 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.\n\nHere's an example how you can import and create a new Modal component inside JavaScript:\n\n```javascript\nimport { Modal } from 'flowbite'\n\nconst $modalElement = document.querySelector('#modalEl');\n\nconst modalOptions = {\n placement: 'bottom-right',\n backdrop: 'dynamic',\n backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',\n onHide: () => {\n console.log('modal is hidden');\n },\n onShow: () => {\n console.log('modal is shown');\n },\n onToggle: () => {\n console.log('modal has been toggled');\n }\n}\n\nconst modal = new Modal($modalElement, modalOptions);\n\nmodal.show();\n```\n\nCheck out the JavaScript behaviour section of each component's page to learn how you can use this.\n\n### TypeScript\n\nFlowbite 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.\n\nAdditionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:\n\n```javascript\nimport { Modal } from 'flowbite'\nimport type { ModalOptions, ModalInterface } from 'flowbite'\n\n// other code\n```\n\nGenerally 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.\n\nWhen creating a new modal you can set the `ModalInterface` as the main type:\n\n```javascript\nconst modal: ModalInterface = new Modal($modalElement, modalOptions);\n```\n\nFlowbite 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:\n\n```javascript\nconst modalOptions: ModalOptions = {\n placement: 'top-right'\n}\n\nconst modal: ModalInterface = new Modal($modalElement, modalOptions);\n```\n\nLearn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/).\n\n### RTL support\n\nAll of the Flowbite UI components have native RTL support and you can easily set it up by using the `dir=\"rtl\"` attribute on the HTML element. Read more about Flowbite and [RTL support here](https://flowbite.com/docs/customize/rtl/).\n\n### JavaScript Frameworks\n\nThe awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, Angular and Qwik:\n\n- [π Flowbite React Library](https://github.com/themesberg/flowbite-react)\n- [π Flowbite Vue Library](https://github.com/themesberg/flowbite-vue)\n- [πΈ Flowbite Svelte Library](https://github.com/themesberg/flowbite-svelte)\n- [π Flowbite Angular Library](https://github.com/themesberg/flowbite-angular)\n- [πΏ Flowbite Qwik Library](https://github.com/qwikerx/flowbite-qwik)\n\nWe also wrote integration guides for the following front-end frameworks and libraries:\n\n- [π Flowbite with React guide](https://flowbite.com/docs/getting-started/react/)\n- [π Flowbite with Next.js guide](https://flowbite.com/docs/getting-started/next-js/)\n- [π Flowbite with Remix guide](https://flowbite.com/docs/getting-started/remix/)\n- [π Flowbite with Vue guide](https://flowbite.com/docs/getting-started/vue/)\n- [π Flowbite with Nuxt guide](https://flowbite.com/docs/getting-started/nuxt-js/)\n- [π Flowbite with Svelte guide](https://flowbite.com/docs/getting-started/svelte/)\n- [π Flowbite with Astro guide](https://flowbite.com/docs/getting-started/astro/)\n- [π Flowbite with MeteorJS guide](https://flowbite.com/docs/getting-started/meteor-js/)\n- [π Flowbite with Gatsby guide](https://flowbite.com/docs/getting-started/gatsby/)\n- [π Flowbite with SolidJS guide](https://flowbite.com/docs/getting-started/solid-js/)\n- [π Flowbite with Qwik guide](https://flowbite.com/docs/getting-started/qwik/)\n\n### Back-end Frameworks\n\nFlowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript:\n\n- [π Using Flowbite with Laravel](https://flowbite.com/docs/getting-started/laravel/)\n- [πΌ Using Flowbite with Symfony](https://flowbite.com/docs/getting-started/symfony/)\n- [π Using Flowbite with Ruby on Rails 7](https://flowbite.com/docs/getting-started/rails/)\n- [π Using Flowbite with Phoenix (Elixir)](https://flowbite.com/docs/getting-started/phoenix/)\n- [πΈ Using Flowbite with Django](https://flowbite.com/docs/getting-started/django/)\n- [πΆ Using Flowbite with Flask](https://flowbite.com/docs/getting-started/flask/)\n\n## Components\n\nFlowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.\n\n
\n\n## Figma Design System\n\nIf you need the Figma files for the components you can check out our website for more information:\n\nπ¨ [Get access to the Figma design files](https://flowbite.com/figma/)\n\n## Flowbite Blocks\n\nCheck out Flowbite Blocks to get access to over 400+ website sections coded in Tailwind CSS and Flowbite:\n\nπ¦ [Check out Flowbite Blocks](https://flowbite.com/blocks/)\n\n## Flowbite Icons\n\nStart using over 450+ free and open-source collection of solid and outline SVG icons built for Tailwind CSS and with support for Figma and JSX (React):\n\nπ [Check out the icons](https://flowbite.com/icons/)\n\n## Flowbite GPT\n\nWe'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.\n\nπ€ [Generate with Flowbite GPT](https://chat.openai.com/g/g-y7yC35HB9-flowbite-gpt)\n\n## Pro version\n\nGet access to all premium features including the Figma design system, access to all Flowbite Block sections and a dashboard UI interface:\n\nπ [Check out Flowbite Pro](https://flowbite.com/pro/)\n\n## Hire us\n\nIf you're ready to take your application to the next level you can work with us on your project with developers who have been using Flowbite and Tailwind CSS.\n\nπββοΈ [Work with us](https://flowbite.com/work-with-us/)\n\n## Learn Design Concepts\n\nIf you want to create even better Flowbite pages, learn design fundamentals from Teach Me Design - Enhance UI, a book that covers color theory, typography, UI and UX so you can make the most to implement the Flowbite Ecosystem!\n\nπ [Learn with Enhance UI](https://www.enhanceui.com/?ref=flowbite-github)\n\n## Community\n\nIf you need help or just want to discuss about the library join the community on Github:\n\nβ¨οΈ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)\n\nFor casual chatting with others using the library:\n\nπ¬ [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)\n\nVideo tutorials and presentations using Flowbite:\n\nπ₯ [Subscribe to our YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A)\n\n## Copyright and license\n\nThe Flowbite name and logos are trademarks of Bergside Inc.\n\n- π [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/)\n- π [Brand guideline and trademark usage agreement](https://flowbite.com/brand/)\n"
},
{
"path": "config.yml",
"content": "languageCode: \"en\"\ntitle: \"Flowbite\"\nbaseURL: \"https://flowbite.com/docs/\"\nenableInlineShortcodes: true\n\nparams:\n homepage: \"https://flowbite.com\"\n current_version: 4.0.1\n authors: Flowbite\n social_image_path: /docs/images/og-image.png\n\nmarkup:\n goldmark:\n renderer:\n unsafe: true\n highlight:\n noClasses: false\n style: colorful\n tableOfContents:\n startLevel: 2\n endLevel: 6\n\nbuildDrafts: true\nbuildFuture: true\n\nenableRobotsTXT: true\nmetaDataFormat: \"yaml\"\ndisableKinds: [\"404\", \"taxonomy\", \"RSS\"]\n\npublishDir: \"_gh_pages\"\n"
},
{
"path": "content/_index.html",
"content": "---\nlayout: redirect\nsitemap_exclude: true\nredirect: \"/docs/getting-started/introduction/\"\n---"
},
{
"path": "content/components/accordion.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Accordion - Flowbite\ndescription: Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: RTL (Right-To-Left)\npreviousLink: customize/rtl/\nnext: Alerts\nnextLink: components/alerts/\n---\n\nThe 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.\n\nA 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.\n\nThere are two main options to initialize the accordion component:\n\n- `data-accordion=\"collapse\"` show only one active child element\n- `data-accordion=\"open\"` keep multiple elements open\n\nDon'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.\n\n## Default accordion\n\nUse the `data-accordion=\"collapse\"` to collapse every other child element when expanding a single one.\n\n{{< example github=\"components/accordion.md\" show_dark=true >}}\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## Separated cards\n\nUse this example of an accordion with space delimitation between the accordion items.\n\n{{< example github=\"components/accordion.md\" show_dark=true >}}\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## Always open\n\nUse the `data-accordion=\"open\"` option to keep previously opened accordion elements unchanged.\n\n{{< example github=\"components/accordion.md\" show_dark=true >}}\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## Color options\n\nUse 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.\n\nHere's an example where we apply the blue colors instead of gray:\n\n{{< example github=\"components/accordion.md\" show_dark=true >}}\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## Flush accordion\n\nUse this example to remove the background color and rounded borders from the accordion component.\n\n{{< example github=\"components/accordion.md\" show_dark=true >}}\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## Arrow style\n\nUse 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.\n\n{{< example github=\"components/accordion.md\" show_dark=true >}}\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## Nesting accordions\n\nAccordions can be nested. All of the mentioned options are supported.\n\nTo 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.\n\n{{< example github=\"components/accordion.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n \n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
\n
Check out the Figma design system based on the utility classes from Tailwind CSS and components from Flowbite.
\n
\n
\n
\n \n
\n
\n
\n
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## JavaScript behaviour\n\nUse 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.\n\n### Object parameters\n\nCreate a new Accordion object by passing an array of accordion items and an optional options object to customize the styles and add callback functions.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n accordionEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n The parent HTML element of the accordion component.\n
\n
\n
\n
\n items\n
\n
\n Array\n
\n
\n Required\n
\n
\n Array of accordion items objects including the unique identifier, heading element, content element, and the active state.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Object of options that you can set to customize the style of the accordion items and set callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse the following options as the second parameter for the Accordion object to customize the behaviour, styles, and to set callback functions.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n alwaysOpen\n
\n
\n Boolean\n
\n
\n If set to true then multiple accordion elements can be open at the same time. By default it's false.\n
\n
\n
\n
\n activeClasses\n
\n
\n Array\n
\n
\n Set an array of Tailwind CSS class names to apply for the active accordion heading element.\n
\n
\n
\n
\n inactiveClasses\n
\n
\n Array\n
\n
\n Apply an array of Tailwind CSS class names to apply for the inactive accordion heading elements.\n
\n
\n
\n
\n onOpen\n
\n
\n Function\n
\n
\n Set a callback function when a new accordion item has been opened.\n
\n
\n
\n
\n onClose\n
\n
\n Function\n
\n
\n Set a callback function when a new accordion item has been closed.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the object methods on the Accordion object to programmatically open, close, or toggle the visibility of a given accordion item.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n toggle(id)\n
\n
\n Use this function to toggle an accordion item based on its current state.\n
\n
\n
\n
\n open(id)\n
\n
\n Use this function to open an accordion item based on the id.\n
\n
\n
\n
\n close(id)\n
\n
\n Use this function to close an accordion item based on the id.\n
\n
\n
\n
\n updateOnOpen(callback)\n
\n
\n Use this method to set a callback function when an accordion item has been opened.\n
\n
\n
\n
\n updateOnClose(callback)\n
\n
\n Use this method to set a callback function when an accordion item has been closed.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a callback function when an accordion item has been toggled.\n
\n
\n \n
\n
\n\n### Example\n\nLearn more about using the Accordion object from Flowbite in this example in JavaScript.\n\nTo 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.\n\nAdditionally, you can also set some options to change the default behaviour of the accordion, customize the styles, and set callback functions.\n\n{{< code lang=\"javascript\" file=\"accordion.js\" icon=\"file\" >}}\nconst accordionElement = document.getElementById('accordion-example');\n\n// create an array of objects with the id, trigger element (eg. button), and the content element\nconst accordionItems = [\n {\n id: 'accordion-example-heading-1',\n triggerEl: document.querySelector('#accordion-example-heading-1'),\n targetEl: document.querySelector('#accordion-example-body-1'),\n active: true\n },\n {\n id: 'accordion-example-heading-2',\n triggerEl: document.querySelector('#accordion-example-heading-2'),\n targetEl: document.querySelector('#accordion-example-body-2'),\n active: false\n },\n {\n id: 'accordion-example-heading-3',\n triggerEl: document.querySelector('#accordion-example-heading-3'),\n targetEl: document.querySelector('#accordion-example-body-3'),\n active: false\n }\n];\n\n// options with default values\nconst options = {\n alwaysOpen: true,\n activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',\n inactiveClasses: 'text-body',\n onOpen: (item) => {\n console.log('accordion item has been shown');\n console.log(item);\n },\n onClose: (item) => {\n console.log('accordion item has been hidden');\n console.log(item);\n },\n onToggle: (item) => {\n console.log('accordion item has been toggled');\n console.log(item);\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'accordion-example',\n override: true\n};\n{{< /code >}}\n\nCreate a new Accordion object using the options set above as the parameters.\n\n{{< code lang=\"javascript\" file=\"accordion.js\" icon=\"file\" >}}\nimport { Accordion } from 'flowbite';\n\n/*\n* accordionEl: HTML element (required)\n* accordionItems: array of accordion item objects (required)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst accordion = new Accordion(accordionElement, accordionItems, options, instanceOptions);\n{{< /code >}}\n\nNow you can access the object methods to programmatically open, close, and toggle the accordion items based on the unique identifier.\n\n{{< code lang=\"javascript\" file=\"accordion.js\" icon=\"file\" >}}\n// open accordion item based on id\naccordion.open('accordion-example-heading-2');\n\n// close accordion item based on id\naccordion.close('accordion-example-heading-2');\n\n// toggle visibility of item based on id\naccordion.toggle('accordion-example-heading-3');\n{{< /code >}}\n\n### HTML Markup\n\nUse the following HTML markup example for the JavaScript script above.\n\n{{< code lang=\"html\" file=\"accordion.html\" icon=\"file\" >}}\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Accordion object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"accordion.ts\" icon=\"file\" >}}\nimport { Accordion } from \"flowbite\";\nimport type { AccordionOptions, AccordionItem, AccordionInterface } from \"flowbite\";\nimport type { InstanceOptions } from 'flowbite';\n\nconst accordionEl = document.querySelector('#accordion-example');\n\n// create an array of objects with the id, trigger element (eg. button), and the content element\nconst accordionItems: AccordionItem[] = [\n {\n id: 'accordion-example-heading-1',\n triggerEl: document.querySelector('#accordion-example-heading-1'),\n targetEl: document.querySelector('#accordion-example-body-1'),\n active: true\n },\n {\n id: 'accordion-example-heading-2',\n triggerEl: document.querySelector('#accordion-example-heading-2'),\n targetEl: document.querySelector('#accordion-example-body-2'),\n active: false\n },\n {\n id: 'accordion-example-heading-3',\n triggerEl: document.querySelector('#accordion-example-heading-3'),\n targetEl: document.querySelector('#accordion-example-body-3'),\n active: false\n }\n];\n\n// options with default values\nconst options: AccordionOptions = {\n alwaysOpen: true,\n activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white',\n inactiveClasses: 'text-body',\n onOpen: (item) => {\n console.log('accordion item has been shown');\n console.log(item);\n },\n onClose: (item) => {\n console.log('accordion item has been hidden');\n console.log(item);\n },\n onToggle: (item) => {\n console.log('accordion item has been toggled');\n console.log(item);\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'accordion-example',\n override: true\n};\n\n/*\n* accordionEl: HTML element (required)\n* accordionItems: array of accordion item objects (required)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst accordion: AccordionInterface = new Accordion(accordionEl, accordionItems, options, instanceOptions);\n\n// open accordion item based on id\naccordion.open('accordion-example-heading-2');\n\n// destroy accordion\naccordion.destroy();\n\n// re-initialize accordion\naccordion.init();\n{{< /code >}}"
},
{
"path": "content/components/alerts.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Alerts - Flowbite\ndescription: Show contextual information to your users using alert elements based on Tailwind CSS\ngroup: components\ntoc: true\n\nprevious: Accordion\npreviousLink: components/accordion/\nnext: Avatar\nnextLink: components/avatar/\n---\n\nThe 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.\n\nFlowbite also includes dismissible alerts which can be hidden by the users by clicking on the close icon.\n\n## Default alert\n\nUse the following examples of alert components to show messages as feedback to your users.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n Info alert! Change a few things up and try submitting again.\n
\n
\n Danger alert! Change a few things up and try submitting again.\n
\n
\n Success alert! Change a few things up and try submitting again.\n
\n
\n Warning alert! Change a few things up and try submitting again.\n
\n
\n Dark alert! Change a few things up and try submitting again.\n
\n{{< /example >}}\n\n## Alerts with icon\n\nYou can also include a descriptive icon to complement the message inside the alert component with the following example.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n \n
Info alert! Change a few things up and try submitting again.
\n
\n
\n \n
Danger alert! Change a few things up and try submitting again.
\n
\n
\n \n
Success alert! Change a few things up and try submitting again.
\n
\n
\n \n
Warning alert! Change a few things up and try submitting again.
\n
\n
\n \n
Dark alert! Change a few things up and try submitting again.
\n
\n{{< /example >}}\n\n## Bordered alerts \n\nUse this example to add a border accent to the alert component instead of just a plain background.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n \n
Info alert! Change a few things up and try submitting again.
\n
\n
\n \n
Danger alert! Change a few things up and try submitting again.
\n
\n
\n \n
Success alert! Change a few things up and try submitting again.
\n
\n
\n \n
Warning alert! Change a few things up and try submitting again.
\n
\n
\n \n
Dark alert! Change a few things up and try submitting again.
\n
\n{{< /example >}}\n\n## Alerts with list\n\nUse this example to show a list and a description inside an alert component.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n \n Info\n
\n Ensure that these requirements are met:\n
\n
At least 10 characters (and up to 100 characters)
\n
At least one lowercase character
\n
Inclusion of at least one special character, e.g., ! @ # ?
\n
\n
\n
\n
\n \n Danger\n
\n Ensure that these requirements are met:\n
\n
At least 10 characters (and up to 100 characters)
\n
At least one lowercase character
\n
Inclusion of at least one special character, e.g., ! @ # ?
\n
\n
\n
\n
\n \n Success\n
\n Ensure that these requirements are met:\n
\n
At least 10 characters (and up to 100 characters)
\n
At least one lowercase character
\n
Inclusion of at least one special character, e.g., ! @ # ?
\n
\n
\n
\n
\n \n Success\n
\n Ensure that these requirements are met:\n
\n
At least 10 characters (and up to 100 characters)
\n
At least one lowercase character
\n
Inclusion of at least one special character, e.g., ! @ # ?
\n
\n
\n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n## Dismissing\n\nUse the following alert elements that are also dismissible.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple dark alert with an example link. Give it a click if you like.\n
\n \n
\n{{< /example >}}\n\n## Border accent\n\nUse this example to add a border accent on top of the alert component for further visual distinction.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple info alert with an example link. Give it a click if you like.\n
\n \n
\n
\n \n Info\n
\n A simple dark alert with an example link. Give it a click if you like.\n
\n \n
\n{{< /example >}}\n\n## Additional content\n\nThe following alert components can be used if you wish to disclose more information inside the element.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n
\n
\n \n Info\n
This is a info alert
\n
\n \n
\n
\n 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.\n
\n \n
\n\n
\n
\n
\n \n Info\n
This is a danger alert
\n
\n \n
\n
\n 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.\n
\n \n
\n\n
\n
\n
\n \n Info\n
This is a success alert
\n
\n \n
\n
\n 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.\n
\n \n
\n\n
\n
\n
\n \n Info\n
This is a warning alert
\n
\n \n
\n
\n 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.\n
\n \n
\n\n
\n
\n
\n \n Info\n
This is a default alert
\n
\n \n
\n
\n 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.\n
\n \n
\n\n{{< /example >}}\n\n## Announcement alerts\n\nUse this alert component to make announcements with a CTA link.\n\n{{< example github=\"components/alerts.md\" show_dark=true >}}\n
\n New\n
\n Great job! You've acknowledged this significant alert message.\n
\n \n
\n\n
\n New\n
\n Great job! You've acknowledged this significant alert message.\n
\n \n
\n\n
\n New\n
\n Great job! You've acknowledged this significant alert message.\n
\n \n
\n\n
\n New\n
\n Great job! You've acknowledged this significant alert message.\n
\n \n
\n\n
\n New\n
\n Great job! You've acknowledged this significant alert message.\n
\n \n
\n{{< /example >}}\n\n## JavaScript behaviour\n\nThe **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.\n\n### Object parameters\n\nThe parameters for the Dismiss object can be used to programmatically initialize and manipulate the behaviour of the dismissal of the target element.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the element object that will be dismissed.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Optional\n
\n
\n Pass the element object that will trigger the targetEl dismission on click.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Pass the options object to set the trigger element, transition, duration, timing classes of the dismiss animation and callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse these optional options for the Dismiss object to set the transition, duration, and timing function types based on the utility classes from Tailwind CSS.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n transition\n
\n
\n String\n
\n
\n 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.\n
\n
\n
\n
\n duration\n
\n
\n Integer\n
\n
\n Set the duration of the dismissing animation. The default value is 300 (300 milliseconds).\n
\n
\n
\n
\n timing\n
\n
\n String\n
\n
\n Set the transition timing function utility class from Tailwind CSS. The default value is ease-out.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the item has been dismissed.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the following methods on the Dismiss object to programmatically manipulate the behaviour.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n hide()\n
\n
\n Use this method on the Dismiss object to hide the target element.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set the callback function when the item has been dismissed.\n
\n
\n \n
\n
\n\n### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Dismiss object.\n\nFirst 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.\n\n{{< code lang=\"javascript\" file=\"dismiss.js\" icon=\"file\" >}}\n// target element that will be dismissed\nconst $targetEl = document.getElementById('targetElement');\n\n// optional trigger element\nconst $triggerEl = document.getElementById('triggerElement');\n\n// options object\nconst options = {\n transition: 'transition-opacity',\n duration: 1000,\n timing: 'ease-out',\n\n // callback functions\n onHide: (context, targetEl) => {\n console.log('element has been dismissed')\n console.log(targetEl)\n }\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'targetElement',\n override: true\n};\n{{< /code >}}\n\nCreate a new Dismiss object based on the options set above.\n\n{{< code lang=\"javascript\" file=\"dismiss.js\" icon=\"file\" >}}\nimport { Dismiss } from 'flowbite';\n\n/*\n* $targetEl (required)\n* $triggerEl (optional)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst dismiss = new Dismiss($targetEl, $triggerEl, options, instanceOptions);\n{{< /code >}}\n\nYou can now use the methods on the Dismiss object.\n\n{{< code lang=\"javascript\" >}}\n// hide the target element\ndismiss.hide();\n{{< /code >}}\n\n### HTML Markup\n\nUse this HTML code for the JavaScript code example above.\n\n{{< code lang=\"html\" file=\"dismiss.html\" icon=\"file\" >}}\n\n\n
\n Info alert! Change a few things up and try submitting again.\n
\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Dismiss class, parameters and its options. \n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"dismiss.ts\" icon=\"file\" >}}\nimport { Dismiss } from \"flowbite\";\nimport type { DismissOptions, DismissInterface } from \"flowbite\";\nimport type { InstanceOptions } from 'flowbite';\n\n// target element that will be dismissed\nconst $targetEl: HTMLElement = document.getElementById('targetElement');\n\n// optional trigger element\nconst $triggerEl: HTMLElement = document.getElementById('triggerElement');\n\n// options object\nconst options: DismissOptions = {\n transition: 'transition-opacity',\n duration: 1000,\n timing: 'ease-out',\n\n // callback functions\n onHide: (context, targetEl) => {\n console.log('element has been dismissed')\n console.log(targetEl)\n }\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'targetElement',\n override: true\n};\n\n/*\n* $targetEl (required)\n* $triggerEl (optional)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst dismiss: DismissInterface = new Dismiss($targetEl, $triggerEl, options, instanceOptions);\n\n// programmatically hide it\ndismiss.hide();\n{{< /code >}}"
},
{
"path": "content/components/avatar.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Avatar - Flowbite\ndescription: Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes\ngroup: components\ntoc: true\n\nprevious: Alerts\npreviousLink: components/alerts/\nnext: Badge\nnextLink: components/badge/\n---\n\nThe 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.\n\n## Default avatar\n\nUse this example to create a circle and rounded avatar on an image element.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/avatar.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Bordered\n\nApply a border around the avatar component you can use the `ring-{color}` class from Tailwind CSS.\n\n{{< example class=\"flex justify-center\" github=\"components/avatar.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Placeholder icon\n\nUse this example as a placeholder icon for the user profile when there is no custom image available.\n\n{{< example class=\"flex justify-center\" github=\"components/avatar.md\" show_dark=true >}}\n
\n \n
\n{{< /example >}}\n\n## Placeholder initials\n\nThis 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.\n\n{{< example class=\"flex justify-center\" github=\"components/avatar.md\" show_dark=true >}}\n
\n JL\n
\n{{< /example >}}\n\n## Avatar tooltip\n\nUse this example to show a tooltip when hovering over the avatar.\n\n{{< example class=\"flex items-center justify-center pt-8 gap-4\" github=\"components/avatar.md\" show_dark=true >}}\n
\n
\n Jese Leos\n \n
\n \n
\n
\n
\n Roberta Casas\n \n
\n \n
\n
\n
\n Bonnie Green\n \n
\n \n
\n{{< /example >}}\n\n## Dot indicator\n\nUse a dot element relative to the avatar component as an indicator for the user (eg. online or offline status).\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/avatar.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n## Stacked\n\nUse this example if you want to stack a group of users by overlapping the avatar components.\n\n{{< example class=\"flex justify-center gap-4 rtl:gap-8\" github=\"components/avatar.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n## Avatar text\n\nThis 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.\n\n{{< example class=\"flex justify-center\" github=\"components/avatar.md\" show_dark=true >}}\n
\n \n
\n
Jese Leos
\n
Joined in August 2014
\n
\n
\n{{< /example >}}\n\n## User dropdown\n\nUse this example if you want to show a dropdown menu when clicking on the avatar component.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/avatar.md\" show_dark=true iframeHeight=\"360\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Sizes\n\nChoose from multiple sizing options for the avatar component from this example.\n\n{{< example class=\"flex flex-wrap items-center justify-center gap-6\" github=\"components/avatar.md\" show_dark=true >}}\n\n\n\n\n\n\n{{< /example >}}\n"
},
{
"path": "content/components/badge.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Badges - Flowbite\ndescription: Use Tailwind CSS badges as elements to show counts or labels separately or inside other components\ngroup: components\ntoc: true\n\nprevious: Avatar\npreviousLink: components/avatar/\nnext: Banner\nnextLink: components/banner/\n---\n\nThe 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.\n\nAlternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a `span` element.\n\n## Default badges\n\nUse the following badge elements to indicate counts or labels inside or outside components.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\nBrand\nAlternative\nGray\nDanger\nSuccess\nWarning\n{{< /example >}}\n\n## Bordered badges\n\nThis example can be used to add a border accent to the badge component.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\nBrand\nAlternative\nGray\nDanger\nSuccess\nWarning\n{{< /example >}}\n\n## Large badges\n\nUse the `text-sm` utility class and increase the paddings to create a larger variant of the badges.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\nBrand\nAlternative\nGray\nDanger\nSuccess\nWarning\n{{< /example >}}\n\n## Large bordered badges\n\nUse these examples to create large and bordered styled badges.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\nBrand\nAlternative\nGray\nDanger\nSuccess\nWarning\n{{< /example >}}\n\n## Pill badges\n\nUse this example to make the corners even more rounded like pills for the badge component.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\nBrand\nAlternative\nGray\nDanger\nSuccess\nWarning\n{{< /example >}}\n\n## Pill bordered badges\n\nUse this example to create a more rounded styles pill badge with borders.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\nBrand\nAlternative\nGray\nDanger\nSuccess\nWarning\n{{< /example >}}\n\n## Badges as links\n\nYou can also use badges as anchor elements to link to another page.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\nBrand\nAlternative\nGray\nDanger\nSuccess\nWarning\n{{< /example >}}\n\n## Badges with icon\n\nYou can also use [SVG icons](https://flowbite.com/icons/) inside the badge elements.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins agong\n\n{{< /example >}}\n\n## Large badges with icon\n\nUse these large badges with SVG icons for an enhanced representation.\n\n{{< example class=\"flex-wrap justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins agong\n\n{{< /example >}}\n\n## Badges with only icon\n\nAlternatively, you can also use badges which indicate only a SVG icon.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n## Large badges with only icon\n\nUse these large badge components with only an icon inside of them.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n## Badges with dot\n\nUse these badges with a dot for an alternative style of showing content.\n\n{{< example class=\"flex justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins ago\n\n\n\n2 mins agong\n\n{{< /example >}}\n\n## Badges with SVG loader\n\nUse this example to show an animated SVG loader inside the badge component.\n\n{{< example class=\"flex flex-wrap justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\n \n 2 mins ago\n\n\n \n 2 mins ago\n\n\n \n 2 mins ago\n\n\n \n 2 mins ago\n\n\n \n 2 mins ago\n\n\n \n 2 mins ago\n\n{{< /example >}}\n\n## Dismissible badges (chips)\n\nUse 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. These can be used as tags inside an input component.\n\n{{< example class=\"flex flex-wrap justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\nBrand\n\n\n\n\nAlternative\n\n\n\n\nGray\n\n\n\n\nDanger\n\n\n\n\nSuccess\n\n\n\n\nWarning\n\n\n{{< /example >}}\n\n## Chips with avatar\n\nThese components can be used to show avatar images inside of dismissible badges.\n\n{{< example class=\"flex flex-wrap justify-center gap-4\" github=\"components/badge.md\" show_dark=true >}}\n\n\nBrand\n\n\n\n\n\nAlternative\n\n\n\n\n\nGray\n\n\n\n\n\nDanger\n\n\n\n\n\nSuccess\n\n\n\n\n\nWarning\n\n\n{{< /example >}}\n\n## Notification badge\n\nUse the following example to show a badge inside of a button component.\n\n{{< example class=\"flex justify-center\" github=\"components/badge.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Button with badge\n\nUse this example to add a badge inside a button component for a count indicator.\n\n{{< example class=\"flex justify-center\" github=\"components/badge.md\" show_dark=true >}}\n\n{{< /example >}}"
},
{
"path": "content/components/banner.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Sticky Banner - Flowbite\ndescription: Use the banner component to show marketing messages and CTA buttons at the top or bottom side of your website based on the utility classes from Tailwind CSS\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Badge\npreviousLink: components/badge/\nnext: Bottom Navigation\nnextLink: components/bottom-navigation/\n---\n\nGet 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.\n\nExplore 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.\n\n## Default sticky banner\n\nUse 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.\n\n{{< example class=\"p-0\" github=\"components/banner.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n
\n \n \n Bullhorn\n \n New brand identity has been launched for the Flowbite Library\n
\n
\n
\n \n
\n
\n\n{{< /example >}}\n\n## Bottom banner position\n\nThis example can be used to position the sticky banner to the bottom side of the page instead of the top side.\n\n{{< example class=\"p-0\" github=\"components/banner.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Marketing CTA banner\n\nUse 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.\n\n{{< example class=\"p-0\" github=\"components/banner.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
Build websites even faster with components on top of Tailwind
\n
\n
\n \n \n \n
\n
\n\n{{< /example >}}\n\n## Newsletter sign-up banner\n\nThis 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.\n\n{{< example class=\"p-0\" github=\"components/banner.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n \n
\n
\n \n
\n
\n{{< /example >}}\n\n## Informational banner\n\nThis 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.\n\n{{< example class=\"p-0\" github=\"components/banner.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n
Integration is the key
\n
You can integrate Flowbite with many tools to make your work even more efficient and lightning fast based on Tailwind.
\n
\n
\n \n \n
\n
\n{{< /example >}}\n\n## More examples\n\nFor more sticky banner examples you can check [banner sections](https://flowbite.com/blocks/marketing/banner/) from Flowbite Blocks.\n"
},
{
"path": "content/components/bottom-navigation.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Bottom Navigation - Flowbite\ndescription: Use the bottom navigation bar component to allow users to navigate through your website or create a control bar using a menu that is positioned at the bottom of the page\ngroup: components\ntoc: true\n\nprevious: Banner\npreviousLink: components/banner/\nnext: Breadcrumbs\nnextLink: components/breadcrumb/\n---\n\nThe 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.\n\nCheck 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.\n\n## Default bottom navigation\n\nUse 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.\n\n{{< example class=\"p-0\" github=\"components/bottom-navigation.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n \n \n \n \n
\n
\n{{< /example >}}\n\n## Menu items with border\n\nThis example can be used to show a border between the menu items inside the bottom navbar.\n\n{{< example class=\"p-0\" github=\"components/bottom-navigation.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n \n \n \n \n
\n
\n{{< /example >}}\n\n## Application bar example\n\nUse this example to show a CTA button in the center of the navigation component to create new items.\n\n{{< example class=\"p-0\" github=\"components/bottom-navigation.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n \n
\n Home\n \n
\n \n
\n Wallet\n \n
\n
\n \n
\n
\n Create new item\n \n
\n \n
\n Settings\n \n
\n \n
\n Profile\n \n
\n
\n
\n{{< /example >}}\n\n## Example with pagination\n\nThis example be used to paginate multiple pages on a single view alongside other menu items.\n\n{{< example class=\"p-0\" github=\"components/bottom-navigation.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n \n
\n New document\n \n
\n \n
\n Bookmark\n \n
\n
\n
\n \n 1 of 34\n \n
\n
\n \n
\n Settings\n \n
\n \n
\n Profile\n \n
\n
\n
\n{{< /example >}}\n\n## Button group bottom bar\n\n{{< example class=\"p-0\" github=\"components/bottom-navigation.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n
\n \n \n \n
\n
\n
\n \n
\n Home\n \n
\n \n
\n Bookmark\n \n
\n \n
\n New post\n \n
\n \n
\n Search\n \n
\n \n
\n Settings\n \n
\n
\n
\n{{< /example >}}\n\n## Card with bottom bar\n\nThis 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.\n\nYou can even use the other bottom navbar examples to exchange the default one presented here.\n\n{{< example class=\"flex items-center justify-center p-4\" github=\"components/bottom-navigation.md\" show_dark=true >}}\n \n
\n{{< /example >}}\n\n## Online meeting control bar\n\nUse 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.\n\n{{< example class=\"p-0\" github=\"components/bottom-navigation.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true disable_init_js=true show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Video player bar\n\nUse 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.\n\n{{< example class=\"p-0\" github=\"components/bottom-navigation.md\" iframeHeight=\"480\" iframeMaxHeight=\"480\" disable_init_js=true skeletonPlaceholders=true show_dark=true >}}\n\n
\n
\n \n Flowbite Crash Course\n
\n
\n
\n
\n \n
\n Shuffle video\n \n
\n \n
\n Previous video\n \n
\n \n
\n Pause video\n \n
\n \n
\n Next video\n \n
\n \n
\n Restart video\n \n
\n
\n
\n 3:45\n
\n \n
\n 5:00\n
\n
\n
\n
\n \n
\n View playlist\n \n
\n \n
\n Toggle captions\n \n
\n \n
\n Full screen\n \n
\n \n
\n Adjust volume\n \n
\n
\n
\n{{< /example >}}\n"
},
{
"path": "content/components/breadcrumb.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Breadcrumbs - Flowbite\ndescription: Show the location of the current page in a hierarchical structure using the Tailwind CSS breadcrumb components\ngroup: components\ntoc: true\n\nprevious: Bottom Navigation\npreviousLink: components/bottom-navigation/\nnext: Buttons\nnextLink: components/buttons/\n---\n\nThe 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.\n\nFlowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.\n\n## Default breadcrumb\n\nUse the following breadcrumb example to show the hierarchical structure of pages.\n\n{{< example class=\"flex justify-center\" github=\"components/breadcrumb.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Solid background\n\nYou can alternatively also use the breadcrumb components with a solid background.\n\n{{< example class=\"flex justify-center\" github=\"components/breadcrumb.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Header breadcrumb\n\nUse this example to show a list of items such as the branches from GitHub and a dropdown component.\n\n{{< example class=\"flex justify-center pb-48\" github=\"components/breadcrumb.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Breadcrumb with dropdown\n\nUse this example to show dropdown components inside the breadcrumbs.\n\n{{< example class=\"flex justify-center pb-48\" github=\"components/breadcrumb.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Breadcrumb with button\n\nUse a button with dropdown as the current page in a breadcrumb component.\n\n{{< example class=\"flex justify-center pb-48\" github=\"components/breadcrumb.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n\n## Breadcrumb with navigation\n\nUse this example to navigate between pages with a button group component next to the breadcrumbs.\n\n{{< example class=\"flex justify-center pb-48\" github=\"components/breadcrumb.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n"
},
{
"path": "content/components/button-group.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Button Group - Flowbite\ndescription: Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line\ngroup: components\ntoc: true\n\nprevious: Buttons\npreviousLink: components/buttons/\nnext: Cards\nnextLink: components/card/\n---\n\nThe button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.\n\n## Default example\n\nUse the following code to stack together buttons into a single group.\n\n{{< example class=\"flex justify-center\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n \n \n \n
\n{{< /example >}}\n\n## Button group info\n\nUse this example to stack a button with an icon with another informational button.\n\n{{< example class=\"flex justify-center\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n \n \n
\n{{< /example >}}\n\n\n## Button group icon action\n\nUse this component to show a button with text and another button with an icon.\n\n{{< example class=\"flex justify-center\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n \n \n
\n{{< /example >}}\n\n## Button group icons\n\nUse this example to stack together multiple option buttons into one group.\n\n{{< example class=\"flex justify-center items-center h-full\" iframeHeight=\"240\" github=\"components/button-group.md\" show_dark=true >}}\n
\n \n
\n Align left\n \n
\n \n
\n Align center\n \n
\n \n
\n Align justify\n \n
\n \n
\n Align right\n \n
\n
\n{{< /example >}}\n\n## Button group dropdown\n\nUse this example to show three buttons stacked together where the third one opens a dropdown menu.\n\n{{< example class=\"flex justify-center\" iframeHeight=\"260\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Button group badge\n\nUse this component to add a badge inside of the button group and a dropdown menu.\n\n{{< example class=\"flex justify-center\" iframeHeight=\"260\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## QR code button group\n\nUse this component to show a QR code button group for authentication or other purposes.\n\n{{< example class=\"flex justify-center\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n \n \n
\n{{< /example >}}\n\n## Pagination button group\n\nThis example can be used to create pagination components using button groups.\n\n{{< example class=\"flex justify-center items-center h-full flex-col gap-8\" iframeHeight=\"240\" github=\"components/button-group.md\" show_dark=true >}}\n
\n \n \n \n \n \n \n \n \n \n
\n\n
\n \n
\n Previous\n \n
\n \n
\n Next\n \n
\n
\n{{< /example >}}\n\n## Vertical button groups\n\nUse these examples to stack button groups vertically.\n\n{{< example class=\"flex justify-center space-x-4\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n \n \n \n
\n\n\n
\n \n
\n Align left\n \n
\n \n
\n Align center\n \n
\n \n
\n Align justify\n \n
\n \n
\n Align right\n \n
\n
\n{{< /example >}}\n\n## Button group with colors\n\nChoose from any colors to style the button group components.\n\n{{< example class=\"flex justify-center space-x-4\" github=\"components/button-group.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n## Button group as links\n\nYou can also use the button group component as links.\n\n{{< example class=\"flex justify-center\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Group buttons with icons\n\nYou can also use [SVG icons](https://flowbite.com/icons/) inside the grouped buttons.\n\n{{< example class=\"flex justify-center\" github=\"components/button-group.md\" show_dark=true >}}\n\n
\n \n \n \n
\n\n{{< /example >}}\n\n## Button group outline\n\nUse these examples as an alternative style with an outline.\n\n{{< example class=\"flex justify-center items-center flex-col gap-8 h-full\" iframeHeight=\"240\" github=\"components/button-group.md\" show_dark=true >}}\n
\n \n \n \n
\n\n
\n \n \n \n
\n{{< /example >}}\n"
},
{
"path": "content/components/buttons.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Buttons - Flowbite\n# description: Use the Tailwind CSS button component inside forms, as links, and more with support for multiple colors, sizes, and variations\ndescription: Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows\ngroup: components\ntoc: true\n\nprevious: Breadcrumbs\npreviousLink: components/breadcrumb/\nnext: Button group\nnextLink: components/button-group/\n---\n\nThe 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.\n\nFlowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more.\n\n## Default button\n\nUse these default button styles with multiple colors to indicate an action or link within your website.\n\n{{< example class=\"space-x-2 space-y-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n## Button pills\n\nThe button pills can be used as an alternative style by using fully rounded edges.\n\n{{< example class=\"space-x-2 space-y-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n## Gradient monochrome\n\nThese 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.\n\n{{< example class=\"flex flex-wrap gap-2.5\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n## Gradient duotone\n\nThese buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect.\n\n{{< example class=\"flex flex-wrap gap-2.5\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n## Gradient outline\n\nThis 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.\n\n{{< example class=\"flex flex-wrap gap-2.5\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n## Colored shadows\n\nThese beautiful button elements with color shadows can be used since the release of Tailwind v3.0.\n\n{{< example class=\"flex flex-wrap gap-2.5\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n## Social buttons\n\nUse 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.\n\n{{< example class=\"space-x-2 space-y-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n## Payment buttons\n\nUse these payment buttons for your product checkout or NFT minting landing page including MetaMask, Opera, Bitcoin, Ethereum, Paypal, Visa, Mastercard, and American Express.\n\n{{< example class=\"inline-flex flex-wrap gap-2.5\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n## Outline buttons\n\nUse the following button styles to show the colors only for the border of the element.\n\n{{< example class=\"flex flex-wrap gap-2.5\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n## Button sizes\n\nUse these examples if you want to use smaller or larger buttons.\n\n{{< example class=\"space-x-2 space-y-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n## Outline button sizes\n\nUse these examples if you want to use smaller or larger buttons with outline style.\n\n{{< example class=\"space-x-2 space-y-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n## Button sizes with icon\n\nUse these examples if you want to use smaller or larger buttons with icons.\n\n{{< example class=\"space-x-2 space-y-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n## Buttons with icon\n\nUse the following examples to add a [SVG icon](https://flowbite.com/icons/) inside the button either on the left or right side.\n\n{{< example class=\"flex items-center space-x-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Button with label\n\nThis example can be used to show a notification count or helper text inside a button using the badge element.\n\n{{< example class=\"flex\" github=\"components/buttons.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Icon buttons\n\nSometimes you need a button to indicate an action using only an icon.\n\n{{< example class=\"space-x-2\" github=\"components/buttons.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n## Loader\n\nUse the following }}\">spinner components from Flowbite to indicate a loader animation inside buttons:\n\n{{< example github=\"components/buttons.md\" class=\"space-x-2\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Disabled\n\nUse 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.\n\n{{< example github=\"components/buttons.md\" show_dark=true >}}\n\n{{< /example >}}\n"
},
{
"path": "content/components/card.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Cards - Flowbite\ndescription: Get started with a large variety of Tailwind CSS card examples for your web project\ngroup: components\ntoc: true\n\nprevious: Button group\npreviousLink: components/button-group/\nnext: Carousel\nnextLink: components/carousel/\n---\n\nUse 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.\n\n## Default card\n\nUse the following simple card component with a title and description.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n\n{{< /example >}}\n\n## Card with button\n\nUse the following example of a card element if you also want to have an action button.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n
Noteworthy technology acquisitions 2021
\n
Here are the biggest technology acquisitions of 2025 so far, in reverse chronological order.
\n{{< /example >}}\n\n## Card with link\n\nThis example can be used to show a CTA as a link instead of a button inside the card.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Card with image\n\nYou can use the following example of a card element with an image for blog posts, user cards, and many more.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Card with description\n\nUse this alternative styled card with an image for features, blog posts, and more.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Horizontal card\n\nIf you want to spice up your cards you can use the following card which has its child elements aligned horizontally.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n \n
\n\n{{< /example >}}\n\n## User profile card\n\nUse this user profile card example if you want to show a dropdown menu and buttons to enable multiple actions from your user.\n\n{{< example class=\"flex flex-wrap justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Card with form inputs\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n \n
\n{{< /example >}}\n\n## E-commerce card\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Call to action card\n\nUse this CTA card example to encourage your users to visit a certain page such as downloading the iOS or Android application for your project.\n\n{{< example github=\"components/card.md\" show_dark=true >}}\n\n
\n
Work fast from anywhere
\n
Stay up to date and move work forward with Flowbite on iOS & Android. Download the app today.
\n{{< /example >}}\n\n## Card with nav tabs\n\nUse this example of a card component with navigation tabs that can change the content inside the card based on which one is currently active.\n\n{{< example github=\"components/card.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
Powering innovation at 200,000+ companies worldwide
\n
Empower Developers, IT Ops, and business teams to collaborate at high velocity. Respond to changes and deliver great customer and employee service experiences fast.
\n{{< /example >}}\n\n## Card full width tabs\n\nUse 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.\n\n{{< example github=\"components/card.md\" show_dark=true >}}\n\n
\n
\n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n
73M+
\n
Developers
\n
\n
\n
100M+
\n
Public repositories
\n
\n
\n
1000s
\n
Open source projects
\n
\n
\n
\n
\n
We invest in the worldβs potential
\n \n
\n
\n \n Dynamic reports and dashboards\n
\n
\n \n Templates for everyone\n
\n
\n \n Development workflow\n
\n
\n \n Limitless business automation\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.
\n
Check out this guide to learn how to get started and start developing websites even faster with components on top of Tailwind CSS.
\n
\n
\n
\n \n
\n
\n
\n
Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.
The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
\n
However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.
\n{{< /example >}}\n\n## Card with list\n\nUse this card example if you want to show a list of data:\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Pricing card\n\nShow detailed information to potential customers about your product's pricing plan, list of features, and a purchase button.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n\n
\n
Standard plan
\n
\n $49\n /month\n
\n
\n
\n \n 2 team members\n
\n
\n \n 20GB Cloud storage\n
\n
\n \n Integration help\n
\n
\n \n Sketch Files\n
\n
\n \n API Access\n
\n
\n \n Complete documentation\n
\n
\n \n 24Γ7 phone & email support\n
\n
\n \n
\n{{< /example >}}\n\n## Testimonial card\n\nUse this example to split cards into multiple sections such as for testimonials or reviews.\n\n{{< example github=\"components/card.md\" show_dark=true >}}\n\n
\n \n
\n
Very easy this was to integrate
\n
If you care for your time, I hands down would go with this.\"
\n
\n \n \n
\n
Bonnie Green
\n
Developer at Open AI
\n
\n \n \n \n
\n
Solid foundation for any project
\n
Designing with Figma components that can be easily translated to the utility classes of Tailwind CSS is a huge timesaver!\"
\n
\n \n \n
\n
Roberta Casas
\n
Lead designer at Dropbox
\n
\n \n \n \n
\n
Mindblowing workflow
\n
Aesthetically, the well designed components are beautiful and will undoubtedly level up your app.\"
\n
\n \n \n
\n
Jese Leos
\n
Software Engineer at Facebook
\n
\n \n \n \n
\n
Efficient Collaborating
\n
You have many examples that can be used to create a fast prototype for your team.\"
\n
\n \n \n
\n
Joseph McFall
\n
CTO at Google<
\n
\n \n \n
\n{{< /example >}}\n\n## Crypto card\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/card.md\" show_dark=true >}}\n
\n
Connect wallet
\n
Connect with one of our available wallet providers or create a new one.
\n{{< /example >}}\n"
},
{
"path": "content/components/carousel.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Carousel - Flowbite\ndescription: Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Card\npreviousLink: components/card/\nnext: Chat bubble\nnextLink: components/chat-bubble/\n---\n\nThe 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.\n\n## Default slider\n\nThe 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.\n\n- `data-carousel=\"static\"` to prevent the carousel sliding by default\n- `data-carousel=\"slide\"` to infinitely cycle through the items\n\nYou 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.\n\nUse 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.\n\n{{< example github=\"components/carousel.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n \n \n \n \n
\n \n \n \n
\n{{< /example >}}\n\n## Controls\n\nUse 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.\n\nYou can customize the control elements with the classes from Tailwind CSS anyhow you want.\n\n{{< example github=\"components/carousel.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n \n
\n{{< /example >}}\n\n## Indicators\n\nShow 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.\n\n{{< example github=\"components/carousel.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n
\n \n \n \n \n \n
\n \n \n \n
\n{{< /example >}}\n\n## Animation\n\nYou can easily customize the duration and animation style of the carousel component by using the `duration-*` and `ease-*` utility classes from Tailwind CSS.\n\n{{< example github=\"components/carousel.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n \n
\n{{< /example >}}\n\n## JavaScript behaviour\n\nUse 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.\n\n### Object parameters\n\nPass the object parameters for the Carousel object to set the carousel items and options.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n carouselElement\n
\n
\n Element\n
\n
\n Required\n
\n
\n Parent HTML element of the carousel component.\n
\n
\n
\n
\n items\n
\n
\n Array\n
\n
\n Required\n
\n
\n Pass an array of carousel item objects including the position and the element.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Pass an object of options to set the interval, indicators, and callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse these options for the Carousel object to set the default position, interval, indicators, custom styles, and callback functions.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n defaultPosition\n
\n
\n Integer\n
\n
\n Set the default active slider item based on its position (starts from [0-x]).\n
\n
\n
\n
\n interval\n
\n
\n Integer\n
\n
\n Set the interval duration in milliseconds when the carousel is cycling.\n
\n
\n
\n
\n indicators\n
\n
\n Array\n
\n
\n An optional object of indicator elements and custom classes.\n
\n
\n
\n
\n onNext\n
\n
\n Function\n
\n
\n Set a callback function when the next carousel item has been shown.\n
\n
\n
\n
\n onPrev\n
\n
\n Function\n
\n
\n Set a callback function when the previous carousel item has been shown.\n
\n
\n
\n
\n onChange\n
\n
\n Function\n
\n
\n Set a callback function when the position of the carousel item has been changed.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the following methods on the Carousel object to programmatically manipulate the behaviour.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n next()\n
\n
\n Use this method to go to the next slide of the carousel component.\n
\n
\n
\n
\n prev()\n
\n
\n Use this method to go to the previous slide of the carousel component.\n
\n
\n
\n
\n slideTo(position)\n
\n
\n Use this method to go the carousel with the position that you set as a parameter.\n
\n
\n
\n
\n cycle()\n
\n
\n Use this method to start cycling the carousel component based on the default interval duration.\n
\n
\n
\n
\n pause()\n
\n
\n Use this method to stop the automatic cycling of the carousel component.\n
\n
\n
\n
\n getItem(position)\n
\n
\n Get the carousel item based on the position number that you set as a parameter.\n
\n
\n
\n
\n getActiveItem()\n
\n
\n Get the current active carousel item.\n
\n
\n
\n
\n updateOnNext(callback)\n
\n
\n Set a callback function when the next carousel item has been shown.\n
\n
\n
\n
\n updateOnPrev(callback)\n
\n
\n Set a callback function when the previous carousel item has been shown.\n
\n
\n
\n
\n updateOnChange(callback)\n
\n
\n Set a callback function when the the slide item inside the carousel has been changed.\n
\n
\n \n
\n
\n\n### Example\n\nCheck 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.\n\n{{< code lang=\"javascript\" file=\"carousel.js\" icon=\"file\" >}}\nconst carouselElement = document.getElementById('carousel-example');\n\nconst items = [\n {\n position: 0,\n el: document.getElementById('carousel-item-1'),\n },\n {\n position: 1,\n el: document.getElementById('carousel-item-2'),\n },\n {\n position: 2,\n el: document.getElementById('carousel-item-3'),\n },\n {\n position: 3,\n el: document.getElementById('carousel-item-4'),\n },\n];\n\n// options with default values\nconst options = {\n defaultPosition: 1,\n interval: 3000,\n\n indicators: {\n activeClasses: 'bg-white dark:bg-gray-800',\n inactiveClasses:\n 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',\n items: [\n {\n position: 0,\n el: document.getElementById('carousel-indicator-1'),\n },\n {\n position: 1,\n el: document.getElementById('carousel-indicator-2'),\n },\n {\n position: 2,\n el: document.getElementById('carousel-indicator-3'),\n },\n {\n position: 3,\n el: document.getElementById('carousel-indicator-4'),\n },\n ],\n },\n\n // callback functions\n onNext: () => {\n console.log('next slider item is shown');\n },\n onPrev: () => {\n console.log('previous slider item is shown');\n },\n onChange: () => {\n console.log('new slider item has been shown');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'carousel-example',\n override: true\n};\n{{< /code >}}\n\nCreate a new carousel object using the options set above.\n\n{{< code lang=\"javascript\" file=\"carousel.js\" icon=\"file\" >}}\nimport { Carousel } from 'flowbite';\n\nconst carousel = new Carousel(carouselElement, items, options, instanceOptions);\n{{< /code >}}\n\nUse 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.\n\n{{< code lang=\"javascript\" file=\"carousel.js\" icon=\"file\" >}}\n// goes to the next (right) slide\ncarousel.next();\n\n// goes to the previous (left) slide\ncarousel.prev();\n{{< /code >}}\n\nUse the `slideTo(position)` public method to jump to the carousel slide item with the specified position.\n\n{{< code lang=\"javascript\" file=\"carousel.js\" icon=\"file\" >}}\n// jumps to the 3rd position (position starts from 0)\ncarousel.slideTo(2);\n{{< /code >}}\n\nUse 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.\n\n{{< code lang=\"javascript\" file=\"carousel.js\" icon=\"file\" >}}\n// starts or resumes the carousel cycling (automated sliding)\ncarousel.cycle();\n\n// pauses the cycling (automated sliding)\ncarousel.pause();\n{{< /code >}}\n\n### HTML Markup\n\nHere 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.\n\n{{< code lang=\"html\" file=\"carousel.html\" icon=\"file\" >}}\n
\n \n \n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n Previous\n \n \n \n \n \n \n \n Next\n \n \n\n{{< /code >}}\n\nIf 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.\n\n{{< code lang=\"javascript\" file=\"carousel.js\" icon=\"file\" >}}\nconst $prevButton = document.getElementById('data-carousel-prev');\nconst $nextButton = document.getElementById('data-carousel-next');\n\n$prevButton.addEventListener('click', () => {\n carousel.prev();\n});\n\n$nextButton.addEventListener('click', () => {\n carousel.next();\n});\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"carousel.ts\" icon=\"file\" >}}\nimport { Carousel } from 'flowbite';\nimport type {\n CarouselItem,\n CarouselOptions,\n CarouselInterface,\n} from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\nconst carouselElement: HTMLElement = document.getElementById('carousel-example');\n\nconst items: CarouselItem[] = [\n {\n position: 0,\n el: document.getElementById('carousel-item-1'),\n },\n {\n position: 1,\n el: document.getElementById('carousel-item-2'),\n },\n {\n position: 2,\n el: document.getElementById('carousel-item-3'),\n },\n {\n position: 3,\n el: document.getElementById('carousel-item-4'),\n },\n];\n\n// object options with default values\nconst options: CarouselOptions = {\n defaultPosition: 1,\n interval: 3000,\n\n indicators: {\n activeClasses: 'bg-white dark:bg-gray-800',\n inactiveClasses:\n 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',\n items: [\n {\n position: 0,\n el: document.getElementById('carousel-indicator-1'),\n },\n {\n position: 1,\n el: document.getElementById('carousel-indicator-2'),\n },\n {\n position: 2,\n el: document.getElementById('carousel-indicator-3'),\n },\n {\n position: 3,\n el: document.getElementById('carousel-indicator-4'),\n },\n ],\n },\n\n // callback functions\n onNext: () => {\n console.log('next slider item is shown');\n },\n onPrev: () => {\n console.log('previous slider item is shown');\n },\n onChange: () => {\n console.log('new slider item has been shown');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'carousel-example',\n override: true\n};\n\nconst carousel: CarouselInterface = new Carousel(carouselElement, items, options, instanceOptions);\n\ncarousel.cycle();\n\n// set event listeners for prev and next buttons\nconst $prevButton = document.getElementById('data-carousel-prev');\nconst $nextButton = document.getElementById('data-carousel-next');\n\n$prevButton.addEventListener('click', () => {\n carousel.prev();\n});\n\n$nextButton.addEventListener('click', () => {\n carousel.next();\n});\n{{< /code >}}\n"
},
{
"path": "content/components/chat-bubble.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Chat Bubble - Flowbite\ndescription: Use the chat bubble component to show chat messages in your web application including voice notes, images, galleries and other attachments based on multiple styles and variations\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Carousel\npreviousLink: components/carousel/\nnext: Clipboard\nnextLink: components/clipboard/\n---\n\nThe 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.\n\nThe 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.\n\n## Default chat bubble\n\nUse this example to show a simple chat bubble with a text message, user profile and a timestamp.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
That's awesome. I think our users will really appreciate the improvements.
\n{{< /example >}}\n\n## Voice note message\n\nThis example can be used to show a voice note message with control buttons and a dropdown menu.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n{{< /example >}}\n\n## File attachment\n\nUse this example to send a file attachment inside a chat bubble with the ability to download the file.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n{{< /example >}}\n\n## Image attachment\n\nThis example can be used to show an image attachment with a download button when hovering over.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"480\" >}}\n
\n{{< /example >}}\n\n## Image gallery\n\nUse this example to show an image gallery based on a grid layout with the ability to download images.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"480\" >}}\n
\n{{< /example >}}\n\n## URL preview sharing\n\nUse this example to show a OG preview of the URL that is being shared inside the chat bubble.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"520\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
Check out this open-source UI component library based on Tailwind CSS:
\n{{< /example >}}\n\n## Outline chat bubble\n\nUse this example to show a text message with the user profile and timestamp outside the chat bubble.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"370\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
That's awesome. I think our users will really appreciate the improvements.
\n{{< /example >}}\n\n## Outline voice note\n\nThis example can be used to show a voice note with the user profile and timestamp outside the chat bubble.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"370\" >}}\n
\n{{< /example >}}\n\n## Outline file attachment\n\nUse this example to show a file attachment with the user profile and timestamp outside the chat bubble.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n{{< /example >}}\n\n## Outline image attachment\n\nThis example can be used to send an image attachment with the user profile outside the chat bubble.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"460\" >}}\n
\n{{< /example >}}\n\n## Outline image gallery\n\nUse this example to show an image gallery with the user profile and timestamp outside the chat bubble.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"480\" >}}\n
\n{{< /example >}}\n\n## Outline URL preview sharing\n\nUse this example to show a URL preview with the user profile and timestamp outside the chat bubble.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"520\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
Check out this open-source UI component library based on Tailwind CSS:
\n{{< /example >}}\n\n## Clean chat bubble\n\nUse this example to show a text message with the user profile and timestamp with a transparent background.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"180\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
That's awesome. I think our users will really appreciate the improvements.
\n Delivered\n
\n
\n{{< /example >}}\n\n## Clean voice note\n\nThis example can be used to show a voice note with a transparent background.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"180\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
\n \n \n 3:42\n
\n
\n Delivered\n
\n
\n{{< /example >}}\n\n## Clean file attachment\n\nUse this example to show a file attachment and a download button with a transparent background.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"200\" >}}\n
\n{{< /example >}}\n\n## Clean image attachment\n\nThis example can be used to show an image and a download button with a transparent background.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
This is the new office <3
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n Delivered\n
\n
\n{{< /example >}}\n\n## Clean image gallery\n\nUse this example to show an image gallery with a transparent background as a chat message.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"390\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
This is the new office <3
\n
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n \n \n
\n
\n
\n
\n Delivered\n \n
\n
\n
\n{{< /example >}}\n\n## Clean URL preview sharing\n\nThis example can be used to show a URL preview with a transparent background.\n\n{{< example class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"450\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
Check out this open-source UI component library based on Tailwind CSS:
\n{{< /example >}}"
},
{
"path": "content/components/clipboard.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Copy to Clipboard - Flowbite\ndescription: Use the clipboard component to copy text, data or lines of code to the clipboard with a single click based on various styles and examples coded with Tailwind CSS and Flowbite\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Chat Bubble\npreviousLink: components/chat-bubble/\nnext: Datepicker\nnextLink: components/datepicker/\n---\n\nThe 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.\n\nUse 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. \n\nThese 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.\n\n## Default copy to clipboard\n\nMake 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).\n\nUse 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.\n\n{{< example class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install');\n const $defaultMessage = document.getElementById('default-message');\n const $successMessage = document.getElementById('success-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n $defaultMessage.classList.add('hidden');\n $successMessage.classList.remove('hidden');\n\n // reset to default state\n setTimeout(() => {\n $defaultMessage.classList.remove('hidden');\n $successMessage.classList.add('hidden');\n }, 2000);\n });\n})\n` >}}\n
\n \n \n \n
\n{{< /example >}}\n\n## Input with copy button\n\nThis 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.\n\nIf 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.\n\n{{< example class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button');\n\n const $defaultIcon = document.getElementById('default-icon');\n const $successIcon = document.getElementById('success-icon');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message');\n const $successTooltipMessage = document.getElementById('success-tooltip-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n
\n \n \n \n
\n Copy to clipboard\n Copied!\n \n
\n
\n
\n{{< /example >}}\n\n## Copy button with text\n\nUse 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.\n\n{{< example class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-text');\n\n const $defaultMessage = document.getElementById('default-message');\n const $successMessage = document.getElementById('success-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultMessage.classList.add('hidden');\n $successMessage.classList.remove('hidden');\n }\n\n const resetToDefault = () => {\n $defaultMessage.classList.remove('hidden');\n $successMessage.classList.add('hidden');\n }\n})\n` >}}\n
\n
\n \n \n \n
\n
\n{{< /example >}}\n\n## Input group with copy\n\nThis 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.\n\n{{< example class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'website-url');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-website-url');\n\n const $defaultIcon = document.getElementById('default-icon');\n const $successIcon = document.getElementById('success-icon');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message');\n const $successTooltipMessage = document.getElementById('success-tooltip-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n \n
\n \n URL\n \n
\n \n
\n \n \n \n
\n Copy link\n Copied!\n \n
\n
\n
Security certificate is required for approval
\n
\n{{< /example >}}\n\n## URL shortener input group\n\nUse 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.\n\n{{< example class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'url-shortener');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-url-shortener');\n\n const $defaultIcon = document.getElementById('default-icon');\n const $successIcon = document.getElementById('success-icon');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message');\n const $successTooltipMessage = document.getElementById('success-tooltip-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n Copy link\n Copied!\n \n
\n
\n
Make sure that your URL is valid
\n
\n{{< /example >}}\n\n## Copy source code block\n\nThis 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.\n\nYou 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). \n\nYou 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.\n\n{{< example class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"480\" javascript=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'code-block');\n\n const $defaultMessage = document.getElementById('default-message');\n const $successMessage = document.getElementById('success-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultMessage.classList.add('hidden');\n $successMessage.classList.remove('hidden');\n }\n\n const resetToDefault = () => {\n $defaultMessage.classList.remove('hidden');\n $successMessage.classList.add('hidden');\n }\n})\n` >}}\n
\n{{< /example >}}\n\n## Copy contact details\n\nThis 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.\n\nMake 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.\n\n{{< example class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"380\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'contact-details');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-contact-details');\n\n const $defaultIcon = document.getElementById('default-icon-contact-details');\n const $successIcon = document.getElementById('success-icon-contact-details');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message-contact-details');\n const $successTooltipMessage = document.getElementById('success-tooltip-message-contact-details');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n
Contact details
\n \n
\n Name \n Email \n Phone Number\n
\n
\n Bonnie Green \n name@flowbite.com \n + 12 345 67890\n
\n \n
\n Copy to clipboard\n Copied!\n \n
\n \n
\n{{< /example >}}\n\n## Copy button with modal\n\nUse 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.\n\n{{< example class=\"bg-neutral-primary flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"580\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'course-url');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-course-url');\n\n const $defaultIcon = document.getElementById('default-icon-course-url');\n const $successIcon = document.getElementById('success-icon-course-url');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message-course-url');\n const $successTooltipMessage = document.getElementById('success-tooltip-message-course-url');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n\n\n\n
\n
\n \n
\n \n
\n
\n Share course\n
\n \n
\n \n
\n \n
\n \n \n
\n Copy to clipboard\n Copied!\n \n
\n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n## JavaScript behaviour\n\nUse 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.\n\n### Object parameters\n\nUse 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the trigger element (ie. a button or text) that will trigger the copy to clipboard event when being clicked.\n
\n
\n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the target element where the text that will be copied to the clipboard is located (ie. an input field, code block, address tag).\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Set these options to set the the content type, HTML decoder and callback function for the copy to clipboard event.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n contentType\n
\n
\n String\n
\n
\n Set the source of the text that will be copied: input (default), innerHTML or textContent.\n
\n
\n
\n
\n htmlEntities\n
\n
\n String\n
\n
\n Set this option to true if you want to decode the HTML entities for code blocks. Default is false.\n
\n
\n
\n
\n onCopy\n
\n
\n Function\n
\n
\n Set a callback function when the text has been copied to the clipboard.\n
\n
\n \n
\n
\n\n### Methods\n\nUse 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.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n getTargetValue()\n
\n
\n Get the value of the target element (ie. input field, code block, address tag).\n
\n
\n
\n
\n copy()\n
\n
\n Use this method to copy the text from the target element to the clipboard.\n
\n
\n
\n
\n decodeHTML()\n
\n
\n Use this method to decode the HTML entities from the target element.\n
\n
\n
\n
\n updateOnCopyCallback(callback)\n
\n
\n Use this method to update the callback function that is called when the text has been copied to the clipboard.\n
\n
\n \n
\n
\n\n### Example\n\nCheck 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.\n\n{{< code lang=\"javascript\" file=\"clipboard.js\" icon=\"file\" >}}\n// set the trigger element such as a button or text field\nconst $triggerEl = document.getElementById('copy-clipboard-button');\n\n// set the trigger element such as an input field or code block\nconst $targetEl = document.getElementById('copy-text');\n\n// optional options with default values and callback functions\nconst options = {\n contentType: 'input',\n htmlEntities: false, // infinite\n onCopy: () => {\n console.log('text copied successfully!');\n }\n};\n\nconst instanceOptions = {\n id: 'copy-clipboard-example',\n override: true\n};\n{{< /code >}}\n\nNext step is to create a new instance of a CopyClipboard object using the parameters we have set above.\n\n{{< code lang=\"javascript\" file=\"clipboard.js\" icon=\"file\" >}}\nimport { CopyClipboard } from 'flowbite';\n\n/*\n * $triggerEl: required\n * $targetEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst clipboard = new CopyClipboard($triggerEl, $targetEl, options, instanceOptions);\n{{< /code >}}\n\nSet the event listeners on the button to copy the text from the input field:\n\n{{< code lang=\"javascript\" file=\"clipboard.js\" icon=\"file\" >}}\n$triggerEl.addEventListener('click', () => {\n clipboard.copy();\n});\n{{< /code >}}\n\nNow you can programmatically call the methods of the CopyClipboard component:\n\n{{< code lang=\"javascript\" file=\"clipboard.js\" icon=\"file\" >}}\n// get the value, inner HTML or text content of the target element\nclipboard.getTargetValue();\n\n// copy the target element text value\nclipboard.copy();\n\n// update the on copy function callback\nclipboard.updateOnCopyCallback(() => {\n // do something when the text has been copied to the clipboard\n console.log('updated on copy callback success message');\n});\n{{< /code >}}\n\n### HTML Markup\n\nHere is an example of the HTML markup that you can use for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"clipboard.html\" icon=\"file\" >}}\n
\n \n \n \n
\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the CopyClipboard object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"clipboard.ts\" icon=\"file\" >}}\nimport { CopyClipboard } from 'flowbite';\nimport type { CopyClipboardOptions, CopyClipboardInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the trigger element which will be clicked (ie. a button or text)\nconst $triggerEl: HTMLElement = document.getElementById('copy-clipboard-button') as HTMLElement;\n\n// set the target element where the text will be copied from (ie. input field, code block)\nconst $targetEl: HTMLInputElement = document.getElementById('copy-text') as HTMLInputElement;\n\n// optional options with default values and callback functions\nconst options: CopyClipboardOptions = {\n contentType: 'input',\n htmlEntities: false, // infinite\n onCopy: () => {\n console.log('text copied successfully!');\n }\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'copy-clipboard-example',\n override: true\n};\n\n/*\n * $triggerEl: required\n * $targetEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst clipboard: CopyClipboardInterface = new CopyClipboard(\n $triggerEl,\n $targetEl,\n options,\n instanceOptions\n);\n\n// copy the value of the target element\nclipboard.copy();\n{{< /code >}}"
},
{
"path": "content/components/datepicker.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Datepicker - Flowbite\ndescription: Start receiving date and time data from your users using this free datepicker element based on Tailwind utility-classes and vanilla JavaScript\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Clipboard\npreviousLink: components/clipboard/\nnext: Device mockups\nnextLink: components/device-mockups/\n---\n\nThe 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.\n\n## Getting started\n\nIf 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.\n\nFollow the [quickstart guide]({{< ref \"getting-started/quickstart\" >}}) and then include the following JavaScript file:\n\n{{< code lang=\"html\" file=\"index.html\" icon=\"file\" >}}\n\n{{< /code >}}\n\nAlternatively you can also use CDN to include the datepicker JavaScript.\n\n{{< code lang=\"html\" file=\"index.html\" icon=\"file\" >}}\n\n{{< /code >}}\n\nAlso make sure that you add the source files for Tailwind in your main CSS file:\n\n{{< code lang=\"css\" file=\"style.css\" icon=\"file\" >}}\n@import \"tailwindcss\";\n\n@source \"../node_modules/flowbite-datepicker\";\n{{< /code >}}\n\nIf 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.\n\n## Datepicker example\n\nUse 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.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"500\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n## Inline datepicker\n\nUse 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`.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true initDatepicker=true >}}\n\n{{< /example >}}\n\n## Date range picker\n\nUse the `date-rangepicker` data attribute and the following markup to initialize two datepickers as a range.\n\n{{< example class=\"flex justify-center \" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n
\n \n
\n \n
\n to\n
\n
\n \n
\n \n
\n
\n{{< /example >}}\n\n## Options\n\nLearn 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.\n\n### Autohide\n\nUse the `datepicker-autohide` data attribute to make the datepicker disappear right after selecting a date.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n### Action buttons\n\nBy adding the `datepicker-buttons` data attribute you will enable the `today` and `clear` buttons:\n\n- clicking on the `today` button will browse back to the current day/month/year\n- clicking on the `clear` button will reset all selections\n\nIf you want the button to additionally select today's date, add `datepicker-autoselect-today` data attribute.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"530\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n### Date format\n\nIf 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.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n### Max and min dates\n\nUse the `datepicker-min-date={format}` and `datepicker-max-date={format}` to set the minimum and maximum dates that can be selected inside the datepicker.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n### Orientation\n\nYou 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.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n### Title\n\nYou can also add a title to the datepicker by using the `datepicker-title=\"{title}\"` data attribute.\n\n{{< example class=\"flex justify-center bg-neutral-primary\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"530\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n### Custom colors\n\nYou can set the `primary` color class which is by default set to blue to add your own colors.\n\n### Language (i18n)\n\nWe are working on the API to provide language support for the datepicker. \n\nUntil then, please refer to this [solution from GitHub](https://github.com/themesberg/flowbite/issues/32#issuecomment-1420422922).\n\n## Timepicker\n\nUse 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.\n\n{{< example github=\"components/timepicker.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Dark mode\n\nIf 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.\n\n## JavaScript Behaviour\n\nUse 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.\n\n### Object parameters\n\nUse 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n datepickerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the main HTML element that will be rendered for the datepicker. It can be an input element or a `div` for inline rendering.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set custom datepicker options such as the default date, minimum and maximum values, action buttons and callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n rangePicker\n
\n
\n Boolean\n
\n
\n If set to true then the datepicker will be converted to a date range picker. By default it's false.\n
\n
\n
\n
\n format\n
\n
\n String\n
\n
\n Use this option to set a custom format for the datepicker. By default it's `mm/dd/yyyy`.\n
\n
\n
\n
\n maxDate\n
\n
\n String\n
\n
\n Use this option to set the maximum selectable date of the datepicker component.\n
\n
\n
\n
\n minDate\n
\n
\n String\n
\n
\n Use this option to set the minimum selectable date of the datepicker component.\n
\n
\n
\n
\n orientation\n
\n
\n String\n
\n
\n Set the orientation of the datepicker component when it's not inline. It can be top, bottom, left, or right.\n
\n
\n
\n
\n buttons\n
\n
\n Boolean\n
\n
\n If set to true then the \"today\" and \"clear\" action buttons will be shown that lets you select today's date or clear selections.\n
\n
\n
\n
\n autoSelectToday\n
\n
\n Integer\n
\n
\n If set to 1 then it will automatically have today's date preselected.\n
\n
\n
\n
\n title\n
\n
\n String\n
\n
\n Set a custom title for the datepicker component. By default it's null.\n
\n
\n \n \n
\n
\n\n### Methods\n\nUse the following methods of the Datepicker object to programmatically manipulate the behaviour.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n getDate()\n
\n
\n Use this method to get the currenctly select date from the datepicker.\n
\n
\n
\n
\n setDate()\n
\n
\n Use this method to set the date value of the datepicker component.\n
\n
\n
\n
\n show()\n
\n
\n Use this function to programatically show the datepicker component.\n
\n
\n
\n
\n hide()\n
\n
\n Use this function to programatically hide the datepicker component.\n
\n
\n
\n
\n getDatepickerInstance()\n
\n
\n Use this method to get the parent datepicker instance with the extended collection of methods and options.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a callback function whenever the datepicker component has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a callback function whenever the datepicker component has been hidden.\n
\n
\n \n
\n
\n\n### Example\n\nCheck out the following examples to learn how to use a basic HTML markup together with the Flowbite Datepicker API JS.\n\nFirst 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.\n\n{{< code lang=\"javascript\" file=\"datepicker.js\" icon=\"file\" >}}\n// set the target element of the input field\nconst $datepickerEl = document.getElementById('datepicker-custom');\n\n// optional options with default values and callback functions\nconst options = {\n defaultDatepickerId: null,\n autohide: false,\n format: 'mm/dd/yyyy',\n maxDate: null,\n minDate: null,\n orientation: 'bottom',\n buttons: false,\n autoSelectToday: false,\n title: null,\n rangePicker: false,\n onShow: () => {},\n onHide: () => {},\n};\n\nconst instanceOptions = {\n id: 'datepicker-custom-example',\n override: true\n};\n{{< /code >}}\n\nNext step is to create a new instance of a Datepicker object using the parameters we have set above.\n\n{{< code lang=\"javascript\" file=\"datepicker.js\" icon=\"file\" >}}\nimport { Datepicker } from 'flowbite';\n\n/*\n * $datepickerEl: required\n * options: optional\n */\nconst datepicker = new Datepicker($datepickerEl, options, instanceOptions);\n{{< /code >}}\n\nUse the following methods to show and hide the datepicker, set or get the currently selected date and get access to the instance.\n\n{{< code lang=\"javascript\" file=\"datepicker.js\" icon=\"file\" >}}\n// get the currently selected date (undefined if not selected)\ndatepicker.getDate();\n\n// set the date (or dates if date range picker)\ndatepicker.setDate('05/31/2024');\n\n// programatically show the datepicker\ndatepicker.show();\n\n// programatically hide the datepicker\ndatepicker.hide();\n\n// use this method to get the parent datepicker instance from https://mymth.github.io/vanillajs-datepicker/#/\ndatepicker.getDatepickerInstance();\n{{< /code >}}\n\n### HTML Markup\n\nHere is an example of the HTML markup that you can use for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"datepicker.html\" icon=\"file\" >}}\n
\n
\n \n
\n \n
\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Datepicker object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"datepicker.ts\" icon=\"file\" >}}\nimport { Datepicker } from 'flowbite';\nimport type { DatepickerOptions, DatepickerInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the target element of the input field or div\nconst $datepickerEl: HTMLInputElement = document.getElementById('datepicker-custom') as HTMLInputElement;\n\n// optional options with default values and callback functions\nconst options: DatepickerOptions = {\n defaultDatepickerId: null,\n autohide: false,\n format: 'mm/dd/yyyy',\n maxDate: null,\n minDate: null,\n orientation: 'bottom',\n buttons: false,\n autoSelectToday: 0,\n title: null,\n rangePicker: false,\n onShow: () => {},\n onHide: () => {},\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'datepicker-custom-example',\n override: true\n};\n\n/*\n * $datepickerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst datepicker: DatepickerInterface = new Datepicker(\n $datepickerEl,\n options,\n instanceOptions\n);\n\n// get the currently selected date (undefined if not selected)\ndatepicker.getDate();\n\n// set the date (or dates if date range picker)\ndatepicker.setDate('05/31/2024');\n\n// programatically show the datepicker\ndatepicker.show();\n\n// programatically hide the datepicker\ndatepicker.hide();\n\n// use this method to get the parent datepicker instance from https://mymth.github.io/vanillajs-datepicker/#/\ndatepicker.getDatepickerInstance();\n{{< /code >}}\n\n### Parent library\n\nIf 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):\n\n{{< code lang=\"bash\" >}}\nnpm install flowbite-datepicker --save\n{{< /code >}}\n\nAfter you've installed the NPM library, you will need to import the `Datepicker` module:\n\n{{< code lang=\"javascript\" file=\"datepicker.js\" icon=\"file\" >}}\nimport Datepicker from 'flowbite-datepicker';\n{{< /code >}}\n\nInitialize a new element using the `Datepicker` constructor and optionally add your own options based on your needs:\n\n{{< code lang=\"javascript\" file=\"datepicker.js\" icon=\"file\" >}}\nconst datepickerEl = document.getElementById('datepickerId');\nnew Datepicker(datepickerEl, {\n // options\n}); \n{{< /code >}}\n\nIf you want to use the **Tailwind Date Range Picker** you have to import the `DateRangePicker` module:\n\n{{< code lang=\"javascript\" file=\"datepicker.js\" icon=\"file\" >}}\nimport DateRangePicker from 'flowbite-datepicker';\n{{< /code >}}\n\nThen in the same fashion you can initialize a date range picker component by using the `DateRangePicker` constructor:\n\n{{< code lang=\"javascript\" file=\"datepicker.js\" icon=\"file\" >}}\nconst dateRangePickerEl = document.getElementById('dateRangePickerId');\nnew DateRangePicker(dateRangePickerEl, {\n // options\n}); \n{{< /code >}}\n\n### React support\n\nOne of our community members built the React version of the Flowbite Datepicker and you can learn more about it on this repository on GitHub.\n\n### Turbo load support \n\nIn 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.\n\nFollow the [quickstart guide]({{< ref \"getting-started/rails\" >}}) and then include the following JavaScript file:\n\n{{< code lang=\"ruby\" file=\"Gemfile\" icon=\"file\" >}}\npin \"flowbite\", to: \"https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.turbo.min.js\"\n{{< /code >}}\n\nDon't forget to also import it inside your `application.js` file:\n\n{{< code lang=\"javascript\" file=\"application.js\" icon=\"file\" >}}\nimport \"flowbite/dist/flowbite.turbo.js\";\n{{< /code >}}\n"
},
{
"path": "content/components/device-mockups.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Device Mockups - Flowbite\ndescription: Use the device mockups component to add content and screenshot previews of your application inside phone and tablet frames coded with Tailwind CSS and Flowbite\ngroup: components\ntoc: true\n\nprevious: Datepicker\npreviousLink: components/datepicker/\nnext: Drawer\nnextLink: components/drawer/\n---\n\nThe 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.\n\nThis 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.\n\nYou can choose from multiple examples of mockups including phone, tablet, laptop, and even desktop devices with iOS or Android support.\n\n## Default mockup\n\nUse 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.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n## iPhone 12 mockup (iOS)\n\nUse this example to clearly show that the preview of your application is being used on an iPhone with iOS.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n## Google Pixel (Android)\n\nUse this alternative phone mockup example if you want to feature previews for android gadgets.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n## Tablet mockup\n\nThis component can be used to show an application preview inside of a responsive tablet mockup.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n## Laptop mockup\n\nThis example can be used to show a screenshot of your application inside a laptop mockup.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n
\n \n
\n{{< /example >}}\n\n## Desktop mockup\n\nUse this example to show a preview of your application inside a desktop device such as an iMac.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n\n\n{{< /example >}}\n\n## Smartwatch mockup\n\nThis component can be used to showcase applications built for smartwatches.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n\n
\n \n \n
\n \n \n
\n
\n\n{{< /example >}}\n\n## Mockup colors\n\nYou can easily update the color of the mockup by changing the background color with Tailwind CSS.\n\n{{< example github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}"
},
{
"path": "content/components/drawer.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Drawer (offcanvas) - Flowbite\ndescription: The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements\ngroup: components\nrequires_js: true\ntoc: true\n\nprevious: Device mockups\npreviousLink: components/device-mockups/\nnext: Dropdowns\nnextLink: components/dropdowns/\n---\n\nUse 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.\n\nYou 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.\n\nTo enable interactivity via data attributes and the Drawer API you need to include [Flowbite's JavaScript file]({{< ref \"getting-started/quickstart\" >}}).\n\n## Default drawer\n\nTo 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.\n\nThen 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:\n\n- `data-drawer-show=\"{id}\"` - show the drawer component\n- `data-drawer-hide=\"{id}\"` - hide the drawer component\n- `data-drawer-toggle=\"{id}\"` - toggle the visibility of the drawer component\n\nFor 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.\n\nYou 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.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
\n
\n \n Drawer heading\n
\n \n
\n
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.
\n
Recommended for professional developers and companies building enterprise-level.
\n
\n \n \n
\n
\n{{< /example >}}\n\n## Drawer navigation\n\nUse this example to show a navigational sidebar inside the drawer component.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n## Contact form\n\nUse this example to show a contact form inside the drawer component.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"840\" iframeMaxHeight=\"840\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n## Form elements\n\nUse this example if you want to add form elements inside the drawer component including datepickers.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"840\" iframeMaxHeight=\"840\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
\n
\n New event\n
\n \n
\n \n
\n{{< /example >}}\n\n## Placement\n\nUse 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\".\n\n### Left drawer\n\nUse this example where you can position the drawer component on the left side of the page.\n\nTo span the full height of the page you'll have to add the `h-screen` class to the drawer component.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
\n
\n \n Left drawer\n
\n \n
\n
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.
\n
Recommended for professional developers and companies building enterprise-level.
\n
\n \n \n
\n
\n{{< /example >}}\n\n### Right drawer\n\nUse this example to show the drawer component on the right side of the page.\n\nTo span the full height of the page you'll have to add the `h-screen` class to the drawer component.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
\n
\n \n Right drawer\n
\n \n
\n
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.
\n
Recommended for professional developers and companies building enterprise-level.
\n
\n \n \n
\n
\n{{< /example >}}\n\n### Top drawer\n\nUse this example to show the drawer on the top side of the page.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
\n
\n \n Top drawer\n
\n \n
\n
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.
\n
Recommended for professional developers and companies building enterprise-level.
\n
\n \n \n
\n
\n{{< /example >}}\n\n### Bottom drawer\n\nUse this example to show the drawer on the bottom side of the page.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n
\n \n
\n\n\n
\n
\n
\n \n Top drawer\n
\n \n
\n
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.
\n
Recommended for professional developers and companies building enterprise-level.
\n
\n \n \n
\n
\n{{< /example >}}\n\n## Body scrolling\n\nBy 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.\n\n### Disabled (default)\n\nThis is an example where the body scrolling behaviour is disabled when the drawer is visible.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n### Enabled\n\nGet 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.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n## Backdrop\n\nThe 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.\n\nUse the `data-drawer-backdrop=\"{true|false}\"` data attribute where you can disable or enable the backdrop element.\n\n### Enabled (default)\n\nUse this example to enable the backdrop element by default.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n### Disabled\n\nUse the `data-drawer-backdrop=\"false\"` data attribute to disable the backdrop element when the drawer is shown.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n## Swipeable edge\n\nThe 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.\n\nIn 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.\n\nUse 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]`.\n\n{{< example github=\"components/drawer.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
\n \n
\n \n Add widget\n
\n
\n
\n
\n
\n \n
\n
Chart
\n
\n
\n
\n \n
\n
Table
\n
\n
\n
\n \n
\n
Ticket
\n
\n
\n
\n \n
\n
List
\n
\n
\n
\n \n
\n
Price
\n
\n
\n
\n \n
\n
Users
\n
\n
\n
\n \n
\n
Task
\n
\n
\n
\n \n
\n
Custom
\n
\n
\n
\n{{< /example >}}\n\n## More examples\n\nFor more drawer component examples you can check out the following resources from Flowbite Blocks:\n\n- [CRUD read drawers](https://flowbite.com/blocks/application/crud-read-drawers/)\n- [CRUD create drawers](https://flowbite.com/blocks/application/crud-create-drawers/)\n- [CRUD update drawers](https://flowbite.com/blocks/application/crud-update-drawers/)\n- [Application shell layouts](https://flowbite.com/blocks/application/shells/)\n\n## JavaScript behaviour\n\nThe 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.\n\n### Object parameters\n\nInitialize a Drawer object with parameters such as the target element and the options object.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the main drawer element as a JavaScript object.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the default state of the drawer, placement, and other options.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse the following options for the Drawer object to set the placement, enable or disable the backdrop, enable or disable body scrolling, and more.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the drawer component relative to the document body by choosing one of the values from {top|right|bottom|left}.\n
\n
\n
\n
\n backdrop\n
\n
\n Boolean\n
\n
\n Enable or disable the backdrop element. Values can be true or false.\n
\n
\n
\n
\n bodyScrolling\n
\n
\n Boolean\n
\n
\n Enable or disable body scrolling behaviour when the drawer is active. Values can be true or false.\n
\n
\n
\n
\n edge\n
\n
\n Boolean\n
\n
\n Enable or disable the edge functionality by showing a small part of the drawer component even when inactive. Values can be true or false.\n
\n
\n
\n
\n edgeOffset\n
\n
\n String\n
\n
\n Set the offset height that should be shown when the drawer is inactive. Default value is bottom-[60px]\n
\n
\n
\n
\n backdropClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS utility classes to override the custom backdrop classes.\n
\n
\n
\n
\n onShow()\n
\n
\n Function\n
\n
\n Set a callback function when the drawer has been shown.\n
\n
\n
\n
\n onHide()\n
\n
\n Function\n
\n
\n Set a callback function when the drawer has been hidden.\n
\n
\n
\n
\n onToggle()\n
\n
\n Function\n
\n
\n Set a callback function when the drawer visibility has been toggled.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the following methods on the Drawer object to show, hide or check the visibility.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use the show function to show the drawer element.\n
\n
\n
\n
\n hide()\n
\n
\n Use the hide function to hide the drawer element.\n
\n
\n
\n
\n toggle()\n
\n
\n Use the toggle function to toggle the drawer element's visibility.\n
\n
\n
\n
\n isVisible()\n
\n
\n Use the isVisible function to check whether the element is visible or not.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Set a callback function when the drawer has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Set a callback function when the drawer has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Set a callback function when the drawer visibility has been toggled.\n
\n
\n \n
\n
\n\n### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Drawer object.\n\nFirst 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.\n\n{{< code lang=\"javascript\" file=\"drawer.js\" icon=\"file\" >}}\n// set the drawer menu element\nconst $targetEl = document.getElementById('drawer-js-example');\n\n// options with default values\nconst options = {\n placement: 'right',\n backdrop: true,\n bodyScrolling: false,\n edge: false,\n edgeOffset: '',\n backdropClasses:\n 'bg-dark/50 fixed inset-0 z-30',\n onHide: () => {\n console.log('drawer is hidden');\n },\n onShow: () => {\n console.log('drawer is shown');\n },\n onToggle: () => {\n console.log('drawer has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'drawer-js-example',\n override: true\n};\n{{< /code >}}\n\nInitialize the Drawer positioning by creating a new object:\n\n{{< code lang=\"javascript\" file=\"drawer.js\" icon=\"file\" >}}\nimport { Drawer } from 'flowbite';\n\n/*\n * $targetEl (required)\n * options (optional)\n * instanceOptions (optional)\n */\nconst drawer = new Drawer($targetEl, options, instanceOptions);\n{{< /code >}}\n\nUse the `show` and `hide` methods to show and hide the drawer component directly from JavaScript.\n\n{{< code lang=\"javascript\" file=\"drawer.js\" icon=\"file\" >}}\n// show the drawer\ndrawer.show();\n\n// hide the drawer\ndrawer.hide();\n{{< /code >}}\n\nUse the `toggle` method to toggle the visibility of the drawer.\n\n{{< code lang=\"javascript\" file=\"drawer.js\" icon=\"file\" >}}\n// toggle the drawer\ndrawer.toggle();\n{{< /code >}}\n\nUse the `isVisible` method to check the visibility of the drawer:\n\n{{< code lang=\"javascript\" file=\"drawer.js\" icon=\"file\" >}}\n// true or false\ndrawer.isVisible();\n{{< /code >}}\n\n### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"drawer.html\" icon=\"file\" >}}\n\n
\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Drawer (off-canvas) class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"drawer.ts\" icon=\"file\" >}}\nimport { Drawer } from 'flowbite';\nimport type { DrawerOptions, DrawerInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the drawer menu element\nconst $targetEl: HTMLElement = document.getElementById('drawer-js-example');\n\n// options with default values\nconst options: DrawerOptions = {\n placement: 'right',\n backdrop: true,\n bodyScrolling: false,\n edge: false,\n edgeOffset: '',\n backdropClasses:\n 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',\n onHide: () => {\n console.log('drawer is hidden');\n },\n onShow: () => {\n console.log('drawer is shown');\n },\n onToggle: () => {\n console.log('drawer has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'drawer-js-example',\n override: true\n};\n\n/*\n * $targetEl (required)\n * options (optional)\n * instanceOptions (optional)\n */\nconst drawer: DrawerInterface = new Drawer($targetEl, options, instanceOptions);\n\n// show the drawer\ndrawer.show();\n{{< /code >}}\n"
},
{
"path": "content/components/dropdowns.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Dropdown - Flowbite\ndescription: Get started with the dropdown component to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Drawer\npreviousLink: components/drawer/\nnext: Footer\nnextLink: components/footer/\n---\n\nThe 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.\n\nMake sure to include }}\">Flowbite's JavaScript file inside your project to enable dropdowns.\n\n## Dropdown example\n\nIf 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.\n\nThe `dropdownId` is the id of the dropdown menu element.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Dropdown hover\n\nUse 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).\n\nThere'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.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n{{< /example >}}\n\n### Delay duration\n\nYou 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.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Dropdown divider\n\nYou can use the `divide-y divide-gray-100` classes to add separate elements inside the dropdown menu.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Dropdown header\n\nUse this example to show extra information outside of the list of menu items inside the dropdown.\n\n{{< example class=\"flex justify-center \" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"520\" >}}\n\n\n
\n{{< /example >}}\n\n## Multi-level dropdown\n\nUse this example to enable multi-level dropdown menus by adding stacked elements inside of each other.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"350\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Dropdown with checkbox\n\nAdd multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"290\" >}}\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n### Background hover\n\nUse this example to update the background color of a menu item when using a list of checkbox elements.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n### Helper text\n\nAdd an extra helper text to each checkbox element inside the dropdown menu list with this example.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## Dropdown with radio\n\nEnable more advanced interaction with your users by adding radio input elements inside the dropdown menu.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"250\" >}}\n\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n### Background hover\n\nUse this example to update the background color when hovering over a menu item when using radio elements.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"280\" >}}\n\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n### Helper text\n\nThis example can be used to add an extra helper text inside of each radio element from the dropdown menu.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## Dropdown with toggle switch\n\nShow a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"280\" >}}\n\n\n\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n\n{{< /example >}}\n\n## Dropdown with scrolling\n\nThis 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.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Scrollable checkboxes\n\nUse this example to show multiple dropdown items in a scrollable container with checkboxes.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n \n
\n
\n{{< /example >}}\n\n## Dropdown with search\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"440\" >}}\n\n\n\n
\n
\n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n \n
\n
\n{{< /example >}}\n\n## Menu icon\n\nUse the menu icon trigger element on components such as cards as an alternative element to the button.\n\n{{< example class=\"flex justify-center space-x-4 rtl:space-x-reverse\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Notification bell\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"660\" >}}\n\n\n\n\n
\n{{< /example >}}\n\n## User avatar\n\nThis example can be used to show a list of menu items and options when a user is logged into your application.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"520\" >}}\n\n\n\n
\n{{< /example >}}\n\n### Avatar with name\n\nUse this example to also show the name or email of the user next to the avatar for the dropdown menu.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"520\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Dropdown navbar\n\nYou 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.\n\n{{< example bodyClass=\"!p-0\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n{{< /example >}}\n\n## Dropdown datepicker\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"520\" >}}\n\n\n
\n
\n
\n
\n
\n \n
\n \n
\n to\n
\n
\n \n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n## Sizes\n\nThe dropdown menus work with buttons of all sizes including smaller or larger ones.\n\n{{< example github=\"components/dropdowns.md\" class=\"space-x-2 space-y-2\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n{{< /example >}}\n\n## Placement\n\nYou 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.\n\n{{< example class=\"flex flex-wrap space-x-4 justify-center py-48\" github=\"components/dropdowns.md\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n### Double placement\n\nYou 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.\n\n{{< example class=\"flex flex-wrap justify-center space-x-4\" github=\"components/dropdowns.md\" iframeHeight=\"240\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n## Dropdown offset\n\nUse the offset options on the dropdown component to set the distance and skidding of the menu relative to the trigger element.\n\n### Distance\n\nUse 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.\n\n{{< example class=\"flex flex-wrap justify-center\" github=\"components/dropdowns.md\" iframeHeight=\"320\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n### Skidding\n\nThe `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.\n\n{{< example class=\"flex flex-wrap justify-center\" github=\"components/dropdowns.md\" iframeHeight=\"320\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n## More examples\n\nFor more dropdown examples you can check out the [dropdown filter](https://flowbite.com/blocks/application/filter/) components from Flowbite Blocks.\n\n## JavaScript behaviour\n\nThe **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.\n\n### Object parameters\n\nInitialize 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetElement\n
\n
\n Element\n
\n
\n Required\n
\n
\n Apply the main dropdown menu element as the first parameter of the Dropdown object.\n
\n
\n
\n
\n triggerElement\n
\n
\n Element\n
\n
\n Required\n
\n
\n Apply the trigger element, such as a button, which is required to position the dropdown menu and set a click event.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the positioning of the dropdown menu.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse the following options as the third parameter for the Dropdown class to set the placement of the dropdown menu.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the dropdown menu relative to the trigger element choosing from top|right|bottom|left.\n
\n
\n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the dropdown menu choosing between hover|click|none.\n
\n
\n
\n
\n offsetDistance\n
\n
\n String\n
\n
\n Set the amount of pixels the dropdown menu should be offset relative to the trigger element on the X horizontal axis.\n
\n
\n
\n
\n offsetSkidding\n
\n
\n String\n
\n
\n Set the number of pixels the dropdown menu should be offset relative to the trigger element on the Y horizontal axis.\n
\n
\n
\n
\n delay\n
\n
\n Number\n
\n
\n Set the milliseconds for which the showing or hiding of the dropdown will be delayed for when using the hover trigger type.\n
\n
\n
\n
\n ignoreClickOutsideClass\n
\n
\n String\n
\n
\n Set a class for one or more elements that when they are clicked should ignore closing the dropdown (ie. offcanvas datepicker).\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the dropdown has been hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the dropdown has been shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the dropdown visibility has been toggled.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the methods from the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Dropdown object to show the dropdown menu.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Dropdown object to hide the dropdown menu.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Dropdown object to toggle the visibility of the dropdown menu.\n
\n
\n
\n
\n isVisible()\n
\n
\n Returns true or false based on the visibility of the dropdown.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a callback function when the dropdown has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a callback function when the dropdown has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a callback function when the dropdown visibility has been changed.\n
\n
\n \n
\n
\n\n### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Dropdown object.\n\nFirst 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.\n\nAfter that, you can also optionally set an options object to set the placement of the dropdown menu and callback functions.\n\n{{< code lang=\"javascript\" file=\"dropdown.js\" icon=\"file\" >}}\n// set the dropdown menu element\nconst $targetEl = document.getElementById('dropdownMenu');\n\n// set the element that trigger the dropdown menu on click\nconst $triggerEl = document.getElementById('dropdownButton');\n\n// options with default values\nconst options = {\n placement: 'bottom',\n triggerType: 'click',\n offsetSkidding: 0,\n offsetDistance: 10,\n delay: 300,\n ignoreClickOutsideClass: false,\n onHide: () => {\n console.log('dropdown has been hidden');\n },\n onShow: () => {\n console.log('dropdown has been shown');\n },\n onToggle: () => {\n console.log('dropdown has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'dropdownMenu',\n override: true\n};\n{{< /code >}}\n\nCreate a new Dropdown object based on the options above.\n\n{{< code lang=\"javascript\" file=\"dropdown.js\" icon=\"file\" >}}\nimport { Dropdown } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst dropdown = new Dropdown($targetEl, $triggerEl, options, instanceOptions);\n{{< /code >}}\n\nUse the `show` and `hide` methods on the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.\n\n{{< code lang=\"javascript\" file=\"dropdown.js\" icon=\"file\" >}}\n// show the dropdown menu\ndropdown.show();\n\n// hide the dropdown menu\ndropdown.hide();\n\n// toggle the dropdown menu\ndropdown.toggle();\n\n// check if dropdown is visible/open\ndropdown.isVisible();\n{{< /code >}}\n\n### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"dropdown.html\" icon=\"file\" >}}\n\n\n\n
\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Dropdown class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"dropdown.ts\" icon=\"file\" >}}\nimport { Dropdown } from 'flowbite';\nimport type { DropdownOptions, DropdownInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the dropdown menu element\nconst $targetEl: HTMLElement = document.getElementById('dropdownMenu');\n\n// set the element that trigger the dropdown menu on click\nconst $triggerEl: HTMLElement = document.getElementById('dropdownButton');\n\n// options with default values\nconst options: DropdownOptions = {\n placement: 'bottom',\n triggerType: 'click',\n offsetSkidding: 0,\n offsetDistance: 10,\n delay: 300,\n onHide: () => {\n console.log('dropdown has been hidden');\n },\n onShow: () => {\n console.log('dropdown has been shown');\n },\n onToggle: () => {\n console.log('dropdown has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'dropdownMenu',\n override: true\n};\n\n/*\n * targetEl: required\n * triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst dropdown: DropdownInterface = new Dropdown(\n $targetEl,\n $triggerEl,\n options,\n instanceOptions\n);\n\n// show the dropdown\ndropdown.show();\n{{< /code >}}\n"
},
{
"path": "content/components/footer.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Footer - Flowbite\ndescription: Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo\ngroup: components\ntoc: true\n\nprevious: Dropdowns\npreviousLink: components/dropdowns/\nnext: Forms\nnextLink: components/forms/\n---\n\nThe 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.\n\nUse 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.\n\n## Default footer\n\nUse this footer component to show a copyright notice and some helpful website links.\n\n{{< example bodyClass=\"!p-0\" github=\"components/footer.md\" class=\"p-2\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Footer with logo\n\nUse this component to show your brand's logo, a few website links and the copyright notice on a second row.\n\n{{< example bodyClass=\"!p-0\" github=\"components/footer.md\" class=\"p-2\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Social media icons\n\nThis 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.\n\n{{< example bodyClass=\"!p-0\" github=\"components/footer.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Sitemap links\n\nIf 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.\n\n{{< example bodyClass=\"!p-0\" github=\"components/footer.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Sticky footer\n\nUse 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.\n\n{{< example bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n## More examples\n\nFor more footer examples you can check out the footer sections from Flowbite Blocks:\n\n- [Footers for dashboard](https://flowbite.com/blocks/application/dashboard-footer/)\n- [Footers for marketing](https://flowbite.com/blocks/marketing/footer/)\n"
},
{
"path": "content/components/forms.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Forms - Flowbite\ndescription: Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users with Flowbite\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Footer\npreviousLink: components/footer/\nnext: Gallery\nnextLink: components/gallery/\n---\n\nGet 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.\n\n## Default form\n\nThis 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.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n## Floating labels\n\nUse 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.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Input Sizes\n\nUse the following utility classes to create three different sizing options (large, base, and small) for your form input elements.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Disabled inputs\n\nUse the following utility classes to indicate a disabled form input item.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Shadow inputs\n\nAlternatively, you can decide to apply a shadow styling using the `shadow-xs` class to any of your form input elements.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Helper text\n\nUse the following markup to also add a helper text below your form input item. Usually used for newsletter signup elements.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Input element with icon\n\nUse the following Tailwind utility classes and [SVG icon](https://flowbite.com/icons/) to add an icon inside input form elements.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Input element with addon\n\nUse this example to add a SVG icon or special character with an addon style to the input element.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Form validation\n\nUse the following two success and error styles when validation your forms.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Textarea\n\nUse the following code to create a textarea form element.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Select input\n\nUse the following select input element to show selectable list of items.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Checkbox\n\nThe 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.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Radio buttons\n\nGroup a series of buttons together on a single line or stack them in a vertical column.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n## File upload\n\nUse the following Tailwind CSS file upload element to receive any type of file from users.\n\n{{< example github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Toggle Switch\n\nUse the following toggle switch component to ask for a yes or no type of input from your users without the use of JavaScript.\n\n{{< example class=\"flex flex-col flex-wrap space-y-4\" github=\"components/forms.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## More examples\n\nYou can check out the following resources for more form components from Flowbite Blocks:\n\n- [Register forms](https://flowbite.com/blocks/marketing/register/)\n- [Login forms](https://flowbite.com/blocks/marketing/login/)\n- [Reset password forms](https://flowbite.com/blocks/marketing/reset-password/)\n- [Account recovery forms](https://flowbite.com/blocks/marketing/account-recovery/)\n- [Contact forms](https://flowbite.com/blocks/marketing/contact/)\n- [CRUD create forms](https://flowbite.com/blocks/application/crud-create-forms/)\n- [CRUD update forms](https://flowbite.com/blocks/application/crud-update-forms/)\n- [User onboarding forms](https://flowbite.com/blocks/marketing/user-onboarding/)\n"
},
{
"path": "content/components/gallery.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Gallery (Masonry) - Flowbite\ndescription: Use the image gallery component based on a masonry grid layout using flex and grid classes from Tailwind CSS to show multiple pictures based on various styles\ngroup: components\ntoc: true\n\nprevious: Forms\npreviousLink: components/forms/\nnext: Indicators\nnextLink: components/indicators/\n---\n\nThe 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.\n\nThis 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.\n\n## Default gallery\n\nUse this component to show a collection of images inside a gallery with three pictures on a row.\n\n{{< example class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n{{< /example >}}\n\n## Masonry grid\n\nThis example can be used to show the images inside a masonry grid layouts with four columns.\n\n{{< example class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n{{< /example >}}\n\n## Featured image\n\nThis example can be used to feature the most important image and show a row of five pictures below.\n\n{{< example class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n{{< /example >}}\n\n## Quad gallery\n\nUse this example to show four larger images with two items on a row.\n\n{{< example class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n## Gallery with slider\n\nThis example uses the [carousel slider](https://flowbite.com/docs/components/carousel/) functionality to show multiple images inside a slider gallery.\n\n{{< example class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n \n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n## Custom slider controls\n\nThis example uses an alternative style for the control button for the carousel slider component.\n\n{{< example class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n
\n \n \n
\n
\n{{< /example >}}\n\n## Gallery with tag filters\n\nUse this example to show a list of tags and filter the images below based on the activately selected tag.\n\n{{< example bodyClass=\"mt-0\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n{{< /example >}}\n"
},
{
"path": "content/components/indicators.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Indicators - Flowbite\ndescription: Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS\ngroup: components\ntoc: true\n\nprevious: Gallery\npreviousLink: components/gallery/\nnext: Jumbotron\nnextLink: components/jumbotron/\n---\n\nThe 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.\n\nCheck out the following examples for multiple sizes, colors, positionings, styles, and more all coded with Tailwind CSS and Flowbite.\n\n## Default indicator\n\nUse this example to create a simple indicator with multiple colors and position it anywhere on the website.\n\n{{< example class=\"flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n## Legend indicator\n\nThis example can be used as a legend indicator for charts to also add a text next to the bullet point.\n\n{{< example class=\"flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\nVisitors\nSessions\nCustomers\nRevenue\n{{< /example >}}\n\n## Indicator count\n\nThis example can be used to show a number count inside the indicator and position it relative to a button component.\n\n{{< example github=\"components/indicators.md\" class=\"flex items-center justify-center\" show_dark=true >}}\n\n{{< /example >}}\n\n## Status indicator\n\nUse this example to show a status indicator for the currently logged in user by showing red for offline and green for online.\n\n{{< example github=\"components/indicators.md\" class=\"flex items-center justify-center\" show_dark=true >}}\n\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n## Badge indicator\n\nThis example can be used to add an indicator inside of a badge component.\n\n{{< example github=\"components/indicators.md\" class=\"flex items-center justify-center\" show_dark=true >}}\n\n
\n
\n
\n
\n \n
\n
\n
\n Neil Sims\n
\n
\n email@flowbite.com\n
\n
\n \n \n Available\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n Bonnie Green\n
\n
\n email@flowbite.com\n
\n
\n \n \n Unavailable\n \n
\n
\n
\n{{< /example >}}\n\n## Stepper indicator\n\nYou can also use the indicators inside of a stepper component when completing a form element.\n\n{{< example class=\"space-y-8\" github=\"components/indicators.md\" show_dark=true >}}\n\n\n
\n
\n
\n \n
\n \n
\n
\n
Step 1
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
Step 3
\n
\n
\n\n\n
\n
\n
\n \n
\n \n
\n
\n
Step 1
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
Step 3
\n
\n
\n\n{{< /example >}}\n\n## Loading indicator\n\nUse this animated loading indicator when content inside of a card is still loading.\n\n{{< example class=\"space-y-8 flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\n\n
\n
loading...
\n
\n{{< /example >}}\n\n## Spinner indicator\n\nUse this animated spinner component inside of a card component that hasn't loaded yet.\n\n{{< example class=\"space-y-8 flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\n\n
\n
\n \n Loading...\n
\n
\n{{< /example >}}\n\n## Indicator position\n\nUse these examples to position the indicator component anywhere relative to the parent element.\n\n{{< example class=\"flex items-center justify-center space-y-8\" github=\"components/indicators.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n"
},
{
"path": "content/components/jumbotron.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Jumbotron - Flowbite\ndescription: Use the jumbotron component to show a marketing message to your users based on a headline and image inside of a card box based on Tailwind CSS\ngroup: components\ntoc: true\n\nprevious: Indicators\npreviousLink: components/indicators/\nnext: KBD (Keyboard)\nnextLink: components/kbd/\n---\n\nThe 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.\n\nThis 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.\n\nThe jumbotron component from Flowbite is responsive on all devices, natively supports dark mode and is coded with the utility classes from Tailwind CSS.\n\n## Default jumbotron\n\nUse this default example to show a title, description, and two CTA buttons for the jumbotron component.\n\n{{< example bodyClass=\"p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n
\n \n \n
\n
\n\n{{< /example >}}\n\n## Background image\n\nUse this jumbotron to apply a background image with a darkening opacity effect to improve readability.\n\n{{< example bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n
\n \n \n
\n
\n\n{{< /example >}}\n\n## Featured video\n\nThis component can be used to feature a video together with a heading title, description, and CTA buttons.\n\n{{< example bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n
\n \n \n
\n
\n
\n \n
\n
\n\n{{< /example >}}\n\n## Authentication form\n\nUse this component to show a sign in or register form as the first section of your website.\n\n{{< example bodyClass=\"!p-0 bg-gray-50 dark:bg-gray-900\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n\n{{< /example >}}\n\n## Gradient background\n\nUse this component to show a hero pattern with a linear gradient layout as an overlay for added effects.\n\n{{< example bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
\n New\n
\n Great job! You've acknowledged this significant alert message.\n
\n \n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n \n
\n \n\n{{< /example >}}\n\n## Jumbotron with cards\n\nThis example can be used to show cards with headings, descriptions, and CTA buttons inside a grid layout.\n\n{{< example bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
\n \n \n Tutorial\n \n
How to quickly deploy a static website
\n
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence web designers.
\n \n
\n
\n
\n \n \n Design\n \n
Start with Flowbite Design System
\n
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.
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.
\n\n{{< /example >}}\n\n## More examples\n\nFor more jumbotron examples you can check out the [hero sections](https://flowbite.com/blocks/marketing/hero/) from Flowbite Blocks.\n"
},
{
"path": "content/components/kbd.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS KBD (Keyboard) - Flowbite\ndescription: Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components\ngroup: components\ntoc: true\n\nprevious: Jumbotron\npreviousLink: components/jumbotron/\nnext: List group\nnextLink: components/list-group/\n---\n\nThe 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.\n\nUse the semantic `` keyboard input tag to use the default monospace font which is best suited for representing input keys.\n\n## Default KBD\n\nHere's a list of KBD components that you can use inside any other element.\n\n{{< example github=\"components/kbd.md\" show_dark=true >}}\nShift\nCtrl\nTab\nCaps Lock\nEsc\nSpacebar\nEnter\n{{< /example >}}\n\n## KBD inside text\n\nUse this example by nesting an inline KBD component inside a paragraph.\n\n{{< example github=\"components/kbd.md\" show_dark=true >}}\n\n
\n Please press Ctrl + Shift + R to re-render an MDN page.\n
\n{{< /example >}}\n\n## KBD inside table\n\nThe KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.\n\n{{< example github=\"components/kbd.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Key\n
\n
\n Description\n
\n
\n \n \n
\n
\n Shift\n or\n Tab\n
\n
\n Navigate to interactive elements\n
\n
\n
\n
\n Enter\n or\n Spacebar\n
\n
\n Ensure elements with ARIA role=\"button\" can be activated with both key commands.\n
\n{{< /example >}}\n\n## Arrow keys\n\nUse this example to show arrow keys inside the KBD styled element.\n\n{{< example github=\"components/list-group.md\" show_dark=true >}}\n\n\nArrow key up\n\n\n\nArrow key down\n\n\n\nArrow key left\n\n\n\nArrow key right\n\n{{< /example >}}\n\n## Letter keys\n\nUse this example if you need to show a key from the latin alphabet\n\n{{< example github=\"components/kbd.md\" show_dark=true >}}\nQ\nW\nE\nR\nT\nY\nU\nI\nO\nP\nA\nS\nD\nF\nG\nH\nJ\nK\nL\nZ\nX\nC\nV\nB\nN\nM\n{{< /example >}}\n\n## Number keys\n\nUse this example to show a key inside a KBD component from the english numeral system.\n\n{{< example github=\"components/kbd.md\" show_dark=true >}}\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n{{< /example >}}\n\n## Function keys\n\nThis example can be used to denote function keys inside the KBD component.\n\n{{< example github=\"components/kbd.md\" show_dark=true >}}\nF1\nF2\nF3\nF4\nF5\nF6\nF7\nF8\nF9\nF10\nF11\nF12\n{{< /example >}}\n"
},
{
"path": "content/components/list-group.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS List Group - Flowbite\ndescription: Use the list group component to display a series of items, buttons or links inside a single element\ngroup: components\ntoc: true\n\nprevious: KBD (Keyboard)\npreviousLink: components/kbd/\nnext: Mega menu\nnextLink: components/mega-menu/\n---\n\nThe list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.\n\n## Default list group\n\nHere's an example of a list group that you can use right away.\n\n{{< example class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n
Profile
\n
Settings
\n
Messages
\n
Download
\n
\n{{< /example >}}\n\n## List group with links\n\nYou can also display a series of links inside the list group element.\n\n{{< example class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## List group with buttons\n\nIt 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.\n\n{{< example class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
\n{{< /example >}}\n\n## List group with icons\n\nUse the following example to create a list of buttons as a menu together with [SVG icons](https://flowbite.com/icons/).\n\n{{< example class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n\n## Features list group\n\nUse this example to show a list of features with icons in a card component.\n\n{{< example class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n
\n
\n \n 2 team members\n
\n
\n \n 20GB Cloud storage\n
\n
\n \n Integration help\n
\n
\n \n Sketch Files\n
\n
\n \n API Access\n
\n
\n \n Complete documentation\n
\n
\n \n 24Γ7 phone support\n
\n
\n
\n{{< /example >}}\n\n## Statistic list with divider\n\nThis example can be used to show a list of statistical data in a card component.\n\n{{< example class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n
\n
\n
\n \n Electronics\n
\n $5B\n
\n
\n
\n \n Fashion\n
\n $2.78B\n
\n
\n
\n \n Home Furnishings\n
\n $1.8B\n
\n
\n
\n \n Auto & Moto\n
\n $1.1B\n
\n
\n
\n \n Food and Beverage\n
\n $987\n
\n
\n
\n \n Toys\n
\n $705\n
\n
\n
\n \n Books & Music\n
\n $688\n
\n
\n
\n \n Office Equipment\n
\n $534\n
\n
\n
\n \n Audio & Video Equipment\n
\n $502\n
\n
\n
\n \n Other Categories\n
\n $95M\n
\n
\n
\n{{< /example >}}\n\n## List with avatars and CTA\n\nUse this component to show a list of users with avatars and CTA buttons.\n\n{{< example class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n
Latest users
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Neil Sims\n
\n
\n neil@windster.com\n
\n
\n
\n \n \n
\n Remove\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Bonnie Green\n
\n
\n bonnie@flowbite.com\n
\n
\n
\n \n \n
\n Remove\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Michael Gough\n
\n
\n michael@themesberg.com\n
\n
\n
\n \n \n
\n Remove\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Lana Byrd\n
\n
\n lana@apple.com\n
\n
\n
\n \n \n
\n Remove\n \n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Thomas Lean\n
\n
\n thomas@google.com\n
\n
\n
\n \n \n
\n Remove\n \n
\n
\n
\n
\n
\n
\n
\n\n{{< /example >}}\n"
},
{
"path": "content/components/mega-menu.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Mega Menu - Flowbite\ndescription: Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles.\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: List group\npreviousLink: components/list-group/\nnext: Modal\nnextLink: components/modal/\n---\n\nThe 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.\n\nMake 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.\n\n## Default mega menu\n\nUse this example to show a list of links aligned on three columns inside the mega menu dropdown.\n\n{{< example bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n{{< /example >}}\n\n## Mega menu with icons\n\nThis example of a mega menu dropdown can be used to also show an icon near the text of the link.\n\n{{< example bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n{{< /example >}}\n\n## Full width dropdown\n\nUse this example to show a mega menu dropdown that spans the entire width of the document page.\n\n{{< example bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"440\" >}}\n\n\n{{< /example >}}\n\n## Full width with CTA\n\nThis example can be used to also show a CTA button or link next to the menu items inside the dropdown.\n\n{{< example bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"360\" >}}\n\n\n{{< /example >}}\n\n## Full width with image\n\nThis example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links.\n\n{{< example bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"360\" >}}\n\n\n{{< /example >}}\n\n## More examples\n\nYou can check out more mega menu examples on the [header components](https://flowbite.com/blocks/marketing/header/) page from Flowbite Blocks.\n"
},
{
"path": "content/components/modal.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Modal - Flowbite\ndescription: Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Mega menu\npreviousLink: components/mega-menu/\nnext: Navbar\nnextLink: components/navbar/\n---\n\nThe 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.\n\nGet started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.\n\n## Default modal\n\nIn 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.\n\nIf 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:\n\n- `data-modal-toggle=\"modalID\"` - toggle the modal\n- `data-modal-show=\"modalID\"` - show the modal\n- `data-modal-hide=\"modalID\"` - close the modal\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n## Static modal\n\nUse 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.\n\n{{< example class=\"dark:bg-gray-900\" github=\"components/modal.md\" class=\"flex justify-center\" iframeHeight=\"600\" show_dark=true >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Static modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n## Pop-up modal\n\nYou 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.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"500\" >}}\n\n\n
\n
\n
\n \n
\n \n
Are you sure you want to delete this product from your account?
\n
\n \n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## Form element\n\nUse 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.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Sign in to our platform\n
\n \n
\n \n \n
\n
\n
\n{{< /example >}}\n\n## Modal with CRUD\n\nUse 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.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"620\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Create new product\n
\n \n
\n \n \n
\n
\n
\n{{< /example >}}\n\n## Modal with radio inputs\n\nThis example can be used to show a list of options to your users by using advanced radio inputs with a custom design.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Open positions\n
\n \n
\n \n
\n
Select your desired position:
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n## Modal with timeline\n\nUse 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.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"760\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Changelog\n
\n \n
\n \n
\n \n
\n \n \n \n
Flowbite Figma Design System v.2.10
\n
500+ components & over 50 new pages
\n \n
\n
\n \n \n \n
Flowbite Application UI
\n
Over 70 new pages
\n \n
\n
\n \n \n \n
Flowbite Design System Free
\n
All atomic components and variables
\n \n
\n \n
\n \n
\n
\n
\n{{< /example >}}\n\n## Modal with progress bar\n\nThis 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.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n \n
Approaching Full Capacity
\n
Choosing the right server storage solution is essential for maintaining data integrity.
\n
\n My storage\n 376,3 of 500 GB used\n
\n
\n \n
\n \n
\n \n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n\n## Crypto wallet\n\nUse this web3 modal component to show crypto wallet connection options like MetaMask or WalletConnect when building a website based on NFT authentication and collectibles.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"700\" >}}\n\n\n\n
\n
\n \n
\n \n
\n
\n Connect wallet\n
\n \n
\n \n
\n
Connect with one of our available wallet providers or create a new one.
\n{{< /example >}}\n\n## Sizes\n\nYou 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.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"900\" >}}\n\n
\n \n \n \n \n \n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n## Placement\n\nUse 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`).\n\nThe default position is the center of the page.\n\n{{< example github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"800\">}}\n\n
\n \n \n \n \n \n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n## More examples\n\nYou can check out more modal component examples from the following resources from Flowbite Blocks:\n\n- [CRUD read modals](https://flowbite.com/blocks/application/crud-read-modals/)\n- [CRUD create modals](https://flowbite.com/blocks/application/crud-create-modals/)\n- [CRUD update modals](https://flowbite.com/blocks/application/crud-update-modals/)\n- [Faceted search modals](https://flowbite.com/blocks/application/faceted-search-modals/)\n\n## JavaScript behaviour\n\nThe **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.\n\n### Object parameters\n\nInitialize a Modal object with parameters such as the modal element and the optional options object.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the main modal element as a JavaScript object.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the default state of the modal, placement, and animations.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n 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)\n
\n
\n
\n
\n backdrop\n
\n
\n String\n
\n
\n Choose between static or dynamic to prevent closing the modal when clicking outside.\n
\n
\n
\n
\n backdropClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS classes for the backdrop element (eg. 'bg-blue-500 dark:bg-blue-400'.\n
\n
\n
\n
\n closable\n
\n
\n Boolean\n
\n
\n Set to false to disable closing the modal on hitting ESC or clicking on the backdrop.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the modal has been hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the modal has been shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the modal visibility has been toggled.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the methods from the Modal object to show, hide, and toggle the visibility directly from JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n toggle()\n
\n
\n Use the toggle function on the Modal object to toggle the modal element's visibility.\n
\n
\n
\n
\n show()\n
\n
\n Use the show function on the Modal object to show the modal element.\n
\n
\n
\n
\n hide()\n
\n
\n Use the hide function on the Modal object to hide the modal element.\n
\n
\n
\n
\n isHidden()\n
\n
\n Use this function to check if the modal is hidden.\n
\n
\n
\n
\n isVisible()\n
\n
\n Use this function to check if the modal is visible.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function when the modal has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a custom callback function when the modal has been closed.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a custom callback function when the modal visibility has been toggled.\n
\n
\n \n
\n
\n\n### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Modal object.\n\nFirst 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.\n\n{{< code lang=\"javascript\" file=\"modal.js\" icon=\"file\" >}}\n// set the modal menu element\nconst $targetEl = document.getElementById('modalEl');\n\n// options with default values\nconst options = {\n placement: 'bottom-right',\n backdrop: 'dynamic',\n backdropClasses:\n 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',\n closable: true,\n onHide: () => {\n console.log('modal is hidden');\n },\n onShow: () => {\n console.log('modal is shown');\n },\n onToggle: () => {\n console.log('modal has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'modalEl',\n override: true\n};\n{{< /code >}}\n\nCreate a new Modal object based on the options above.\n\n{{< code lang=\"javascript\" file=\"modal.js\" icon=\"file\" >}}\nimport { Modal } from 'flowbite';\n\n/*\n * $targetEl: required\n * options: optional\n */\nconst modal = new Modal($targetEl, options, instanceOptions);\n{{< /code >}}\n\nUse the `show` and `hide` methods to show and hide the modal component directly from JavaScript.\n\n{{< code lang=\"javascript\" file=\"modal.js\" icon=\"file\" >}}\n// show the modal\nmodal.show();\n\n// hide the modal\nmodal.hide();\n{{< /code >}}\n\nUse the `toggle` method to toggle the visibility of the modal.\n\n{{< code lang=\"javascript\" file=\"modal.js\" icon=\"file\" >}}\n// toggle the modal\nmodal.toggle();\n{{< /code >}}\n\nUse the `isHidden` or `isVisible` method to check if the modal is visible or not.\n\n{{< code lang=\"javascript\" file=\"modal.js\" icon=\"file\" >}}\n// true if hidden\nmodal.isHidden();\n\n// true if visible\nmodal.isVisible();\n{{< /code >}}\n\n### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"modal.html\" icon=\"file\" >}}\n\n
\n \n
\n \n \n \n Terms of Service\n \n \n \n \n \n Close modal\n \n
\n \n
\n \n With less than a month to go before the European Union\n enacts new consumer privacy laws for its citizens, companies\n around the world are updating their terms of service\n agreements to comply.\n \n \n The European Unionβs General Data Protection Regulation\n (G.D.P.R.) goes into effect on May 25 and is meant to ensure\n a common set of data rights in the European Union. It\n requires organizations to notify users as soon as possible\n of high-risk data breaches that could personally affect\n them.\n \n
\n \n \n \n I accept\n \n \n Decline\n \n
\n \n \n\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Modal class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"modal.ts\" icon=\"file\" >}}\nimport { Modal } from 'flowbite';\nimport type { ModalOptions, ModalInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\nconst $modalElement: HTMLElement = document.querySelector('#modalEl');\n\nconst modalOptions: ModalOptions = {\n placement: 'bottom-right',\n backdrop: 'dynamic',\n backdropClasses:\n 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',\n closable: true,\n onHide: () => {\n console.log('modal is hidden');\n },\n onShow: () => {\n console.log('modal is shown');\n },\n onToggle: () => {\n console.log('modal has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'modalEl',\n override: true\n};\n\nconst modal: ModalInterface = new Modal($modalElement, modalOptions, instanceOptions);\n\nmodal.show();\n{{< /code >}}\n"
},
{
"path": "content/components/navbar.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Navbar - Flowbite\ndescription: The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Modal\npreviousLink: components/modal/\nnext: Pagination\nnextLink: components/pagination/\n---\n\nGet 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.\n\n## Default navbar\n\nUse 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.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n{{< /example >}}\n\n## Navbar with dropdown\n\nThis example can be used to show a secondary dropdown menu when clicking on one of the navigation links.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n{{< /example >}}\n\n## Multi-level dropdown\n\nUse this example to show multiple layers of dropdown menu by stacking them inside of each other.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n{{< /example >}}\n\n## Sticky navbar\n\nUse this example to keep the navbar positioned fixed to the top side as you scroll down the document page.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n## Navbar with submenu\n\nUse this example to show another subnav below the main navbar element.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n \n \n\n{{< /example >}}\n\n## Navbar with search\n\nUse this example of a navbar element to also show a search input element that you can integrate for a site-wide search.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n## Navbar with CTA button\n\nUse the following navbar element to show a call to action button alongside the logo and page links.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"300\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n## Language dropdown\n\nGet started with this example to show a language dropdown selector in the navbar component.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n## User menu dropdown\n\nUse this example to create a navigation bar with a user profile or button to toggle a dropdown menu.\n\n{{< example github=\"components/navbar.md\" show_dark=true skeletonPlaceholders=true iframeHeight=\"380\" >}}\n\n\n{{< /example >}}\n\n## Mega menu navbar\n\nYou 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.\n\n{{< example github=\"components/navbar.md\" show_dark=true skeletonPlaceholders=true iframeHeight=\"340\" >}}\n\n{{< /example >}}\n\n## Solid background\n\nUse this example to show a solid background for the navbar component instead of being transparent.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" skeletonPlaceholders=true >}}\n\n{{< /example >}}\n\n## Hamburger menu\n\nAll 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.\n\nHere's an example where you can show the hamburger icon and the menu on all screen sizes.\n\n{{< example github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n## More examples\n\nYou can check out more navbar component examples from the following resources from Flowbite Blocks:\n\n- [Headers for marketing](https://flowbite.com/blocks/marketing/header/)\n- [Navbars for dashboard](https://flowbite.com/blocks/application/navbar/)\n- [Application shell layouts](https://flowbite.com/blocks/application/shells/)\n\n## JavaScript behaviour\n\nUse 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.\n\n### Object parameters\n\nUse the object parameters from the Collapse object to set the trigger element, target element, and the options including callback functions.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the target element object that will be expanded or collapsed.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Optional\n
\n
\n Pass the trigger element that will expand or collapse the target element based on click event. \n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Set these options to override the default transition, duration, and timing function of the collapse animation.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse these optional options for the Collapse object to set the transition, duration, and timing function types based on the utility classes from Tailwind CSS.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n onCollapse\n
\n
\n Function\n
\n
\n Set a callback function when the item has been collapsed.\n
\n
\n
\n
\n onExpand\n
\n
\n Function\n
\n
\n Set a callback function when the item has been expanded.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the item has either been expanded or collapsed.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the following methods on the Dismiss object to programmatically manipulate the behaviour.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n collapse()\n
\n
\n Use this method on the Collapse object to hide the target element.\n
\n
\n
\n
\n expand()\n
\n
\n Use this method on the Collapse object to show the target element.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Collapse object toggle the current visibility of the target element.\n
\n
\n
\n
\n updateOnCollapse(callback)\n
\n
\n Use this method to set a callback function when the item has been collapsed.\n
\n
\n
\n
\n updateOnExpand(callback)\n
\n
\n Use this method to set a callback function when the item has been expanded.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a callback function when the item has been toggled.\n
\n
\n \n
\n
\n\n### Example\n\nCheck 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.\n\nFirst of all, you need to set the object parameters where the target element is required and the other two are optional.\n\n{{< code lang=\"javascript\" file=\"navbar.js\" icon=\"file\" >}}\n// set the target element that will be collapsed or expanded (eg. navbar menu)\nconst $targetEl = document.getElementById('targetEl');\n\n// optionally set a trigger element (eg. a button, hamburger icon)\nconst $triggerEl = document.getElementById('triggerEl');\n\n// optional options with default values and callback functions\nconst options = {\n onCollapse: () => {\n console.log('element has been collapsed');\n },\n onExpand: () => {\n console.log('element has been expanded');\n },\n onToggle: () => {\n console.log('element has been toggled');\n },\n};\n\nconst instanceOptions = {\n id: 'targetEl',\n override: true\n};\n\n{{< /code >}}\n\nNext step is to create a new instance of a Collapse object using the parameters we have set above.\n\n{{< code lang=\"javascript\" file=\"navbar.js\" icon=\"file\" >}}\nimport { Collapse } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: optional\n * options: optional\n */\nconst collapse = new Collapse($targetEl, $triggerEl, options, instanceOptions);\n{{< /code >}}\n\nNow you can programmatically expand or collapse the target element using the methods of the Collapse object.\n\n{{< code lang=\"javascript\" file=\"navbar.js\" icon=\"file\" >}}\n// show the target element\ncollapse.expand();\n\n// hide the target element\ncollapse.collapse();\n\n// toggle the visibility of the target element\ncollapse.toggle();\n{{< /code >}}\n\n### HTML Markup\n\nHere 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.\n\n{{< code lang=\"html\" file=\"navbar.html\" icon=\"file\" >}}\n\n\n\n
\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Collapse object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"navbar.ts\" icon=\"file\" >}}\nimport { Collapse } from 'flowbite';\nimport type { CollapseOptions, CollapseInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the target element that will be collapsed or expanded (eg. navbar menu)\nconst $targetEl: HTMLElement = document.getElementById('targetEl');\n\n// optionally set a trigger element (eg. a button, hamburger icon)\nconst $triggerEl: HTMLElement = document.getElementById('triggerEl');\n\n// optional options with default values and callback functions\nconst options: CollapseOptions = {\n onCollapse: () => {\n console.log('element has been collapsed');\n },\n onExpand: () => {\n console.log('element has been expanded');\n },\n onToggle: () => {\n console.log('element has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'targetEl',\n override: true\n};\n\n/*\n * $targetEl: required\n * $triggerEl: optional\n * options: optional\n * instanceOptions: optional\n */\nconst collapse: CollapseInterface = new Collapse(\n $targetEl,\n $triggerEl,\n options,\n instanceOptions\n);\n\n// show the target element\ncollapse.expand();\n{{< /code >}}\n"
},
{
"path": "content/components/pagination.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Pagination - Flowbite\ndescription: Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes\ngroup: components\ntoc: true\n\nprevious: Navbar\npreviousLink: components/navbar/\nnext: Popover\nnextLink: components/popover/\n---\n\nThe 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.\n\n## Default pagination\n\nUse 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.\n\n{{< example class=\"flex flex-col space-y-6 items-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n## Pagination with icons\n\nThe 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.\n\n{{< example class=\"flex flex-col space-y-6 items-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n\n{{< /example >}}\n\n## Previous and next\n\nUse the following markup to show simple previous and next elements.\n\n{{< example class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Previous and next with icons\n\nUse the following code to show simple previous and next elements with icons.\n\n{{< example class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n## Table data pagination\n\nYou can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.\n\n{{< example class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n \n
\n \n \n \n \n
\n
\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n \n
\n \n \n \n \n
\n
\n{{< /example >}}\n\n## Table pagination with icons\n\nYou 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.\n\n{{< example class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n \n
\n \n \n \n \n
\n
\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n \n
\n \n \n \n \n
\n
\n{{< /example >}}\n\n## Pagination with dropdown\n\nUse this example of a pagination component with a dropdown to select the number of items per page.\n\n{{< example class=\"flex flex-col space-y-6 items-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Pagination with input\n\nUse this pagination component with an input field to navigate through pages directly.\n\n{{< example class=\"flex flex-col space-y-6 items-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Input field and button\n\nThis example can be used to introduce the page number inside the input field and navigate by clicking on a button.\n\n{{< example class=\"flex flex-col space-y-6 items-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Select input and buttons\n\nThis example can be used to select the number of pages and navigate using the left and right arrows.\n\n{{< example class=\"flex flex-col space-y-6 py-8 items-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Single pagination\n\nThis example can be used to show an interval of items per page and navigate using the left and right arrows.\n\n{{< example class=\"flex flex-col space-y-6 py-8 items-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n{{< /example >}}"
},
{
"path": "content/components/popover.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Popover - Flowbite\ndescription: Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Pagination\npreviousLink: components/pagination/\n\nnext: Progress bar\nnextLink: components/progress/\n---\n\nGet 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.\n\nMake sure that you have the Flowbite JavaScript included in your project to enable the popover interactivity by following the }}\">quickstart guide.\n\n## Default popover\n\nInitialize 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.\n\n{{< example class=\"flex justify-center pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover title
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n## User profile\n\nUse this example to show more information about a user profile when hovering over the trigger component.\n\n{{< example class=\"flex justify-center pt-60\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n{{< /example >}}\n\n## Company profile\n\nThis example can be used to show more information about a company profile.\n\n{{< example class=\"flex justify-center pt-80\" github=\"components/popover.md\" disable_init_js=true show_dark=true >}}\n\n\n
\n{{< /example >}}\n\n## Image popover\n\nUse 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.\n\n{{< example class=\"flex justify-center pt-72\" github=\"components/popover.md\" show_dark=true >}}\n\n
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
\n
\n
\n
\n
\n
About Italy
\n
Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also part of Western Europe.
\n
A unitary parliamentary republic with Rome as its capital and largest city.
\n{{< /example >}}\n\n## Description popover\n\nShow helpful information inside a popover when hovering over a question mark button.\n\n{{< example class=\"pb-96\" github=\"components/popover.md\" show_dark=true >}}\n\n
This is just some informational text
\n
\n
\n
Activity growth - Incremental
\n
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.
\n
Calculation
\n
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.
\n{{< /example >}}\n\n## Progress popover\n\nShow a progress bar with details inside a popover when hovering over a settings button.\n\n{{< example class=\"flex justify-center pt-52\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Available storage
\n
This server has 30 of 150 GB of block storage remaining.
\n{{< /example >}}\n\n## Password strength\n\nDynamically show the password strength progress when creating a new password positioned relative to the input element.\n\n{{< example github=\"components/popover.md\" iframeHeight=\"480\" show_dark=true >}}\n\n\n{{< /example >}}\n\n## Placement\n\nSet 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.\n\n{{< example class=\"flex flex-wrap justify-center py-24 space-x-4\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover top
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n
\n
\n
Popover right
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n
\n
\n
Popover bottom
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n
\n
\n
Popover left
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n## Triggering\n\nManually 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`.\n\n{{< example class=\"flex justify-center space-x-4 pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover left
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n\n\n
\n
\n
Popover left
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n## Offset\n\nIncrease or decrease the default offset by adding the `data-popover-offset=\"{offset}\"` data attribute where the value is an integer.\n\n{{< example class=\"flex justify-center pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover left
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n## Animation\n\nCustomize the animation of the popover component by using the utility classes from Tailwind CSS such as `transition-opacity` and `duration-{x}`.\n\n{{< example class=\"flex justify-center pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover left
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n## Disable arrow\n\nYou can also disable the popover arrow by not including the `data-popper-arrow` element.\n\n{{< example class=\"flex justify-center pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover left
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n
\n{{< /example >}}\n\n## JavaScript behaviour\n\nThe 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.\n\n### Object parameters\n\nCreate 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the popover component as the target element.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set an element to trigger the popover when clicking or hovering (ie. a button, text).\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the positioning of the popover element, trigger type, offset, and more.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse the following options as the third parameter for the Popover object to set the positioning, offset, and the trigger type (hover or click).\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the popover element relative to the trigger element choosing from top|right|bottom|left.\n
\n
\n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the popover content choosing between hover|click|none.\n
\n
\n
\n
\n offset\n
\n
\n Integer\n
\n
\n Set the offset distance between the popover and the trigger element.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the popover is hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the popover is shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the popover visibility has been toggled.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the methods from the Popover object to programmatically show or hide the popover from directly JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Popover object to show the popover content.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Popover object to hide the popover content.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Popover object to toggle the visibility of the popover content.\n
\n
\n
\n
\n isVisible()\n
\n
\n Use this function to check if the popover is visible or not.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function when the popover has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a custom callback function when the popover has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a custom callback function when the popover has been toggled.\n
\n
\n \n
\n
\n\n### Example\n\nUse following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Popover object.\n\nFirst of all, set the target element as the popover itself and the trigger element which can be a button or text element.\n\nAfter that you can also set the options object to change the placement and trigger type of the popover, alongside with the callback functions.\n\n{{< code lang=\"javascript\" file=\"popover.js\" icon=\"file\" >}}\n// set the popover content element\nconst $targetEl = document.getElementById('popoverContent');\n\n// set the element that trigger the popover using hover or click\nconst $triggerEl = document.getElementById('popoverButton');\n\n// options with default values\nconst options = {\n placement: 'bottom',\n triggerType: 'hover',\n offset: 10,\n onHide: () => {\n console.log('popover is shown');\n },\n onShow: () => {\n console.log('popover is hidden');\n },\n onToggle: () => {\n console.log('popover is toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'popoverContent',\n override: true\n};\n{{< /code >}}\n\nCreate a new Popover object based on the options above.\n\n{{< code lang=\"javascript\" file=\"popover.js\" icon=\"file\" >}}\nimport { Popover } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n */\nconst popover = new Popover($targetEl, $triggerEl, options, instanceOptions);\n{{< /code >}}\n\nUse the `show` and `hide` methods on the Popover object to programmatically show and hide the popover element using JavaScript.\n\n{{< code lang=\"javascript\" file=\"popover.js\" icon=\"file\" >}}\n// show the popover\npopover.show();\n\n// hide the popover\npopover.hide();\n\n// toggle the popover\npopover.toggle();\n\n// check if popover is visible\npopover.isVisible();\n\n// destroy popover object (removes event listeners and off-canvas Popper.js)\ntooltip.destroy();\n\n// re-initialize popover object\ntooltip.init();\n{{< /code >}}\n\n### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"popover.html\" icon=\"file\" >}}\n\n Default popover\n\n\n \n
\n Popover title\n
\n \n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Popover class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"popover.ts\" icon=\"file\" >}}\nimport { Popover } from 'flowbite';\nimport type { PopoverOptions, PopoverInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the popover content element\nconst $targetEl: HTMLElement = document.getElementById('popoverContent');\n\n// set the element that trigger the popover using hover or click\nconst $triggerEl: HTMLElement = document.getElementById('popoverButton');\n\n// options with default values\nconst options: PopoverOptions = {\n placement: 'top',\n triggerType: 'hover',\n offset: 10,\n onHide: () => {\n console.log('popover is shown');\n },\n onShow: () => {\n console.log('popover is hidden');\n },\n onToggle: () => {\n console.log('popover is toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'popoverContent',\n override: true\n};\n\nif ($targetEl) {\n /*\n * targetEl: required\n * triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\n const popover: PopoverInterface = new Popover(\n $targetEl,\n $triggerEl,\n options,\n instanceOptions\n );\n\n popover.show();\n}\n{{< /code >}}\n"
},
{
"path": "content/components/progress.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Progress Bar - Flowbite\ndescription: Use the progress bar component to show the completion rate of a data indicator or use it as a loader element\ngroup: components\ntoc: true\n\nprevious: Popover\npreviousLink: components/popover/\nnext: Rating\nnextLink: components/rating/\n---\n\nThe 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.\n\n## Default progress bar\n\nUse 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.\n\n{{< example github=\"components/progress.md\" show_dark=true >}}\n
\n \n
\n{{< /example >}}\n\n## Sizes\n\nYou can also use different sizes by using various sizing utility classes from Flowbite and Tailwind CSS.\n\n{{< example class=\"space-y-4\" github=\"components/progress.md\" show_dark=true >}}\n
Small
\n
\n \n
\n
Default
\n
\n \n
\n
Large
\n
\n \n
\n{{< /example >}}\n\n## With label inside\n\nHere is an example of using a progress bar with the label inside the bar.\n\n{{< example github=\"components/progress.md\" show_dark=true >}}\n
\n
45%
\n
\n{{< /example >}}\n\n## With label outside\n\nAnd this is an example of using a progress bar outside the bar.\n\n{{< example github=\"components/progress.md\" show_dark=true >}}\n
\n Flowbite\n 45%\n
\n
\n \n
\n{{< /example >}}\n\n## Colors\n\nYou can also apply any color using the `bg-{color}` utility classes from Tailwind CSS and Flowbite.\n\n{{< example class=\"space-y-4\" github=\"components/progress.md\" show_dark=true >}}\n
Dark
\n
\n \n
\n
Brand
\n
\n \n
\n
Success
\n
\n \n
\n
Danger
\n
\n \n
\n
Danger
\n
\n \n
\n\n{{< /example >}}\n"
},
{
"path": "content/components/qr-code.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS QR Code Generator - Flowbite\ndescription: Use this component to generate and show QR codes based on text or URL that can be scanned with device phone cameras and other devices using the Flowbite library based on Tailwind CSS\ngroup: components\ntoc: true\n\nprevious: Typography\npreviousLink: components/typography/\nnext: Video\nnextLink: components/video/\n---\n\n
\n
\n
Generate QR codes from text or URLs.
\n \n \n \n \n
\n \n
\n
\n
L (Low) β Recovers 7% of data
\n
\n
\n
Best for simple, high-quality printing where space efficiency is important.
\n
\n \n
\n \n
\n
\n
M (Medium) β Recovers 15% of data
\n
\n
\n
Most commonly used; good balance of size and robustness.
\n
\n \n
\n \n
\n
\n
Q (Quartile) β Recovers 25% of data
\n
\n
\n
More resilient; useful when the code may get smudged or partially covered.
\n
\n \n
\n \n
\n
\n
H (High) β Recovers 30% of data
\n
\n
\n
Highest durability; used when maximum protection is needed (e.g., logos in the center of the code or harsh conditions).
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n \n \n
\n
\n
\n\nQR codes are a popular way to encode information such as website links, texts, and other data into a two-dimensional barcode that can be scanned with a phone camera or other devices. The Flowbite component allows you to couple them with other elements such as input fields, tooltips, tab selectors, and more.\n\nUse this free QR code generator and customize the parameters to see the live preview.\n\nThe component examples below are generated using the data you provided in the generator tool and can be used directly in your website layouts with different use cases such as sharing URLs, contact information, or text messages.\n\n## Default QR code\n\nUse this example as a simple QR code with SVG embedded directly in the HTML.\n\n{{< example github=\"components/alerts.md\" class=\"flex justify-center\" show_dark=true >}}\n
\n \n
\n{{< /example >}}\n\n## QR code with input\n\nUse this example to show a QR code with SVG and a copy to clipboard input element below.\n\n{{< example github=\"components/alerts.md\" class=\"flex justify-center\" show_dark=true javascript=`\n\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button');\n\n const $defaultIcon = document.getElementById('default-icon');\n const $successIcon = document.getElementById('success-icon');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message');\n const $successTooltipMessage = document.getElementById('success-tooltip-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n
\n \n
\n\n
\n
\n \n \n \n
\n Copy to clipboard\n Copied!\n \n
\n
\n
\n
\n{{< /example >}}\n\n## QR code with card\n\nThis example can be used to show a QR code inside a card element with a title and description.\n\n{{< example github=\"components/alerts.md\" class=\"flex justify-center\" show_dark=true >}}\n
\n{{< /example >}}\n\n## Share profile with QR\n\nUse this example to share profile information using a QR code with profile details.\n\n{{< example github=\"components/alerts.md\" class=\"flex justify-center\" show_dark=true >}}\n
Share your QR code and make it easy for others to follow you.
\n
\n{{< /example >}}\n\n## Loading state\n\nThis example can be used to show a loading state right after the QR code was scanned with the camera.\n\n{{< example github=\"components/alerts.md\" class=\"flex justify-center\" show_dark=true >}}\n
\n
\n
\n \n Loading...\n
\n
\n
\n \n
\n
\n{{< /example >}}\n\n## Success state\n\nUse this component to show a success state after the QR code was scanned and the data was processed.\n\n{{< example github=\"components/alerts.md\" class=\"flex justify-center\" show_dark=true >}}\n
\n
\n \n Scanned\n
\n
\n \n
\n
\n{{< /example >}}\n\n## Expired state\n\nYou can use this component to show that the QR code has expired and allow the user to refresh the code.\n\n{{< example github=\"components/alerts.md\" class=\"flex justify-center\" show_dark=true >}}\n
\n
\n \n QR code expired\n \n
\n
\n \n
\n
\n{{< /example >}}"
},
{
"path": "content/components/rating.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Rating - Flowbite\ndescription: Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes\ngroup: components\ntoc: true\n\nprevious: Progress bar\npreviousLink: components/progress/\nnext: Sidebar\nnextLink: components/sidebar/\n---\n\nGet 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.\n\nYou 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.\n\n## Default rating\n\nUse this simple example of a star rating component for showing review results.\n\n{{< example class=\"flex justify-center\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
\n{{< /example >}}\n\n## Rating with text\n\nIf you also want to show a text near the stars you can use this example as a reference.\n\n{{< example class=\"flex justify-center\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n
\n \n \n \n \n \n
\n
4.95 out of 5
\n
\n{{< /example >}}\n\n## Rating count\n\nAggregate more results by using this example to show the amount of reviews and the average score.\n\n{{< example class=\"flex justify-center\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Star sizes\n\nCheck out the different sizing options for the star review component from small, medium, and large.\n\n{{< example class=\"flex flex-col items-center space-y-4\" github=\"components/rating.md\" show_dark=true >}}\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n
\n{{< /example >}}\n\n## Advanced rating\n\nThis 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).\n\n{{< example github=\"components/rating.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Score rating\n\nThis component can be used to break up a general rating score into multiple categories using progress bars.\n\n{{< example github=\"components/rating.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Rating comment\n\nUse 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.\n\n{{< example github=\"components/rating.md\" show_dark=true >}}\n\n\n
\n \n
\n
Jese Leos
\n
\n
\n
\n \n \n \n \n \n
Thinking to buy another one!
\n
\n \n
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.
\n
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.
\n Read more\n \n\n{{< /example >}}\n\n## Review content\n\nUse this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.\n\n{{< example github=\"components/rating.md\" show_dark=true >}}\n\n\n
\n
\n \n
\n
Jese Leos
\n
\n \n United States\n
\n
\n
\n
\n
\n \n Apartament with city view\n
\n
\n \n 3 nights December 2021\n
\n
\n \n Family\n
\n
\n
\n
\n
\n
\n \n
Spotless, good appliances, excellent layout, host was genuinely nice and helpful.
\n
\n
8.7
\n
\n
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.
\n
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.
\n \n
\n\n{{< /example >}}\n"
},
{
"path": "content/components/sidebar.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Sidebar - Flowbite\ndescription: Use the sidebar component to show a list of menu items and multi-level menu items on either side of the page to navigate on your website\ngroup: components\ntoc: true\n\nprevious: Rating\npreviousLink: components/rating/\nnext: Skeleton\nnextLink: components/skeleton/\n---\n\nThe 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.\n\n## Default sidebar\n\nUse this example to show a responsive list of menu items inside the sidebar with icons and labels.\n\n{{< example github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"600\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n## Multi-level menu\n\nUse 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.\n\n{{< example github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## Content separator\n\nSeparate the content inside the sidebar component by applying a border separator between the two menus.\n\n{{< example github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## CTA button\n\nUse this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.\n\n{{< example github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## Logo branding\n\nShow the logo of your brand and link back to the homepage from the top part of the sidebar.\n\n{{< example github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## Sidebar with navbar\n\nUse this example to show a navbar together with a sidebar layout for your web application.\n\n{{< example github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n## Off-canvas sidebar\n\nUse this example to show the navigation as an off-canvas drawer component when clicking on an element.\n\n{{< example github=\"components/sidebar.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n## More examples\n\nYou 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.\n\n## Dashboard Layout\n\nThese 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.\n"
},
{
"path": "content/components/skeleton.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Skeleton - Flowbite\ndescription: The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video\ngroup: components\ntoc: true\n\nprevious: Sidebar\npreviousLink: components/sidebar/\nnext: Speed Dial\nnextLink: components/speed-dial/\n---\n\nUse 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.\n\nYou 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.\n\nYou can also animate the skeleton component by using the `.animate-pulse` utility class from Tailwind CSS.\n\n## Default skeleton\n\nUse this example to show a placeholder when loading text content.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n
\n \n \n \n \n \n \n Loading...\n
\n\n{{< /example >}}\n\n## Image placeholder\n\nThis example can be used to show a placeholder when loading an image and text content.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n \n
\n
\n \n \n \n \n \n \n
\n Loading...\n
\n\n{{< /example >}}\n\n## Video placeholder\n\nUse this example to show a skeleton placeholder when loading video content.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n\n
\n \n Loading...\n
\n{{< /example >}}\n\n## Text placeholder\n\nUse this example to show a placeholder when loading longer pagraphs and headings.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n Loading...\n
\n{{< /example >}}\n\n## Card placeholder\n\nUse this example to show a placeholder when loading content inside a card.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n \n Loading...\n
\n \n \n \n \n
\n \n
\n \n \n
\n
\n Loading...\n
\n{{< /example >}}\n\n## Widget placeholder\n\nThis example can be used to show a placeholder of skeleton when fetching data for widgets and cards inside an application.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n
\n \n \n
\n \n \n \n \n \n \n \n
\n Loading...\n
\n{{< /example >}}\n\n## List placeholder\n\nUse this example to show a placeholder when loading a list of items.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n Loading...\n
\n{{< /example >}}\n\n## Testimonial placeholder\n\nThis example can be used to show a skeleton placeholder when loading data for a testimonial section.\n\n{{< example github=\"components/skeleton.md\" show_dark=true >}}\n
\n \n \n
\n \n \n \n
\n Loading...\n
\n{{< /example >}}\n\n## Accessibility\n\nUse 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.\n"
},
{
"path": "content/components/speed-dial.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Speed Dial - Flowbite\ndescription: The speed dial component can be used as a quick way to show a list of action buttons to a user when hovering or clicking on the main trigger element.\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Skeleton\npreviousLink: components/skeleton/\n\nnext: Spinner\nnextLink: components/spinner/\n---\n\nGet 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.\n\nThis 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.\n\nMake sure that you have the Flowbite JS file included in your application by following our }}\">quickstart guide.\n\n## Default speed dial\n\nTo 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.\n\nFurthermore, make sure that the trigger button element has the `data-dial-toggle=\"{targetElementId}\"` where the value is the ID of the target element.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n## Square speed dial\n\nUse this example to make the trigger button's style square instead of a full circle using the `rounded-lg` utility class.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n## Text inside button\n\nThis example can be used to show the descriptive text inside the button instead of a tooltip.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n \n \n \n
\n \n
\n\n
\n
\n \n \n \n \n
\n \n
\n{{< /example >}}\n\n## Text outside button\n\nUse this example to show the text of each button outside of the speed dial as an alternative style.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n \n \n \n
\n \n
\n\n
\n
\n \n \n \n \n
\n \n
\n{{< /example >}}\n\n## Dropdown menu\n\nThis example can be used to show a list of menu items instead of buttons when activating the speed dial.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Alternative menu\n\nThis example can be used to show an alternative style when showing a list of menu items.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Positioning\n\nThe positioning of the speed dial component relative to the body element can be easily done by using the positioning utility classes from Tailwind CSS.\n\n### Top right\n\nUse the `top-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the top right side of the document body.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n
\n{{< /example >}}\n\n### Bottom right\n\nUse the `bottom-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the bottom right side of the document body.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n### Bottom left\n\nUse the `bottom-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the bottom left side of the document body.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n### Top left\n\nUse the `top-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the top left side of the document body.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n
\n \n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n
\n{{< /example >}}\n\n## Alignment\n\nThe alignment of the speed dial menu items and buttons can be set using the flexbox utility classes from Tailwind CSS.\n\n### Vertical\n\nThe default alignment of the menu items of the speed dial is vertical using the `flex-col` utility class.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n### Horizontal\n\nHorizontally align the speed dial menu items by using the flexbox utility classes from Tailwind CSS.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n## Triggering\n\nUse 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.\n\n### Hover\n\nThe default trigger type is hover for each speed dial component.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n### Click\n\nIf 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.\n\n{{< example class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n## JavaScript behaviour\n\nThe 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.\n\n### Object parameters\n\nCreate 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n parentEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n This is the parent and main wrapping element of the speed dial component.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set a button as the trigger element for the speed dial.\n
\n
\n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n This is the element that is the list of menu items or buttons that will be toggled.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the trigger type and other options of the speed dial.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse the following options as the third parameter for the Speed Dial object to set the trigger type (hover or click).\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the speed dial choosing between hover|click|none.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the speed dial is hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the speed dial is shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the speed dial is toggled.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the methods from the Speed Dial object to programmatically show or hide the component from directly JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Speed Dial object to show the list of menu items or buttons.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Speed Dial object to hide the list of menu items or buttons.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Speed Dial object to toggle the visibility of the list of menu items or buttons.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a callback function when the dial has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a callback function when the dial has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a callback function when the dial visibility has been changed.\n
\n
\n \n
\n
\n\n### Example\n\nUse following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Speed Dial object.\n\nThree arguments are required for the Speed Dial component, namely the parent element, trigger element, and the target element.\n\nFurthermore, you can also pass an object of options to set the trigger type and set the callback functions.\n\n{{< code lang=\"javascript\" file=\"speed-dial.js\" icon=\"file\" >}}\n// parent element wrapping the speed dial\nconst $parentEl = document.getElementById('dialParent');\n\n// the trigger element that can be clicked or hovered\nconst $triggerEl = document.getElementById('dialButton');\n\n// the content wrapping element of menu items or buttons\nconst $targetEl = document.getElementById('dialContent');\n\n// options with default values\nconst options = {\n triggerType: 'click',\n onHide: () => {\n console.log('speed dial is shown');\n },\n onShow: () => {\n console.log('speed dial is hidden');\n },\n onToggle: () => {\n console.log('speed dial is toggled');\n },\n};\n\n// instance options with default values\nconst instanceOptions = {\n id: 'dialContent',\n override: true\n};\n{{< /code >}}\n\nCreate a new Speed Dial object based on the options above.\n\n{{< code lang=\"javascript\" file=\"speed-dial.js\" icon=\"file\" >}}\nimport { Dial } from 'flowbite';\n\n/*\n * $parentEl: required\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst dial = new Dial($parentEl, $triggerEl, $targetEl, options, instanceOptions);\n{{< /code >}}\n\nUse the `show`, `hide`, or `toggle` methods on the Speed Dial object to programmatically show and hide the speed dial component using JavaScript.\n\n{{< code lang=\"javascript\" file=\"speed-dial.js\" icon=\"file\" >}}\n// show the speed dial\ndial.show();\n\n// hide the speed dial\ndial.hide();\n\n// toggle the visibility of the speed dial\ndial.toggle();\n{{< /code >}}\n\n### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"speed-dial.html\" icon=\"file\" >}}\n
\n \n \n \n \n \n Share\n \n \n Share\n \n
\n \n \n \n \n \n Print\n \n \n Print\n \n
\n \n \n \n \n \n Download\n \n \n Download\n \n \n \n \n \n \n \n Copy\n \n \n Copy\n \n \n \n \n \n \n \n Open actions menu\n \n\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Speed Dial class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"speed-dial.ts\" icon=\"file\" >}}\nimport { Dial } from 'flowbite';\nimport type { DialOptions, DialInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// parent element wrapping the speed dial\nconst $parentEl: HTMLElement = document.getElementById('dialParent');\n\n// the trigger element that can be clicked or hovered\nconst $triggerEl: HTMLElement = document.getElementById('dialButton');\n\n// the content wrapping element of menu items or buttons\nconst $targetEl: HTMLElement = document.getElementById('dialContent');\n\n// options with default values\nconst options: DialOptions = {\n triggerType: 'hover',\n onHide: () => {\n console.log('speed dial is shown');\n },\n onShow: () => {\n console.log('speed dial is hidden');\n },\n onToggle: () => {\n console.log('speed dial is toggled');\n },\n};\n\n// instance options with default values\nconst instanceOptions: InstanceOptions = {\n id: 'dialContent',\n override: true\n};\n\n/*\n * $parentEl: required\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n */\nconst dial: DialInterface = new Dial($parentEl, $triggerEl, $targetEl, options);\n\n// show the speed dial\ndial.show();\n{{< /code >}}\n"
},
{
"path": "content/components/spinner.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Spinner - Flowbite\ndescription: Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG using the utility classes from Tailwind CSS\ngroup: components\ntoc: true\n\nprevious: Speed Dial\npreviousLink: components/speed-dial/\nnext: Stepper\nnextLink: components/stepper/\n---\n\nThe 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.\n\n## Default spinner\n\nUse the following SVG element with the `animate-spin` animation class to show a loading animation:\n\n{{< example github=\"components/spinner.md\" show_dark=true >}}\n
\n \n Loading...\n
\n{{< /example >}}\n\n## Colors\n\nYou can change the colors of the spinner element using the fill and color utility classes from Tailwind CSS:\n\n- use `fill-{*}` to change the main colors\n- use `text-{*}` to change the background\n\n{{< example github=\"components/spinner.md\" class=\"flex items-center space-x-2 rtl:space-x-reverse\" show_dark=true >}}\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n{{< /example >}}\n\n## Sizes\n\nChange the size of the spinner component using the `h-{*}` and `w-{*}` utility classes from Tailwind CSS:\n\n{{< example github=\"components/spinner.md\" class=\"flex items-center space-x-2 rtl:space-x-reverse\" show_dark=true >}}\n\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n{{< /example >}}\n\n## Alignment\n\nBecause 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:\n\n{{< example github=\"components/spinner.md\" show_dark=true >}}\n\n
\n
\n \n Loading...\n
\n
\n
\n
\n \n Loading...\n
\n
\n
\n
\n \n Loading...\n
\n
\n{{< /example >}}\n\n## Spinner with card\n\nUse this animated loading indicator when content inside of a card is still loading.\n\n{{< example github=\"components/spinner.md\" show_dark=true >}}\n\n
\n
Noteworthy technology acquisitions 2021
\n
Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
\n
\n \n Loading...\n
\n
\n{{< /example >}}\n\n## Progress spinner\n\nUse this animated spinner component inside a list of steppers elements.\n\n{{< example github=\"components/spinner.md\" show_dark=true >}}\n\n
Converting your image:
\n
\n
\n \n Upload your file to our website\n
\n
\n \n Choose your file format\n
\n
\n
\n \n Loading...\n
\n Preparing your file\n
\n
\n{{< /example >}}\n\n## Buttons\n\nThe spinner component can also be used inside elements such as buttons when submitting form data:\n\n{{< example github=\"components/spinner.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n## Accessibillity\n\nUse 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.\n\nThe `role=\"status\"` attribute on the main `
` wrapper is used to indicate a status message to assistive technologies such as screen readers.\n"
},
{
"path": "content/components/stepper.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Stepper - Flowbite\ndescription: Use the stepper component to show the number of steps required to complete a form inside your application based on Tailwind CSS\ngroup: components\ntoc: true\n\nprevious: Spinner\npreviousLink: components/spinner/\nnext: Tables\nnextLink: components/tables/\n---\n\nThe 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.\n\nThere 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.\n\n## Default stepper\n\nUse this example to show a list of form steps with a number and title of the step in a horizontal alignment.\n\n{{< example github=\"components/stepper.md\" show_dark=true >}}\n\n\n
\n \n \n Personal Info\n \n
\n
\n \n 2\n Account Info\n \n
\n
\n 3\n Confirmation\n
\n\n{{< /example >}}\n\n## Progress stepper\n\nThis 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.\n\n{{< example github=\"components/stepper.md\" show_dark=true >}}\n\n\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n\n{{< /example >}}\n\n## Detailed stepper\n\nUse this example to show an extra subtitle next to the number and the title of the steppper component based on an ordered list element.\n\n{{< example github=\"components/stepper.md\" show_dark=true >}}\n\n
\n \n \n \n \n
User info
\n
Step details here
\n \n
\n
\n \n \n \n \n
Company info
\n
Step details here
\n \n
\n
\n \n \n \n \n
Payment info
\n
Step details here
\n \n
\n\n\n{{< /example >}}\n\n## Vertical stepper\n\nThis example can be used to show a list of steps aligned vertically where you can indicate the completed, currently active, and the unexplored steps.\n\n{{< example github=\"components/stepper.md\" show_dark=true >}}\n\n
\n
\n
\n User info\n
1. User info
\n \n
\n
\n
\n
\n
\n
\n Account info\n
2. Account info
\n \n
\n
\n
\n
\n
\n
\n Social accounts\n
3. Social accounts
\n \n
\n
\n
\n
\n
\n
\n Review\n
4. Review
\n \n
\n
\n
\n
\n
\n
\n Confirmation\n
5. Confirmation
\n \n
\n
\n
\n\n{{< /example >}}\n\n## Breadcrumb stepper\n\nThis 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.\n\n{{< example github=\"components/stepper.md\" show_dark=true >}}\n\n
\n \n 1\n \n Personal Info\n \n
\n
\n \n 2\n \n Account Info\n \n
\n
\n \n 3\n \n Review\n
\n\n\n{{< /example >}}\n\n## Timeline stepper\n\nUse this example to show the number of steps inside a timeline component using icons, title, and subtitle for each step.\n\n{{< example github=\"components/stepper.md\" class=\"p-4\" show_dark=true >}}\n\n \n
\n \n \n \n
Personal Info
\n
Step details here
\n
\n
\n \n \n \n
Account Info
\n
Step details here
\n
\n
\n \n \n \n
Review
\n
Step details here
\n
\n
\n \n \n \n
Confirmation
\n
Step details here
\n
\n\n{{< /example >}}\n\n## Stepper with form\n\nUse this example to show the stepper component next to a form layout and change the content based on which currently step your are completing.\n\n{{< example github=\"components/stepper.md\" show_dark=true >}}\n\n\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n\n\n\n\n{{< /example >}}\n"
},
{
"path": "content/components/tables.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Table - Flowbite\ndescription: Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells\ngroup: components\ntoc: true\n\nprevious: Stepper\npreviousLink: components/stepper/\nnext: Tabs\nnextLink: components/tabs/\n---\n\nThe 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.\n\nGet started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite.\n\n## Default table\n\nUse the following example of a responsive table component to show multiple rows and columns of text data.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Color\n
\n
\n Category\n
\n
\n Price\n
\n
\n Stock\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n Silver\n
\n
\n Laptop\n
\n
\n $2999\n
\n
\n 231\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n White\n
\n
\n Laptop PC\n
\n
\n $1999\n
\n
\n 423\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n Black\n
\n
\n Accessories\n
\n
\n $99\n
\n
\n 121\n
\n
\n \n
\n
\n{{< /example >}}\n\n## Highlight\n\nAccentuate certain elements inside the table such as the rows, columns or data cells based on your needs.\n\n### Striped rows\n\nUse this example to increase the readability of the data sets by alternating the background color of every second table row.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n### Striped columns\n\nUse this example to increase the readability of the table cells by alternating the background color of every second table column.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Color\n
\n
\n Category\n
\n
\n Price\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n Silver\n
\n
\n Laptop\n
\n
\n $2999\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n White\n
\n
\n Laptop PC\n
\n
\n $1999\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n Black\n
\n
\n Accessories\n
\n
\n $99\n
\n
\n
\n
\n Google Pixel Phone\n
\n
\n Gray\n
\n
\n Phone\n
\n
\n $799\n
\n
\n
\n
\n Apple Watch 5\n
\n
\n Red\n
\n
\n Wearables\n
\n
\n $999\n
\n
\n \n
\n
\n{{< /example >}}\n\n### Hover state\n\nUse 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.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Table layout\n\nUse the following examples of table layouts to show the head, foot or caption of the table.\n\n### Table head (sortable)\n\nThis example can be used to show the head of the table component with sortable icons.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n### Table foot\n\nUse this example where the `` HTML element can be used in conjunction with the head and caption of the table component.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Qty\n
\n
\n Price\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n 1\n
\n
\n $2999\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n 1\n
\n
\n $1999\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n 1\n
\n
\n $99\n
\n
\n \n \n
\n
Total
\n
3
\n
21,000
\n
\n \n
\n
\n{{< /example >}}\n\n### Table caption\n\nImprove accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n
\n Our products\n
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.
\n{{< /example >}}\n\n## Table styles\n\nGet started with the following table styles and choose the one that best fits your application.\n\n### Without border\n\nUse this example of a table component without any border between the table cells.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Color\n
\n
\n Category\n
\n
\n Price\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n Silver\n
\n
\n Laptop\n
\n
\n $2999\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n White\n
\n
\n Laptop PC\n
\n
\n $1999\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n Black\n
\n
\n Accessories\n
\n
\n $99\n
\n
\n \n
\n
\n{{< /example >}}\n\n### Table with shadow\n\nUse this example to apply a shadow-sm border to the table component.\n\n{{< example github=\"components/tables.md\" class=\"pb-4 overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Overflow scrolling\n\nUse this example where we apply `overflow-x-auto` to enable horizontal scrolling if the content inside the table overflows that maximum width.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Table search\n\nUse this example to show a search bar that can be used to query through data inside the table component.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n\n## Table filter\n\nUse this example with a filter bar to select certain data sets inside the table based on the options that you've selected.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Table pagination\n\nPaginate the table data when using larger data sets based on any given amount of results per page.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Checkbox selection\n\nCheckboxes can be used inside table data rows to select multiple data sets and apply a bulk action.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n\n## Table with users\n\nUse this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Table with products\n\nGet 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.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n\n## Table with modal\n\nUse this example to show a modal with a form where you can edit table data by clicking on one of the rows.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true iframeHeight=\"640\" >}}\n
\n{{< /example >}}\n\n## Table colors\n\nApply any color to the table element by using the `bg-{color}` and `text-{color}` color class variants from Tailwind CSS.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n### Striped rows color\n\nUse this example to apply a different color to every second row inside the table.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n### Striped columns color\n\nUse this example to apply a different color to every second column inside a colored table.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n### Hover state\n\nUse this example to apply a different color to every second row inside the table with a colored background.\n\n{{< example github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## More examples\n\nYou can check out more table component examples from the following resources from Flowbite Blocks:\n\n- [Advanced tables](https://flowbite.com/blocks/application/advanced-tables/)\n- [Table headers](https://flowbite.com/blocks/application/table-headers/)\n- [Table footers](https://flowbite.com/blocks/application/table-footers/)\n- [Pricing tables](https://flowbite.com/blocks/marketing/pricing/)\n"
},
{
"path": "content/components/tabs.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Tabs - Flowbite\ndescription: Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container\ngroup: components\ntoc: true\n\nprevious: Tables\npreviousLink: components/tables/\nnext: Timeline\nnextLink: components/timeline/\n---\n\nThe 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.\n\n## Default tabs\n\nUse the following default tabs component example to show a list of links that the user can navigate from on your website.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Tabs with underline\n\nUse this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Tabs with icons\n\nThis is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Pills tabs\n\nIf you want to use pills as a style for the tabs component you can do so by using this example.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Vertical tabs\n\nUse this example to show a vertically aligned set of tabs on the left side of the page.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.
\n
The tab JavaScript swaps classes to control the content visibility and styling.
\n
\n
\n\n{{< /example >}}\n\n\n## Full width tabs\n\nIf 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.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n## Tabs with icons\n\nThis example can be used to show a list of tabs with icons from our [SVG icons](https://flowbite.com/icons/).\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n\n## Interactive tabs\n\nUse 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.\n\nEach 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.\n\nUse 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.\n\nApply 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.\n\nYou can use multiple tab components on a single page but make sure that the id's are different.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n{{< /example >}}\n\n## Active tab style\n\nUse 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.\n\n{{< example github=\"components/tabs.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n{{< /example >}}\n\n## JavaScript behaviour\n\nThe **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.\n\n### Object parameters\n\nCreate a new Tabs object with parameters such as an array of the tab and content elements.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n tabsElement\n
\n
\n Element\n
\n
\n Required\n
\n
\n Parent HTML element of the tabs component.\n
\n
\n
\n
\n items\n
\n
\n Array\n
\n
\n Required\n
\n
\n Array of the tab objects including the id, trigger element, and the content element.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n An object of options for the appearances of the tabs and to use callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse the following options as the second parameter for the Tabs object to set the appearance of the active tab elements and use callback functions.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n defaultTabId\n
\n
\n String\n
\n
\n Set the currently active tab element based on the ID.\n
\n
\n
\n
\n activeClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS class names to apply to the active tab element.\n
\n
\n
\n
\n inactiveClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS class names to apply to the inactive tab elements.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the a new tab has been shown.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the methods from the Tabs object to programmatically change the current active tab using JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show(id)\n
\n
\n Use the show function on the Tab object to change the current active tab element.\n
\n
\n
\n
\n getTab(id)\n
\n
\n Return the tab element based on the ID.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function whenever a tab has been shown.\n
\n
\n \n
\n
\n\n### Example\n\nCheck out the following example to learn how to initialize and manipulate a Tabs object in JavaScript.\n\nFirst 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.\n\n{{< code lang=\"javascript\" file=\"tabs.js\" icon=\"file\" >}}\nconst tabsElement = document.getElementById('tabs-example');\n\n// create an array of objects with the id, trigger element (eg. button), and the content element\nconst tabElements = [\n {\n id: 'profile',\n triggerEl: document.querySelector('#profile-tab-example'),\n targetEl: document.querySelector('#profile-example'),\n },\n {\n id: 'dashboard',\n triggerEl: document.querySelector('#dashboard-tab-example'),\n targetEl: document.querySelector('#dashboard-example'),\n },\n {\n id: 'settings',\n triggerEl: document.querySelector('#settings-tab-example'),\n targetEl: document.querySelector('#settings-example'),\n },\n {\n id: 'contacts',\n triggerEl: document.querySelector('#contacts-tab-example'),\n targetEl: document.querySelector('#contacts-example'),\n },\n];\n\n// options with default values\nconst options = {\n defaultTabId: 'settings',\n activeClasses:\n 'text-fg-brand hover:text-fg-brand border-brand',\n inactiveClasses:\n 'text-body hover:text-fg-brand border-base hover:border-brand',\n onShow: () => {\n console.log('tab is shown');\n },\n};\n\n// instance options with default values\nconst instanceOptions = {\n id: 'tabs-example',\n override: true\n};\n{{< /code >}}\n\nCreate a new Tabs object based on the parameters we've previously set.\n\n{{< code lang=\"javascript\" file=\"tabs.js\" icon=\"file\" >}}\nimport { Tabs } from 'flowbite';\n\n/*\n* tabsElement: parent element of the tabs component (required)\n* tabElements: array of tab objects (required)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst tabs = new Tabs(tabsElement, tabElements, options, instanceOptions);\n{{< /code >}}\n\nLastly, 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.\n\n{{< code lang=\"javascript\" file=\"tabs.js\" icon=\"file\" >}}\n// shows another tab element\ntabs.show('dashboard');\n\n// get the tab object based on ID\ntabs.getTab('contacts');\n\n// get the current active tab object\ntabs.getActiveTab();\n{{< /code >}}\n\n### HTML Markup\n\nYou can use this HTML code as an example for the JavaScript code from above.\n\n{{< code lang=\"html\" file=\"tabs.html\" icon=\"file\" >}}\n
\n
\n
\n \n Profile\n \n
\n
\n \n Dashboard\n \n
\n
\n \n Settings\n \n
\n
\n \n Contacts\n \n
\n
\n
\n
\n \n
\n This is some placeholder content the\n Profile tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n
\n \n
\n This is some placeholder content the\n Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n \n \n
\n This is some placeholder content the\n Settings tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n \n \n
\n This is some placeholder content the\n Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n \n\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Tabs class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"tabs.ts\" icon=\"file\" >}}\nimport { Tabs } from 'flowbite';\nimport type { TabsOptions, TabsInterface, TabItem } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\nconst tabsElement: HTMLElement = document.getElementById('tabs-example');\n\n// create an array of objects with the id, trigger element (eg. button), and the content element\nconst tabElements: TabItem[] = [\n {\n id: 'profile',\n triggerEl: document.querySelector('#profile-tab-example'),\n targetEl: document.querySelector('#profile-example'),\n },\n {\n id: 'dashboard',\n triggerEl: document.querySelector('#dashboard-tab-example'),\n targetEl: document.querySelector('#dashboard-example'),\n },\n {\n id: 'settings',\n triggerEl: document.querySelector('#settings-tab-example'),\n targetEl: document.querySelector('#settings-example'),\n },\n {\n id: 'contacts',\n triggerEl: document.querySelector('#contacts-tab-example'),\n targetEl: document.querySelector('#contacts-example'),\n },\n];\n\n// options with default values\nconst options: TabsOptions = {\n defaultTabId: 'settings',\n activeClasses:\n 'text-fg-brand hover:text-fg-brand border-brand',\n inactiveClasses:\n 'text-body hover:text-fg-brand border-base hover:border-brand',\n onShow: () => {\n console.log('tab is shown');\n },\n};\n\n// instance options with default values\nconst instanceOptions: InstanceOptions = {\n id: 'tabs-example',\n override: true\n};\n\n/*\n* tabsElement: parent element of the tabs component (required)\n* tabElements: array of tab elements (required)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst tabs: TabsInterface = new Tabs(tabsElement, tabElements, options, instanceOptions);\n\n// open tab item based on id\ntabs.show('contacts');\n{{< /code >}}\n"
},
{
"path": "content/components/timeline.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Timeline - Flowbite\ndescription: Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants\ngroup: components\ntoc: true\n\nprevious: Tabs\npreviousLink: components/tabs/\nnext: Toast\nnextLink: components/toast/\n---\n\nThe 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.\n\n## Default timeline\n\nUse 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.\n\nOptionally, you can also add a CTA button to any of the timeline elements.\n\n{{< example github=\"components/timeline.md\" show_dark=true >}}\n \n
\n \n \n
Application UI code in Tailwind CSS
\n
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
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.
\n
\n
\n \n \n
E-Commerce UI code in Tailwind CSS
\n
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
\n
\n\n\n{{< /example >}}\n\n## Vertical timeline\n\nUse this vertical timeline component with icons and badges to show a more advanced set of data.\n\n{{< example github=\"components/timeline.md\" show_dark=true >}}\n \n
\n \n \n \n \n
Flowbite Application UI v2.0.0 Latest
\n
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
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.
\n
\n
\n \n \n \n \n
Flowbite Library v1.2.2
\n
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
\n
\n\n\n{{< /example >}}\n\n## Stepper timeline\n\nUse this horizontally aligned timeline component to show a series of data in a chronological order.\n\n{{< example github=\"components/timeline.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n \n
\n
\n \n
Flowbite Library v1.0.0
\n
Get started with dozens of web components and interactive elements.
\n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n \n
Flowbite Library v1.2.0
\n
Get started with dozens of web components and interactive elements.
\n \n
\n
\n
\n
\n
\n \n
\n \n
\n
\n \n
Flowbite Library v1.3.0
\n
Get started with dozens of web components and interactive elements.
\n \n
\n
\n\n\n{{< /example >}}\n\n## Activity log\n\nThis 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.\n\n{{< example github=\"components/timeline.md\" show_dark=true >}}\n \n
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.
\n\n\n{{< /example >}}\n\n## Grouped timeline\n\nUse 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.\n\n{{< example github=\"components/timeline.md\" show_dark=true >}}\n
\n{{< /example >}}\n"
},
{
"path": "content/components/toast.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Toast - Flowbite\ndescription: Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions\ngroup: components\nrequires_js: true\ntoc: true\n\nprevious: Timeline\npreviousLink: components/timeline/\nnext: Tooltips\nnextLink: components/tooltips/\n---\n\nThe 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.\n\n## Default toast\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n \n
Set yourself free.
\n \n
\n\n{{< /example >}}\n\n## Colors\n\nUse these contextual toast components to show success, danger, or warning alert messages to your users.\n\n{{< example class=\"flex flex-col items-center space-y-4\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n \n Check icon\n
\n
Item moved successfully.
\n \n
\n
\n
\n \n Error icon\n
\n
Item has been deleted.
\n \n
\n
\n
\n \n Warning icon\n
\n
Improve password difficulty.
\n \n
\n\n{{< /example >}}\n\n## Simple toast\n\nThis component can be used to show simple messages and notifications without the use of a close button.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n \n
Message sent successfully.
\n \n
\n{{< /example >}}\n\n## Undo button\n\nUse this toast component to also show an \"undo\" button to reverse the action of the user.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n\n{{< /example >}}\n\n## Toast message\n\nThis component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n \n
\n Jese Leos\n
Hi Neil, thanks for sharing your thoughts regarding Flowbite.
\n \n
\n \n
\n
\n{{< /example >}}\n\n## Push notification\n\nThis 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.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n New notification\n
\n
\n
\n \n
\n
\n
Bonnie Green
\n
commented on your photo
\n a few seconds ago \n
\n
\n
\n \n \n
\n
\n\n{{< /example >}}\n\n## Interactive toast\n\nUse 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.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n
\n \n Refresh icon\n
\n
\n Update available\n
A new software version is available for download.
\n
\n \n \n
\n
\n
\n
\n\n{{< /example >}}\n\n## Toast illustration\n\nThis example can be used to show a notification as a toast component with an illustration.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n \n \n
\n Connect your wallet\n
Connect your wallet by clicking the bottom-right blue button.
\n
\n \n \n
\n
\n
\n
\n\n{{< /example >}}\n\n## Toast progress bar\n\nUse this example to show a toast component that is dismissble with a progress bar.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n \n Refresh icon\n
\n
\n Uploading in progress\n
Please wait while your file is being uploaded. This may take a moment.
\n
\n
\n \n
\n
75%
\n
\n
\n \n \n
\n
\n
\n\n{{< /example >}}\n\n## Toast danger alert\n\nUse this example to show an alert to your users inside a toast component with a description.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
Whoops! Something went wrong
\n
\n The file format is not supported. Please upload a valid file type (PDF, JPG, PNG).\n
\n
\n \n \n
\n
\n\n{{< /example >}}\n\n## Toast warning alert\n\nThis example can be used to warn users before they perform a certain action inside a toast component.\n\n{{< example class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n
\n \n Info\n
Upload your invoice
\n
\n \n
\n
\n Upload your invoice in one of the supported formats (PDF, JPG, PNG) with a maximum file size of 5MB. Ensure that all relevant details are visible for verification.\n
\n
\n \n \n
\n
\n\n{{< /example >}}\n\n## Positioning\n\nUse the `fixed` class from Tailwind CSS to position these toast components relative to the main content wrapper element from your document:\n\n- Top left: `fixed top-5 left-5`\n- Top right: `fixed top-5 right-5`\n- Bottom left: `fixed bottom-5 left-5`\n- Bottom right: `fixed bottom-5 right-5`\n\n{{< example github=\"components/toast.md\" class=\"relative h-56\" show_dark=true >}}\n\n
\n
Top left positioning.
\n
\n
\n
Top right positioning.
\n
\n
\n
Bottom right positioning.
\n
\n
\n
Bottom left positioning.
\n
\n{{< /example >}}\n\nYou can set your own distance for the `top-*|right-*|bottom-*|left-*` positioning classes.\n\n## JavaScript behaviour\n\nPlease check out the }}#javascript-behaviour\">Dismiss object documentation to learn how to programmatically work with the toast component directly from JavaScript.\n"
},
{
"path": "content/components/tooltips.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Tooltip - Flowbite\ndescription: Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element\ngroup: components\ntoc: true\nrequires_js: true\n\nprevious: Toast\npreviousLink: components/toast/\n\nnext: Typography\nnextLink: components/typography/\n---\n\nFlowbite 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.\n\nBefore continuing, make sure that you have the }}\">Flowbite JavaScript file included in your project in order to make the tooltip component work.\n\n## Default tooltip example\n\nTo 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.\n\n{{< example class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n## Tooltip styles\n\nYou 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.\n\n{{< example class=\"flex justify-center pt-8 \" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n\n\n\n
\n Tooltip content\n \n
\n\n\n\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n## Placement\n\nThe 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.\n\n{{< example class=\"flex flex-wrap justify-center py-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n\n\n\n
\n Tooltip on top\n \n
\n\n\n\n\n\n
\n Tooltip on right\n \n
\n\n\n\n\n\n
\n Tooltip on bottom\n \n
\n\n\n\n\n\n
\n Tooltip on left\n \n
\n{{< /example >}}\n\n## Triggering\n\nYou 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`.\n\n{{< example class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n\n\n\n
\n Tooltip content\n \n
\n\n\n\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n## Animation\n\nYou 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.\n\n{{< example class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n## Disable arrow\n\nYou can also disable the tooltip arrow by not including the `data-popper-arrow` element.\n\n{{< example class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n
\n Tooltip content\n
\n{{< /example >}}\n\n## JavaScript behaviour\n\nThe **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.\n\n### Object parameters\n\nInitialize 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Apply the tooltip content element to show and hide it either using the methods or the hover or click status of the trigger element.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set an element to trigger the tooltip when clicking or hovering (ie. a button, text).\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the positioning of the tooltip element, trigger type, offsets, and more.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the tooltip element relative to the trigger element choosing from top|right|bottom|left.\n
\n
\n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the tooltip content choosing between hover|click|none.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the tooltip is hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the tooltip is shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the tooltip visibility is toggled.\n
\n
\n \n
\n
\n\n### Methods\n\nUse the methods from the Tooltip object to programmatically show or hide the tooltip from JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Tooltip object to show the tooltip content.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Tooltip object to hide the tooltip content.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Tooltip object to toggle the visibility of the tooltip content.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function when the tooltip has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a custom callback function when the tooltip has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a custom callback function when the tooltip visibility has been toggled.\n
\n
\n \n
\n
\n\n### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Tooltip object.\n\nFirst of all, set the target element as the tooltip itself and the trigger element which can be a button or text element.\n\nAfter that you can also set the options object to change the placement and trigger type of the tooltip, alongside with the callback functions.\n\n{{< code lang=\"javascript\" file=\"tooltip.js\" icon=\"file\" >}}\n// set the tooltip content element\nconst $targetEl = document.getElementById('tooltipContent');\n\n// set the element that trigger the tooltip using hover or click\nconst $triggerEl = document.getElementById('tooltipButton');\n\n// options with default values\nconst options = {\n placement: 'bottom',\n triggerType: 'hover',\n onHide: () => {\n console.log('tooltip is shown');\n },\n onShow: () => {\n console.log('tooltip is hidden');\n },\n onToggle: () => {\n console.log('tooltip is toggled');\n },\n};\n\n\n// instance options with default values\nconst instanceOptions = {\n id: 'tooltipContent',\n override: true\n};\n{{< /code >}}\n\nCreate a new Tooltip object based on the options above.\n\n{{< code lang=\"javascript\" file=\"tooltip.js\" icon=\"file\" >}}\nimport { Tooltip } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n */\nconst tooltip = new Tooltip($targetEl, $triggerEl, options, instanceOptions);\n{{< /code >}}\n\nUse the `show` and `hide` methods on the Tooltip object to programmatically show and hide the tooltip element using JavaScript.\n\n{{< code lang=\"javascript\" >}}\n// show the tooltip\ntooltip.show();\n\n// hide the tooltip\ntooltip.hide();\n\n// toggle the tooltip\ntooltip.toggle();\n\n// destroy tooltip object (removes event listeners and off-canvas Popper.js)\ntooltip.destroy();\n\n// re-initialize tooltip object\ntooltip.init();\n{{< /code >}}\n\n### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n{{< code lang=\"html\" file=\"tooltip.html\" icon=\"file\" >}}\n\n Default tooltip\n\n\n Tooltip content\n \n\n{{< /code >}}\n\n### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Tooltip class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n{{< code lang=\"typescript\" file=\"tooltip.ts\" icon=\"file\" >}}\nimport { Tooltip } from 'flowbite';\nimport type { TooltipOptions, TooltipInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the tooltip content element\nconst $targetEl: HTMLElement = document.getElementById('tooltipContent');\n\n// set the element that trigger the tooltip using hover or click\nconst $triggerEl: HTMLElement = document.getElementById('tooltipButton');\n\n// options with default values\nconst options: TooltipOptions = {\n placement: 'top',\n triggerType: 'hover',\n onHide: () => {\n console.log('tooltip is shown');\n },\n onShow: () => {\n console.log('tooltip is hidden');\n },\n onToggle: () => {\n console.log('tooltip is toggled');\n },\n};\n\n// instance options with default values\nconst instanceOptions: InstanceOptions = {\n id: 'tooltipContent',\n override: true\n};\n\n/*\n * targetEl: required\n * triggerEl: required\n * options: optional\n */\nconst tooltip: TooltipInterface = new Tooltip($targetEl, $triggerEl, options, instanceOptions);\n\n// show the tooltip\ntooltip.show();\n{{< /code >}}\n"
},
{
"path": "content/components/typography.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Typography - Flowbite\ndescription: Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class\ngroup: components\ntoc: true\n\nprevious: Tooltips\npreviousLink: components/tooltips/\nnext: QR Code\nnextLink: components/qr-code/\n---\n\nGet 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.\n\nYou can check out this [live demo](https://flowbite.com/plugins/typography/) to see how content inside an article will render like.\n\n## Getting started\n\nMake sure that you have both [Node.js](https://nodejs.org/) and [Tailwind CSS](https://tailwindcss.com/) already installed in your project.\n\n1. Install the Flowbite Typography plugin via NPM:\n\n{{< code lang=\"bash\" >}}\nnpm i -D flowbite-typography\n{{< /code >}}\n\n2. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:\n\n{{< code lang=\"javascript\" >}}\n@plugin \"flowbite-typography\";\n{{< /code >}}\n\nAlternatively you can do the same but in your `tailwind.config.js` file:\n\n{{< code lang=\"javascript\" >}}\n// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('flowbite-typography'),\n // ...\n ],\n}\n{{< /code >}}\n\nNow you can go ahead and use the new formatting classes from the Flowbite Typography plugin.\n\n## Basic usage\n\nOnce 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.\n\nAll 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.\n\n{{< code lang=\"html\" >}}\n\n
Prototyping from A to Z: best practices for successful prototypes
\n
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.
\n
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.
\n
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.
\n \n ...\n\n
When does design come in handy?
\n
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
\n \n
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;
\n
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;
\n
Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
\n
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.
\n \n\n{{< /code >}}\n\nYou can also set the `lg:format-lg` class to set increase font sizes and spacings for larger viewport devices.\n\n## Link colors\n\nYou can update the default blue link color to anything you'd like by setting the `format-{color}` class:\n\n{{< code lang=\"html\" >}}\n\n
Prototyping from A to Z: best practices for successful prototypes
\n
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.
\n
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.
\n
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.
\n\n{{< /code >}}\n## Dark mode\n\nEnable dark mode for the typography by using the `dark:format-invert` class on the article wrapper element:\n\n{{< code lang=\"html\" >}}\n\n
The content inside this article will invert when switching to dark mode
\n
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.
\n
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.
\n
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.
\n \n ...\n\n
When does design come in handy?
\n
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
\n \n
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;
\n
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;
\n
Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
\n
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.
\n \n\n{{< /code >}}\n\n## Max width\n\nOverride the default maximum width by setting a custom `max-w-{size}` class next to the `format` class:\n\n{{< code lang=\"html\" >}}\n\n
Prototyping from A to Z: best practices for successful prototypes
\n
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.
\n
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.
\n
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.
\n\n{{< /code >}}\n\n## Disable format\n\nIf you want to disable formatting inside the typography content you can use the `not-format` class:\n\n{{< code lang=\"html\" >}}\n\n
The content inside this article will invert when switching to dark mode
\n
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.
\n
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.
\n
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.
\n \n ...\n\n \n
\n
When does design come in handy?
\n
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
\n \n
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;
\n
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;
\n
Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
\n
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.
\n \n
\n\n{{< /code >}}\n\n## Options\n\nExtend the plugin's options inside the Tailwind configuration file to set your own colors, class name, and more.\n\n### Custom colors\n\nYou can set your own colors by extending the typography plugin inside the `tailwind.config.js` file:\n\n{{< code lang=\"javascript\" >}}\nmodule.exports = {\n theme: {\n extend: {\n typography: ({ theme }) => ({\n orange: {\n css: {\n '--tw-format-body': theme('colors.orange[500]'),\n '--tw-format-headings': theme('colors.orange[900]'),\n '--tw-format-lead': theme('colors.orange[500]'),\n '--tw-format-links': theme('colors.orange[600]'),\n '--tw-format-bold': theme('colors.orange[900]'),\n '--tw-format-counters': theme('colors.orange[500]'),\n '--tw-format-bullets': theme('colors.orange[500]'),\n '--tw-format-hr': theme('colors.orange[200]'),\n '--tw-format-quotes': theme('colors.orange[900]'),\n '--tw-format-quote-borders': theme('colors.orange[300]'),\n '--tw-format-captions': theme('colors.orange[700]'),\n '--tw-format-code': theme('colors.orange[900]'),\n '--tw-format-code-bg': theme('colors.orange[50]'),\n '--tw-format-pre-code': theme('colors.orange[100]'),\n '--tw-format-pre-bg': theme('colors.orange[900]'),\n '--tw-format-th-borders': theme('colors.orange[300]'),\n '--tw-format-td-borders': theme('colors.orange[200]'),\n '--tw-format-th-bg': theme('colors.orange[50]'),\n '--tw-format-invert-body': theme('colors.orange[200]'),\n '--tw-format-invert-headings': theme('colors.white'),\n '--tw-format-invert-lead': theme('colors.orange[300]'),\n '--tw-format-invert-links': theme('colors.white'),\n '--tw-format-invert-bold': theme('colors.white'),\n '--tw-format-invert-counters': theme('colors.orange[400]'),\n '--tw-format-invert-bullets': theme('colors.orange[600]'),\n '--tw-format-invert-hr': theme('colors.orange[700]'),\n '--tw-format-invert-quotes': theme('colors.pink[100]'),\n '--tw-format-invert-quote-borders': theme('colors.orange[700]'),\n '--tw-format-invert-captions': theme('colors.orange[400]'),\n '--tw-format-invert-code': theme('colors.white'),\n '--tw-format-invert-pre-code': theme('colors.orange[300]'),\n '--tw-format-invert-pre-bg': 'rgb(0 0 0 / 50%)',\n '--tw-format-invert-th-borders': theme('colors.orange[600]'),\n '--tw-format-invert-td-borders': theme('colors.orange[700]'),\n '--tw-format-invert-th-bg': theme('colors.orange[700]'),\n },\n },\n }),\n },\n },\n plugins: [\n require('flowbite-typography'),\n // ...\n ],\n}\n{{< /code >}}\n\nNow you can use the `format-red` class and apply these styles.\n\n### Wrapper class\n\nChange the default `format` class to your own choosing by updating the `tailwind.config.js` file:\n\n{{< code lang=\"javascript\" >}}\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('flowbite-typography')({\n className: 'custom-class',\n }),\n ]\n ...\n}\n{{< /code >}}\n\n### Custom CSS\n\nYou can also customize the default CSS by extending the `css` key value pair from the Tailwind configuration file:\n\n{{< code lang=\"javascript\" >}}\nmodule.exports = {\n theme: {\n extend: {\n typography: {\n DEFAULT: {\n css: {\n color: '#666',\n a: {\n color: '#3182ce',\n '&:hover': {\n color: '#2c5282',\n },\n },\n },\n },\n },\n },\n },\n plugins: [\n require('flowbite-typography'),\n // ...\n ],\n}\n{{< /code >}}\n\n## Blog templates\n\nYou can check out the following [blog template](https://flowbite.com/blocks/publisher/blog-templates/) layouts from Flowbite Blocks that use the Typography plugin.\n"
},
{
"path": "content/components/video.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Video - Flowbite\ndescription: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS\ngroup: components\ntoc: true\n\nprevious: QR Code\npreviousLink: components/qr-code/\nnext: Input field\nnextLink: forms/input-field/\n---\n\nGet 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.\n\n## Video player\n\nUse 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.\n\n{{< example github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Autoplay\n\nUse the `autoplay` attribute on the video component to automatically start the video when the page has been loaded.\n\n{{< example github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Muted\n\nUse the `muted` attribute together with the `autoplay` option to start the video while the sound is muted.\n\n{{< example github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Sizes\n\nSet the width and height of the video component using the `w-{size}` and `h-{size}` utility classes from Tailwind CSS.\n\n### Width\n\nUse the `w-{size}` class to set the width of the video component.\n\n{{< example github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n### Height\n\nUse the `h-{size}` class to set the height of the video player.\n\n{{< example github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n### Responsive\n\nUse the following example to make the video responsive across all devices and viewports.\n\n{{< example github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n## Custom styles\n\nCustomize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border.\n\n{{< example github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}"
},
{
"path": "content/customize/_index.html",
"content": "---\nlayout: redirect\nsitemap_exclude: true\nredirect: \"/docs/customize/configuration/\"\n---"
},
{
"path": "content/customize/colors.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Colors - Flowbite\ndescription: Customize the default colors of Flowbite using the default color variables from the Tailwind CSS framework\ngroup: customize\ntoc: true\n\nprevious: Theming\npreviousLink: customize/theming/\nnext: Icons\nnextLink: customize/icons/\n---\n\nSince the Tailwind v4 update the default and recommended way of managing and using colors is with native CSS variables. The color variables from Tailwind CSS can be used to set colors for text elements, borders, backgrounds, focus rings, and more.\n\n## Default color palette\n\nThe Flowbite UI library has a carefully selected color pallette to meet aesthetic and accessibility demands and here's a list of the default colors that are available in our design system and the UI library.\n\n
\n
\n
\n
\n
\n
Gray
\n
colors.coolGray
\n
\n
\n
\n
\n \n
\n
50
\n
#F9FAFB
\n
\n
\n
\n \n
\n
100
\n
#F3F4F6
\n
\n
\n
\n \n
\n
200
\n
#E5E7EB
\n
\n
\n
\n \n
\n
300
\n
#D1D5DB
\n
\n
\n
\n \n
\n
400
\n
#9CA3AF
\n
\n
\n
\n \n
\n
500
\n
#6B7280
\n
\n
\n
\n \n
\n
600
\n
#4B5563
\n
\n
\n
\n \n
\n
700
\n
#374151
\n
\n
\n
\n \n
\n
800
\n
#1F2937
\n
\n
\n
\n \n
\n
900
\n
#111827
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Red
\n
colors.red
\n
\n
\n
\n
\n \n
\n
50
\n
#FDF2F2
\n
\n
\n
\n \n
\n
100
\n
#FDE8E8
\n
\n
\n
\n \n
\n
200
\n
#FBD5D5
\n
\n
\n
\n \n
\n
300
\n
#F8B4B4
\n
\n
\n
\n \n
\n
400
\n
#F98080
\n
\n
\n
\n \n
\n
500
\n
#F05252
\n
\n
\n
\n \n
\n
600
\n
#E02424
\n
\n
\n
\n \n
\n
700
\n
#C81E1E
\n
\n
\n
\n \n
\n
800
\n
#9B1C1C
\n
\n
\n
\n \n
\n
900
\n
#771D1D
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Yellow
\n
colors.amber
\n
\n
\n
\n
\n \n
\n
50
\n
#FDFDEA
\n
\n
\n
\n \n
\n
100
\n
#FDF6B2
\n
\n
\n
\n \n
\n
200
\n
#FCE96A
\n
\n
\n
\n \n
\n
300
\n
#FACA15
\n
\n
\n
\n \n
\n
400
\n
#E3A008
\n
\n
\n
\n \n
\n
500
\n
#C27803
\n
\n
\n
\n \n
\n
600
\n
#9F580A
\n
\n
\n
\n \n
\n
700
\n
#8E4B10
\n
\n
\n
\n \n
\n
800
\n
#723B13
\n
\n
\n
\n \n
\n
900
\n
#633112
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Green
\n
colors.emerald
\n
\n
\n
\n
\n \n
\n
50
\n
#F3FAF7
\n
\n
\n
\n \n
\n
100
\n
#DEF7EC
\n
\n
\n
\n \n
\n
200
\n
#BCF0DA
\n
\n
\n
\n \n
\n
300
\n
#84E1BC
\n
\n
\n
\n \n
\n
400
\n
#31C48D
\n
\n
\n
\n \n
\n
500
\n
#0E9F6E
\n
\n
\n
\n \n
\n
600
\n
#057A55
\n
\n
\n
\n \n
\n
700
\n
#046C4E
\n
\n
\n
\n \n
\n
800
\n
#03543F
\n
\n
\n
\n \n
\n
900
\n
#014737
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Blue
\n
colors.blue
\n
\n
\n
\n
\n \n
\n
50
\n
#EBF5FF
\n
\n
\n
\n \n
\n
100
\n
#E1EFFE
\n
\n
\n
\n \n
\n
200
\n
#C3DDFD
\n
\n
\n
\n \n
\n
300
\n
#A4CAFE
\n
\n
\n
\n \n
\n
400
\n
#76A9FA
\n
\n
\n
\n \n
\n
500
\n
#3F83F8
\n
\n
\n
\n \n
\n
600
\n
#1C64F2
\n
\n
\n
\n \n
\n
700
\n
#1A56DB
\n
\n
\n
\n \n
\n
800
\n
#1E429F
\n
\n
\n
\n \n
\n
900
\n
#233876
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Indigo
\n
colors.indigo
\n
\n
\n
\n
\n \n
\n
50
\n
#F0F5FF
\n
\n
\n
\n \n
\n
100
\n
#E5EDFF
\n
\n
\n
\n \n
\n
200
\n
#CDDBFE
\n
\n
\n
\n \n
\n
300
\n
#B4C6FC
\n
\n
\n
\n \n
\n
400
\n
#8DA2FB
\n
\n
\n
\n \n
\n
500
\n
#6875F5
\n
\n
\n
\n \n
\n
600
\n
#5850EC
\n
\n
\n
\n \n
\n
700
\n
#5145CD
\n
\n
\n
\n \n
\n
800
\n
#42389D
\n
\n
\n
\n \n
\n
900
\n
#362F78
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Purple
\n
colors.violet
\n
\n
\n
\n
\n \n
\n
50
\n
#F6F5FF
\n
\n
\n
\n \n
\n
100
\n
#EDEBFE
\n
\n
\n
\n \n
\n
200
\n
#DCD7FE
\n
\n
\n
\n \n
\n
300
\n
#CABFFD
\n
\n
\n
\n \n
\n
400
\n
#AC94FA
\n
\n
\n
\n \n
\n
500
\n
#9061F9
\n
\n
\n
\n \n
\n
600
\n
#7E3AF2
\n
\n
\n
\n \n
\n
700
\n
#6C2BD9
\n
\n
\n
\n \n
\n
800
\n
#5521B5
\n
\n
\n
\n \n
\n
900
\n
#4A1D96
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Pink
\n
colors.pink
\n
\n
\n
\n
\n \n
\n
50
\n
#FDF2F8
\n
\n
\n
\n \n
\n
100
\n
#FCE8F3
\n
\n
\n
\n \n
\n
200
\n
#FAD1E8
\n
\n
\n
\n \n
\n
300
\n
#F8B4D9
\n
\n
\n
\n \n
\n
400
\n
#F17EB8
\n
\n
\n
\n \n
\n
500
\n
#E74694
\n
\n
\n
\n \n
\n
600
\n
#D61F69
\n
\n
\n
\n \n
\n
700
\n
#BF125D
\n
\n
\n
\n \n
\n
800
\n
#99154B
\n
\n
\n
\n \n
\n
900
\n
#751A3D
\n
\n
\n
\n
\n
\n
\n\n## Customize colors\n\nIf you'd like to customize the current colors or introduce new ones you can do so by creating new color variables `--color-{name}` and this color will be available for all text, background and border colors:\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n/* input.css file */\n\n@import \"tailwindcss\";\n\n@plugin \"flowbite/plugin\";\n\n@source \"../node_modules/flowbite\";\n\n@theme {\n /* main text color */\n --color-body: var(--color-stone-600);\n --color-body-subtle: var(--color-stone-500);\n\n /* text heading colors */\n --color-heading: var(--color-stone-900);\n\n /* used for custom brand colors */\n --color-fg-brand-subtle: var(--color-stone-200);\n --color-fg-brand: var(--color-stone-950);\n --color-fg-brand-strong: var(--color-stone-900);\n}\n{{< /code >}}"
},
{
"path": "content/customize/configuration.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Configuration - Flowbite\ndescription: Learn how to customize the default Flowbite and Tailwind CSS options and styles\ngroup: customize\ntoc: true\n\nprevious: MCP UI\npreviousLink: getting-started/mcp-ui/\nnext: Variables\nnextLink: customize/variables/\n---\n\nSince 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.\n\nBefore continuing, please make sure that you have installed both Flowbite and the latest version of Tailwind.\n\n## Getting started\n\nYou 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.\n\nHere'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:\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n@import \"tailwindcss\";\n\n@plugin \"flowbite/plugin\";\n@source \"../node_modules/flowbite\";\n\n@custom-variant dark (&:where(.dark, .dark *));\n\n@theme {\n /* main text color */\n --color-body: var(--color-stone-600);\n --color-body-subtle: var(--color-stone-500);\n\n /* text heading colors */\n --color-heading: var(--color-stone-900);\n\n /* used for custom brand colors */\n --color-fg-brand-subtle: var(--color-stone-200);\n --color-fg-brand: var(--color-stone-950);\n --color-fg-brand-strong: var(--color-stone-900);\n \n --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';\n --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';\n --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';\n}\n{{< /code >}}\n\nUsing this example is a good starting point for any project created using Flowbite and Tailwind CSS.\n\n## Theming variables\n\nYou can customize colors, fonts, spacings, and other styles using native variables in your main CSS file.\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n/* input.css file */\n@import \"tailwindcss\";\n\n@plugin \"flowbite/plugin\";\n@source \"../node_modules/flowbite\";\n\n@theme {\n /* main text color */\n --color-body: var(--color-stone-600);\n --color-body-subtle: var(--color-stone-500);\n\n /* text heading colors */\n --color-heading: var(--color-stone-900);\n\n /* used for custom brand colors */\n --color-fg-brand-subtle: var(--color-stone-200);\n --color-fg-brand: var(--color-stone-950);\n --color-fg-brand-strong: var(--color-stone-900);\n\n --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';\n --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';\n --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';\n\n --spacing-custom: 10px;\n\n --breakpoint-xs: 30rem;\n --breakpoint-2xl: 100rem;\n --breakpoint-3xl: 120rem;\n}\n{{< /code >}}\n\nThe example above adds a new color palette, fonts, a custom spacing variable and new media breakpoints.\n\nAll of these styles will be propagated to the utility classes provided by Tailwind CSS.\n\n## Custom utilities\n\nYou can add custom utilities by using the `@utility` directive in your CSS file.\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n@utility custom-url {\n color: --color-primary-600;\n text-decoration: underline;\n}\n{{< /code >}}\n\nNow you can use the `custom-url` class to add an underline and primary color to the target element.\n\n## Custom variants\n\nUse the `@variant` direct in native CSS to target states such as hover, focus, dark mode, and more.\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n.element {\n text-decoration: underline;\n\n @variant hover {\n text-decoration: no-underline;\n }\n}\n{{< /code >}}\n\n## Import plugins\n\nYou can import third party plugins using the `@plugin` directive in your CSS file.\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n@import \"tailwindcss\";\n\n@plugin \"flowbite/plugin\";\n@plugin \"flowbite-typography\";\n{{< /code >}}\n\n## Source\n\nTailwind CSS automatically detects source files, but ignores a few folders such as your `node_modules`.\n\nHere's how you can explicictly set the source files in your main CSS file:\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n@import \"tailwindcss\";\n\n@source \"../node_modules/flowbite\";\n{{< /code >}}\n\nThis will scan the Flowbite folder inside your installed packages for Tailwind classes.\n\n## Config\n\nUse the `@config` directive to import old `tailwind.config.js` files to copy your options.\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n@import \"tailwindcss\";\n\n@config \"../tailwind.config.js\";\n{{< /code >}}\n\n## Prefixes\n\nYou can use the `prefix` object to set a prefix for all of the classes generated by Flowbite and Tailwind CSS.\n\nFor example, you can add the `fb-` prefix like so:\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n@import \"tailwindcss\" prefix(fb);\n{{< /code >}}\n\nDoing so it will add the prefix to all of the classes.\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n.fb-text-left {\n text-align: left;\n}\n.fb-text-center {\n text-align: center;\n}\n.fb-text-right {\n text-align: right;\n}\n/* etc. */\n{{< /code >}}\n\n## Reference\n\nIf you'd like to browse the full list of configurable options, please visit the official Tailwind CSS configuration."
},
{
"path": "content/customize/dark-mode.md",
"content": "---\nlayout: docs\ntitle: Tailwind CSS Dark Mode - Flowbite\ndescription: Learn how to configure and build a dark mode switcher for Tailwind CSS using Flowbite and start developing with the components from the library\ngroup: customize\ntoc: true\n\nprevious: Variables\npreviousLink: customize/variables/\nnext: Theming\nnextLink: customize/theming/\n---\n\nOffering 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.\n\nLearn 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.\n\n## Enable dark mode\n\nAll 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.\n\n{{< code lang=\"css\" file=\"main.css\" icon=\"file\" >}}\n/* input.css */\n@custom-variant dark (&:where(.dark, .dark *));\n{{< /code >}}\n\nIf 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.\n\nAlternatively, 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.\n\n## Dark mode switcher\n\nIf 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.\n\n1. Toggle dark mode by checking user preference in the `` tag of your HTML:\n\n{{< code lang=\"html\" file=\"index.html\" icon=\"file\" >}}\n\n{{< /code >}}\n\nThis 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.\n\n2. Create a `\n\n```\n\nIf 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.\n\n```javascript\nconst $prevButton = document.getElementById('data-carousel-prev');\nconst $nextButton = document.getElementById('data-carousel-next');\n\n$prevButton.addEventListener('click', () => {\n carousel.prev();\n});\n\n$nextButton.addEventListener('click', () => {\n carousel.next();\n});\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Carousel } from 'flowbite';\nimport type {\n CarouselItem,\n CarouselOptions,\n CarouselInterface,\n} from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\nconst carouselElement: HTMLElement = document.getElementById('carousel-example');\n\nconst items: CarouselItem[] = [\n {\n position: 0,\n el: document.getElementById('carousel-item-1'),\n },\n {\n position: 1,\n el: document.getElementById('carousel-item-2'),\n },\n {\n position: 2,\n el: document.getElementById('carousel-item-3'),\n },\n {\n position: 3,\n el: document.getElementById('carousel-item-4'),\n },\n];\n\n// object options with default values\nconst options: CarouselOptions = {\n defaultPosition: 1,\n interval: 3000,\n\n indicators: {\n activeClasses: 'bg-white dark:bg-gray-800',\n inactiveClasses:\n 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',\n items: [\n {\n position: 0,\n el: document.getElementById('carousel-indicator-1'),\n },\n {\n position: 1,\n el: document.getElementById('carousel-indicator-2'),\n },\n {\n position: 2,\n el: document.getElementById('carousel-indicator-3'),\n },\n {\n position: 3,\n el: document.getElementById('carousel-indicator-4'),\n },\n ],\n },\n\n // callback functions\n onNext: () => {\n console.log('next slider item is shown');\n },\n onPrev: () => {\n console.log('previous slider item is shown');\n },\n onChange: () => {\n console.log('new slider item has been shown');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'carousel-example',\n override: true\n};\n\nconst carousel: CarouselInterface = new Carousel(carouselElement, items, options, instanceOptions);\n\ncarousel.cycle();\n\n// set event listeners for prev and next buttons\nconst $prevButton = document.getElementById('data-carousel-prev');\nconst $nextButton = document.getElementById('data-carousel-next');\n\n$prevButton.addEventListener('click', () => {\n carousel.prev();\n});\n\n$nextButton.addEventListener('click', () => {\n carousel.next();\n});\n```\n\n#### Chat bubble\n\nThe 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.\n\nThe 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.\n\n##### Default chat bubble\n\nUse this example to show a simple chat bubble with a text message, user profile and a timestamp.\n\n{{< example id=\"chat-bubble-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
That's awesome. I think our users will really appreciate the improvements.
\n{{< /example >}}\n\n##### Voice note message\n\nThis example can be used to show a voice note message with control buttons and a dropdown menu.\n\n{{< example id=\"voice-note-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n{{< /example >}}\n\n##### File attachment\n\nUse this example to send a file attachment inside a chat bubble with the ability to download the file.\n\n{{< example id=\"file-attachement-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n{{< /example >}}\n\n##### Image attachment\n\nThis example can be used to show an image attachment with a download button when hovering over.\n\n{{< example id=\"image-attachment-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"480\" >}}\n
\n{{< /example >}}\n\n##### Image gallery\n\nUse this example to show an image gallery based on a grid layout with the ability to download images.\n\n{{< example id=\"image-gallery-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"480\" >}}\n
\n{{< /example >}}\n\n##### URL preview sharing\n\nUse this example to show a OG preview of the URL that is being shared inside the chat bubble.\n\n{{< example id=\"url-sharing-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"520\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
Check out this open-source UI component library based on Tailwind CSS:
\n{{< /example >}}\n\n##### Outline chat bubble\n\nUse this example to show a text message with the user profile and timestamp outside the chat bubble.\n\n{{< example id=\"outline-chat-bubble-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"370\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
That's awesome. I think our users will really appreciate the improvements.
\n{{< /example >}}\n\n##### Outline voice note\n\nThis example can be used to show a voice note with the user profile and timestamp outside the chat bubble.\n\n{{< example id=\"outline-voice-note-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"370\" >}}\n
\n{{< /example >}}\n\n##### Outline file attachment\n\nUse this example to show a file attachment with the user profile and timestamp outside the chat bubble.\n\n{{< example id=\"outline-file-attachment-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n{{< /example >}}\n\n##### Outline image attachment\n\nThis example can be used to send an image attachment with the user profile outside the chat bubble.\n\n{{< example id=\"outline-image-attachment-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"460\" >}}\n
\n{{< /example >}}\n\n##### Outline image gallery\n\nUse this example to show an image gallery with the user profile and timestamp outside the chat bubble.\n\n{{< example id=\"outline-image-gallery-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"480\" >}}\n
\n{{< /example >}}\n\n##### Outline URL preview sharing\n\nUse this example to show a URL preview with the user profile and timestamp outside the chat bubble.\n\n{{< example id=\"outline-url-sharing-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"520\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
Check out this open-source UI component library based on Tailwind CSS:
\n{{< /example >}}\n\n##### Clean chat bubble\n\nUse this example to show a text message with the user profile and timestamp with a transparent background.\n\n{{< example id=\"clean-chat-bubble-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"180\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
That's awesome. I think our users will really appreciate the improvements.
\n Delivered\n
\n
\n{{< /example >}}\n\n##### Clean voice note\n\nThis example can be used to show a voice note with a transparent background.\n\n{{< example id=\"clean-voice-note-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"180\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
\n \n \n 3:42\n
\n
\n Delivered\n
\n
\n{{< /example >}}\n\n##### Clean file attachment\n\nUse this example to show a file attachment and a download button with a transparent background.\n\n{{< example id=\"clean-file-attachment-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"200\" >}}\n
\n{{< /example >}}\n\n##### Clean image attachment\n\nThis example can be used to show an image and a download button with a transparent background.\n\n{{< example id=\"clean-image-attachment-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"380\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
This is the new office <3
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n Delivered\n
\n
\n{{< /example >}}\n\n##### Clean image gallery\n\nUse this example to show an image gallery with a transparent background as a chat message.\n\n{{< example id=\"clean-image-gallery-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"390\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
\n
This is the new office <3
\n
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n
\n \n
\n Download image\n \n
\n
\n \n
\n
\n \n \n
\n
\n
\n
\n Delivered\n \n
\n
\n
\n{{< /example >}}\n\n##### Clean URL preview sharing\n\nThis example can be used to show a URL preview with a transparent background.\n\n{{< example id=\"clean-url-sharing-example\" class=\"flex justify-center\" github=\"components/chat-bubble.md\" show_dark=true iframeHeight=\"450\" >}}\n
\n \n
\n
\n Bonnie Green\n 11:46\n
\n
Check out this open-source UI component library based on Tailwind CSS:
\n{{< /example >}}\n\n#### Clipboard\n\nThe 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.\n\nUse 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. \n\nThese 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.\n\n##### Default copy to clipboard\n\nMake 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).\n\nUse 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.\n\n{{< example id=\"clipboard-example\" class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install');\n const $defaultMessage = document.getElementById('default-message');\n const $successMessage = document.getElementById('success-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n $defaultMessage.classList.add('hidden');\n $successMessage.classList.remove('hidden');\n\n // reset to default state\n setTimeout(() => {\n $defaultMessage.classList.remove('hidden');\n $successMessage.classList.add('hidden');\n }, 2000);\n });\n})\n` >}}\n
\n \n \n \n
\n{{< /example >}}\n\n##### Input with copy button\n\nThis 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.\n\nIf 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.\n\n{{< example id=\"clipboard-button-input-example\" class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button');\n\n const $defaultIcon = document.getElementById('default-icon');\n const $successIcon = document.getElementById('success-icon');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message');\n const $successTooltipMessage = document.getElementById('success-tooltip-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n
\n \n \n \n
\n Copy to clipboard\n Copied!\n \n
\n
\n
\n{{< /example >}}\n\n##### Copy button with text\n\nUse 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.\n\n{{< 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=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-text');\n\n const $defaultMessage = document.getElementById('default-message');\n const $successMessage = document.getElementById('success-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultMessage.classList.add('hidden');\n $successMessage.classList.remove('hidden');\n }\n\n const resetToDefault = () => {\n $defaultMessage.classList.remove('hidden');\n $successMessage.classList.add('hidden');\n }\n})\n` >}}\n
\n
\n \n \n \n
\n
\n{{< /example >}}\n\n##### Input group with copy\n\nThis 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.\n\n{{< example id=\"clipboard-button-group-example\" class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'website-url');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-website-url');\n\n const $defaultIcon = document.getElementById('default-icon');\n const $successIcon = document.getElementById('success-icon');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message');\n const $successTooltipMessage = document.getElementById('success-tooltip-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n
\n \n
\n
\n URL\n
\n \n
\n \n
\n Copy link\n Copied!\n \n
\n
\n
Security certificate is required for approval
\n
\n{{< /example >}}\n\n##### URL shortener input group\n\nUse 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.\n\n{{< example id=\"clipboard-url-shortener-example\" class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"280\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'url-shortener');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-url-shortener');\n\n const $defaultIcon = document.getElementById('default-icon');\n const $successIcon = document.getElementById('success-icon');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message');\n const $successTooltipMessage = document.getElementById('success-tooltip-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n
\n \n
\n
\n \n
\n \n
\n \n
\n Copy link\n Copied!\n \n
\n
\n
Make sure that your URL is valid
\n
\n{{< /example >}}\n\n##### Copy source code block\n\nThis 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.\n\nYou 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). \n\nYou 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.\n\n{{< example id=\"clipboard-source-block\" class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"480\" javascript=`\nwindow.addEventListener('load', function () {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'code-block');\n\n const $defaultMessage = document.getElementById('default-message');\n const $successMessage = document.getElementById('success-message');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultMessage.classList.add('hidden');\n $successMessage.classList.remove('hidden');\n }\n\n const resetToDefault = () => {\n $defaultMessage.classList.remove('hidden');\n $successMessage.classList.add('hidden');\n }\n})\n` >}}\n
\n{{< /example >}}\n\n##### Copy contact details\n\nThis 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.\n\nMake 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.\n\n{{< example id=\"contact-details-clipboard\" class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"380\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'contact-details');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-contact-details');\n\n const $defaultIcon = document.getElementById('default-icon-contact-details');\n const $successIcon = document.getElementById('success-icon-contact-details');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message-contact-details');\n const $successTooltipMessage = document.getElementById('success-tooltip-message-contact-details');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n
\n
Contact details
\n \n
\n Name \n Email \n Phone Number\n
\n
\n Bonnie Green \n name@flowbite.com \n + 12 345 67890\n
\n \n
\n Copy to clipboard\n Copied!\n \n
\n \n
\n{{< /example >}}\n\n##### Copy button with modal\n\nUse 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.\n\n{{< example id=\"copy-to-clipboard-modal\" class=\"flex justify-center items-center h-full\" github=\"components/clipboard.md\" show_dark=true iframeHeight=\"580\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'course-url');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-course-url');\n\n const $defaultIcon = document.getElementById('default-icon-course-url');\n const $successIcon = document.getElementById('success-icon-course-url');\n\n const $defaultTooltipMessage = document.getElementById('default-tooltip-message-course-url');\n const $successTooltipMessage = document.getElementById('success-tooltip-message-course-url');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n})\n` >}}\n\n\n\n
\n
\n \n
\n \n
\n
\n Share course\n
\n \n
\n \n
\n \n
\n \n \n
\n Copy to clipboard\n Copied!\n \n
\n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n##### JavaScript behaviour\n\nUse 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.\n\n###### Object parameters\n\nUse 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the trigger element (ie. a button or text) that will trigger the copy to clipboard event when being clicked.\n
\n
\n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the target element where the text that will be copied to the clipboard is located (ie. an input field, code block, address tag).\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Set these options to set the the content type, HTML decoder and callback function for the copy to clipboard event.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n contentType\n
\n
\n String\n
\n
\n Set the source of the text that will be copied: input (default), innerHTML or textContent.\n
\n
\n
\n
\n htmlEntities\n
\n
\n String\n
\n
\n Set this option to true if you want to decode the HTML entities for code blocks. Default is false.\n
\n
\n
\n
\n onCopy\n
\n
\n Function\n
\n
\n Set a callback function when the text has been copied to the clipboard.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse 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.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n getTargetValue()\n
\n
\n Get the value of the target element (ie. input field, code block, address tag).\n
\n
\n
\n
\n copy()\n
\n
\n Use this method to copy the text from the target element to the clipboard.\n
\n
\n
\n
\n decodeHTML()\n
\n
\n Use this method to decode the HTML entities from the target element.\n
\n
\n
\n
\n updateOnCopyCallback(callback)\n
\n
\n Use this method to update the callback function that is called when the text has been copied to the clipboard.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck 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.\n\n```javascript\n// set the trigger element such as a button or text field\nconst $triggerEl = document.getElementById('copy-clipboard-button');\n\n// set the trigger element such as an input field or code block\nconst $targetEl = document.getElementById('copy-text');\n\n// optional options with default values and callback functions\nconst options = {\n contentType: 'input',\n htmlEntities: false, // infinite\n onCopy: () => {\n console.log('text copied successfully!');\n }\n};\n\nconst instanceOptions = {\n id: 'copy-clipboard-example',\n override: true\n};\n```\n\nNext step is to create a new instance of a CopyClipboard object using the parameters we have set above.\n\n```javascript\nimport { CopyClipboard } from 'flowbite';\n\n/*\n * $triggerEl: required\n * $targetEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst clipboard = new CopyClipboard($triggerEl, $targetEl, options, instanceOptions);\n```\n\nSet the event listeners on the button to copy the text from the input field:\n\n```javascript\n$triggerEl.addEventListener('click', () => {\n clipboard.copy();\n});\n```\n\nNow you can programmatically call the methods of the CopyClipboard component:\n\n```javascript\n// get the value, inner HTML or text content of the target element\nclipboard.getTargetValue();\n\n// copy the target element text value\nclipboard.copy();\n\n// update the on copy function callback\nclipboard.updateOnCopyCallback(() => {\n // do something when the text has been copied to the clipboard\n console.log('updated on copy callback success message');\n});\n```\n\n###### HTML Markup\n\nHere is an example of the HTML markup that you can use for the JavaScript example above.\n\n```html\n
\n \n \n \n
\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the CopyClipboard object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { CopyClipboard } from 'flowbite';\nimport type { CopyClipboardOptions, CopyClipboardInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the trigger element which will be clicked (ie. a button or text)\nconst $triggerEl: HTMLElement = document.getElementById('copy-clipboard-button') as HTMLElement;\n\n// set the target element where the text will be copied from (ie. input field, code block)\nconst $targetEl: HTMLInputElement = document.getElementById('copy-text') as HTMLInputElement;\n\n// optional options with default values and callback functions\nconst options: CopyClipboardOptions = {\n contentType: 'input',\n htmlEntities: false, // infinite\n onCopy: () => {\n console.log('text copied successfully!');\n }\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'copy-clipboard-example',\n override: true\n};\n\n/*\n * $triggerEl: required\n * $targetEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst clipboard: CopyClipboardInterface = new CopyClipboard(\n $triggerEl,\n $targetEl,\n options,\n instanceOptions\n);\n\n// copy the value of the target element\nclipboard.copy();\n```\n\n#### Datepicker\n\nThe 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.\n\n##### Getting started\n\nIf 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.\n\nFollow the [quickstart guide]({{< ref \"getting-started/quickstart\" >}}) and then include the following JavaScript file:\n\n```html\n\n```\n\nAlternatively you can also use CDN to include the datepicker JavaScript.\n\n```html\n\n```\n\nAlso make sure that you add the source files for Tailwind in your main CSS file:\n\n```css\n@import \"tailwindcss\";\n\n@source \"../node_modules/flowbite-datepicker\";\n```\n\nIf 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.\n\n##### Datepicker example\n\nUse 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.\n\n{{< example id=\"default-datepicker-example\" class=\"flex justify-center dark:bg-gray-900\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"500\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n##### Inline datepicker\n\nUse 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`.\n\n{{< example id=\"datepicker-inline-example\" class=\"flex justify-center dark:bg-gray-900\" github=\"components/datepicker.md\" show_dark=true initDatepicker=true >}}\n\n{{< /example >}}\n\n##### Date range picker\n\nUse the `date-rangepicker` data attribute and the following markup to initialize two datepickers as a range.\n\n{{< example id=\"datepicker-range-example\" class=\"flex justify-center dark:bg-gray-900\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n
\n \n
\n \n
\n to\n
\n
\n \n
\n \n
\n
\n{{< /example >}}\n\n##### Options\n\nLearn 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.\n\n###### Autohide\n\nUse the `datepicker-autohide` data attribute to make the datepicker disappear right after selecting a date.\n\n{{< example id=\"datepicker-autohide-example\" class=\"flex justify-center dark:bg-gray-900\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n###### Action buttons\n\nBy adding the `datepicker-buttons` data attribute you will enable the `today` and `clear` buttons:\n\n- clicking on the `today` button will browse back to the current day/month/year\n- clicking on the `clear` button will reset all selections\n\nIf you want the button to additionally select today's date, add `datepicker-autoselect-today` data attribute.\n\n{{< example id=\"datepicker-action-example\" class=\"flex justify-center dark:bg-gray-900\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"530\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n###### Date format\n\nIf 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.\n\n{{< 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 >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n###### Max and min dates\n\nUse the `datepicker-min-date={format}` and `datepicker-max-date={format}` to set the minimum and maximum dates that can be selected inside the datepicker.\n\n{{< 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 >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n###### Orientation\n\nYou 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.\n\n{{< example id=\"datepicker-orientation-example\" class=\"flex justify-center dark:bg-gray-900\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"480\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n###### Title\n\nYou can also add a title to the datepicker by using the `datepicker-title=\"{title}\"` data attribute.\n\n{{< example id=\"datepicker-title-example\" class=\"flex justify-center dark:bg-gray-900\" github=\"components/datepicker.md\" show_dark=true iframeHeight=\"530\" initDatepicker=true >}}\n
\n
\n \n
\n \n
\n{{< /example >}}\n\n###### Custom colors\n\nYou can set the `primary` color class which is by default set to blue to add your own colors.\n\n###### Language (i18n)\n\nWe are working on the API to provide language support for the datepicker. \n\nUntil then, please refer to this [solution from GitHub](https://github.com/themesberg/flowbite/issues/32#issuecomment-1420422922).\n\n##### Timepicker\n\nUse 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.\n\n{{< example id=\"timepicker-default-example\" github=\"components/timepicker.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Dark mode\n\nIf 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.\n\n##### JavaScript Behaviour\n\nUse 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.\n\n###### Object parameters\n\nUse 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n datepickerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the main HTML element that will be rendered for the datepicker. It can be an input element or a `div` for inline rendering.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set custom datepicker options such as the default date, minimum and maximum values, action buttons and callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n rangePicker\n
\n
\n Boolean\n
\n
\n If set to true then the datepicker will be converted to a date range picker. By default it's false.\n
\n
\n
\n
\n format\n
\n
\n String\n
\n
\n Use this option to set a custom format for the datepicker. By default it's `mm/dd/yyyy`.\n
\n
\n
\n
\n maxDate\n
\n
\n String\n
\n
\n Use this option to set the maximum selectable date of the datepicker component.\n
\n
\n
\n
\n minDate\n
\n
\n String\n
\n
\n Use this option to set the minimum selectable date of the datepicker component.\n
\n
\n
\n
\n orientation\n
\n
\n String\n
\n
\n Set the orientation of the datepicker component when it's not inline. It can be top, bottom, left, or right.\n
\n
\n
\n
\n buttons\n
\n
\n Boolean\n
\n
\n If set to true then the \"today\" and \"clear\" action buttons will be shown that lets you select today's date or clear selections.\n
\n
\n
\n
\n autoSelectToday\n
\n
\n Integer\n
\n
\n If set to 1 then it will automatically have today's date preselected.\n
\n
\n
\n
\n title\n
\n
\n String\n
\n
\n Set a custom title for the datepicker component. By default it's null.\n
\n
\n \n \n
\n
\n\n###### Methods\n\nUse the following methods of the Datepicker object to programmatically manipulate the behaviour.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n getDate()\n
\n
\n Use this method to get the currenctly select date from the datepicker.\n
\n
\n
\n
\n setDate()\n
\n
\n Use this method to set the date value of the datepicker component.\n
\n
\n
\n
\n show()\n
\n
\n Use this function to programatically show the datepicker component.\n
\n
\n
\n
\n hide()\n
\n
\n Use this function to programatically hide the datepicker component.\n
\n
\n
\n
\n getDatepickerInstance()\n
\n
\n Use this method to get the parent datepicker instance with the extended collection of methods and options.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a callback function whenever the datepicker component has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a callback function whenever the datepicker component has been hidden.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck out the following examples to learn how to use a basic HTML markup together with the Flowbite Datepicker API JS.\n\nFirst 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.\n\n```javascript\n// set the target element of the input field\nconst $datepickerEl = document.getElementById('datepicker-custom');\n\n// optional options with default values and callback functions\nconst options = {\n defaultDatepickerId: null,\n autohide: false,\n format: 'mm/dd/yyyy',\n maxDate: null,\n minDate: null,\n orientation: 'bottom',\n buttons: false,\n autoSelectToday: false,\n title: null,\n rangePicker: false,\n onShow: () => {},\n onHide: () => {},\n};\n\nconst instanceOptions = {\n id: 'datepicker-custom-example',\n override: true\n};\n```\n\nNext step is to create a new instance of a Datepicker object using the parameters we have set above.\n\n```javascript\nimport { Datepicker } from 'flowbite';\n\n/*\n * $datepickerEl: required\n * options: optional\n */\nconst datepicker = new Datepicker($datepickerEl, options, instanceOptions);\n```\n\nUse the following methods to show and hide the datepicker, set or get the currently selected date and get access to the instance.\n\n```javascript\n// get the currently selected date (undefined if not selected)\ndatepicker.getDate();\n\n// set the date (or dates if date range picker)\ndatepicker.setDate('05/31/2024');\n\n// programatically show the datepicker\ndatepicker.show();\n\n// programatically hide the datepicker\ndatepicker.hide();\n\n// use this method to get the parent datepicker instance from https://mymth.github.io/vanillajs-datepicker/#/\ndatepicker.getDatepickerInstance();\n```\n\n###### HTML Markup\n\nHere is an example of the HTML markup that you can use for the JavaScript example above.\n\n```html\n
\n
\n \n
\n \n
\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Datepicker object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Datepicker } from 'flowbite';\nimport type { DatepickerOptions, DatepickerInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the target element of the input field or div\nconst $datepickerEl: HTMLInputElement = document.getElementById('datepicker-custom') as HTMLInputElement;\n\n// optional options with default values and callback functions\nconst options: DatepickerOptions = {\n defaultDatepickerId: null,\n autohide: false,\n format: 'mm/dd/yyyy',\n maxDate: null,\n minDate: null,\n orientation: 'bottom',\n buttons: false,\n autoSelectToday: 0,\n title: null,\n rangePicker: false,\n onShow: () => {},\n onHide: () => {},\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'datepicker-custom-example',\n override: true\n};\n\n/*\n * $datepickerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst datepicker: DatepickerInterface = new Datepicker(\n $datepickerEl,\n options,\n instanceOptions\n);\n\n// get the currently selected date (undefined if not selected)\ndatepicker.getDate();\n\n// set the date (or dates if date range picker)\ndatepicker.setDate('05/31/2024');\n\n// programatically show the datepicker\ndatepicker.show();\n\n// programatically hide the datepicker\ndatepicker.hide();\n\n// use this method to get the parent datepicker instance from https://mymth.github.io/vanillajs-datepicker/#/\ndatepicker.getDatepickerInstance();\n```\n\n###### Parent library\n\nIf 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):\n\n```bash\nnpm install flowbite-datepicker --save\n```\n\nAfter you've installed the NPM library, you will need to import the `Datepicker` module:\n\n```javascript\nimport Datepicker from 'flowbite-datepicker';\n```\n\nInitialize a new element using the `Datepicker` constructor and optionally add your own options based on your needs:\n\n```javascript\nconst datepickerEl = document.getElementById('datepickerId');\nnew Datepicker(datepickerEl, {\n // options\n}); \n```\n\nIf you want to use the **Tailwind Date Range Picker** you have to import the `DateRangePicker` module:\n\n```javascript\nimport DateRangePicker from 'flowbite-datepicker';\n```\n\nThen in the same fashion you can initialize a date range picker component by using the `DateRangePicker` constructor:\n\n```javascript\nconst dateRangePickerEl = document.getElementById('dateRangePickerId');\nnew DateRangePicker(dateRangePickerEl, {\n // options\n}); \n```\n\n###### React support\n\nOne of our community members built the React version of the Flowbite Datepicker and you can learn more about it on this repository on GitHub.\n\n###### Turbo load support \n\nIn 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.\n\nFollow the [quickstart guide]({{< ref \"getting-started/rails\" >}}) and then include the following JavaScript file:\n\n```bash\npin \"flowbite\", to: \"https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.turbo.min.js\"\n```\n\nDon't forget to also import it inside your `application.js` file:\n\n```javascript\nimport \"flowbite/dist/flowbite.turbo.js\";\n```\n\n#### Device mockups\n\nThe 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.\n\nThis 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.\n\nYou can choose from multiple examples of mockups including phone, tablet, laptop, and even desktop devices with iOS or Android support.\n\n##### Default mockup\n\nUse 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.\n\n{{< example id=\"default-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n##### iPhone 12 mockup (iOS)\n\nUse this example to clearly show that the preview of your application is being used on an iPhone with iOS.\n\n{{< example id=\"iphone-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n##### Google Pixel (Android)\n\nUse this alternative phone mockup example if you want to feature previews for android gadgets.\n\n{{< example id=\"android-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n##### Tablet mockup\n\nThis component can be used to show an application preview inside of a responsive tablet mockup.\n\n{{< example id=\"tablet-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n##### Laptop mockup\n\nThis example can be used to show a screenshot of your application inside a laptop mockup.\n\n{{< example id=\"laptop-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n
\n \n
\n{{< /example >}}\n\n##### Desktop mockup\n\nUse this example to show a preview of your application inside a desktop device such as an iMac.\n\n{{< example id=\"desktop-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n\n\n{{< /example >}}\n\n##### Smartwatch mockup\n\nThis component can be used to showcase applications built for smartwatches.\n\n{{< example id=\"smartwatch-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n\n
\n \n \n
\n \n \n
\n
\n\n{{< /example >}}\n\n##### Mockup colors\n\nYou can easily update the color of the mockup by changing the background color with Tailwind CSS.\n\n{{< example id=\"colors-mockup\" github=\"components/device-mockups.md\" show_dark=true >}}\n
\n \n \n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n#### Drawer\n\nUse 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.\n\nYou 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.\n\nTo enable interactivity via data attributes and the Drawer API you need to include [Flowbite's JavaScript file]({{< ref \"getting-started/quickstart\" >}}).\n\n##### Default drawer\n\nTo 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.\n\nThen 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:\n\n- `data-drawer-show=\"{id}\"` - show the drawer component\n- `data-drawer-hide=\"{id}\"` - hide the drawer component\n- `data-drawer-toggle=\"{id}\"` - toggle the visibility of the drawer component\n\nFor 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.\n\nYou 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.\n\n{{< example id=\"default-drawer-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
Info
\n \n \n
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.
\n{{< /example >}}\n\n##### Drawer navigation\n\nUse this example to show a navigational sidebar inside the drawer component.\n\n{{< example id=\"drawer-navigation-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n##### Contact form\n\nUse this example to show a contact form inside the drawer component.\n\n{{< example id=\"drawer-contact-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"840\" iframeMaxHeight=\"840\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n##### Form elements\n\nUse this example if you want to add form elements inside the drawer component including datepickers.\n\n{{< example id=\"drawer-form-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"840\" iframeMaxHeight=\"840\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
New event
\n \n \n
\n{{< /example >}}\n\n##### Placement\n\nUse 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\".\n\n###### Left drawer\n\nUse this example where you can position the drawer component on the left side of the page.\n\nTo span the full height of the page you'll have to add the `h-screen` class to the drawer component.\n\n{{< example id=\"drawer-placement-left-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
Left drawer
\n \n
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.
\n{{< /example >}}\n\n###### Right drawer\n\nUse this example to show the drawer component on the right side of the page.\n\nTo span the full height of the page you'll have to add the `h-screen` class to the drawer component.\n\n{{< example id=\"drawer-placement-right-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
Right drawer
\n \n
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.
\n{{< /example >}}\n\n###### Top drawer\n\nUse this example to show the drawer on the top side of the page.\n\n{{< example id=\"drawer-placement-top-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
Top drawer
\n \n
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.
\n{{< /example >}}\n\n###### Bottom drawer\n\nUse this example to show the drawer on the bottom side of the page.\n\n{{< example id=\"drawer-placement-bottom-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n
\n \n
\n\n\n
\n
Bottom drawer
\n \n
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.
\n{{< /example >}}\n\n##### Body scrolling\n\nBy 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.\n\n###### Disabled (default)\n\nThis is an example where the body scrolling behaviour is disabled when the drawer is visible.\n\n{{< example id=\"drawer-disable-body-scrolling-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n###### Enabled\n\nGet 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.\n\n{{< example id=\"drawer-body-scrolling-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n##### Backdrop\n\nThe 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.\n\nUse the `data-drawer-backdrop=\"{true|false}\"` data attribute where you can disable or enable the backdrop element.\n\n###### Enabled (default)\n\nUse this example to enable the backdrop element by default.\n\n{{< example id=\"drawer-backdrop-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n###### Disabled\n\nUse the `data-drawer-backdrop=\"false\"` data attribute to disable the backdrop element when the drawer is shown.\n\n{{< example id=\"drawer-disabled-backdrop-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n##### Swipeable edge\n\nThe 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.\n\nIn 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.\n\nUse 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]`.\n\n{{< example id=\"drawer-swipe-example\" github=\"components/drawer.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n
\n \n
\n\n\n
\n
\n \n
Add widget
\n
\n
\n
\n
\n \n
\n
Chart
\n
\n
\n
\n \n
\n
Table
\n
\n
\n
\n \n
\n
Ticket
\n
\n
\n
\n \n
\n
List
\n
\n
\n
\n \n
\n
Price
\n
\n
\n
\n \n
\n
Users
\n
\n
\n
\n \n
\n
Task
\n
\n
\n
\n \n
\n
Custom
\n
\n
\n
\n{{< /example >}}\n\n##### More examples\n\nFor more drawer component examples you can check out the following resources from Flowbite Blocks:\n\n- [CRUD read drawers](https://flowbite.com/blocks/application/crud-read-drawers/)\n- [CRUD create drawers](https://flowbite.com/blocks/application/crud-create-drawers/)\n- [CRUD update drawers](https://flowbite.com/blocks/application/crud-update-drawers/)\n- [Application shell layouts](https://flowbite.com/blocks/application/shells/)\n\n##### JavaScript behaviour\n\nThe 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.\n\n###### Object parameters\n\nInitialize a Drawer object with parameters such as the target element and the options object.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the main drawer element as a JavaScript object.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the default state of the drawer, placement, and other options.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse the following options for the Drawer object to set the placement, enable or disable the backdrop, enable or disable body scrolling, and more.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the drawer component relative to the document body by choosing one of the values from {top|right|bottom|left}.\n
\n
\n
\n
\n backdrop\n
\n
\n Boolean\n
\n
\n Enable or disable the backdrop element. Values can be true or false.\n
\n
\n
\n
\n bodyScrolling\n
\n
\n Boolean\n
\n
\n Enable or disable body scrolling behaviour when the drawer is active. Values can be true or false.\n
\n
\n
\n
\n edge\n
\n
\n Boolean\n
\n
\n Enable or disable the edge functionality by showing a small part of the drawer component even when inactive. Values can be true or false.\n
\n
\n
\n
\n edgeOffset\n
\n
\n String\n
\n
\n Set the offset height that should be shown when the drawer is inactive. Default value is bottom-[60px]\n
\n
\n
\n
\n backdropClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS utility classes to override the custom backdrop classes.\n
\n
\n
\n
\n onShow()\n
\n
\n Function\n
\n
\n Set a callback function when the drawer has been shown.\n
\n
\n
\n
\n onHide()\n
\n
\n Function\n
\n
\n Set a callback function when the drawer has been hidden.\n
\n
\n
\n
\n onToggle()\n
\n
\n Function\n
\n
\n Set a callback function when the drawer visibility has been toggled.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the following methods on the Drawer object to show, hide or check the visibility.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use the show function to show the drawer element.\n
\n
\n
\n
\n hide()\n
\n
\n Use the hide function to hide the drawer element.\n
\n
\n
\n
\n toggle()\n
\n
\n Use the toggle function to toggle the drawer element's visibility.\n
\n
\n
\n
\n isVisible()\n
\n
\n Use the isVisible function to check whether the element is visible or not.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Set a callback function when the drawer has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Set a callback function when the drawer has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Set a callback function when the drawer visibility has been toggled.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Drawer object.\n\nFirst 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.\n\n```javascript\n// set the drawer menu element\nconst $targetEl = document.getElementById('drawer-js-example');\n\n// options with default values\nconst options = {\n placement: 'right',\n backdrop: true,\n bodyScrolling: false,\n edge: false,\n edgeOffset: '',\n backdropClasses:\n 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',\n onHide: () => {\n console.log('drawer is hidden');\n },\n onShow: () => {\n console.log('drawer is shown');\n },\n onToggle: () => {\n console.log('drawer has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'drawer-js-example',\n override: true\n};\n```\n\nInitialize the Drawer positioning by creating a new object:\n\n```javascript\nimport { Drawer } from 'flowbite';\n\n/*\n * $targetEl (required)\n * options (optional)\n * instanceOptions (optional)\n */\nconst drawer = new Drawer($targetEl, options, instanceOptions);\n```\n\nUse the `show` and `hide` methods to show and hide the drawer component directly from JavaScript.\n\n```javascript\n// show the drawer\ndrawer.show();\n\n// hide the drawer\ndrawer.hide();\n```\n\nUse the `toggle` method to toggle the visibility of the drawer.\n\n```javascript\n// toggle the drawer\ndrawer.toggle();\n```\n\nUse the `isVisible` method to check the visibility of the drawer:\n\n```javascript\n// true or false\ndrawer.isVisible();\n```\n\n###### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n```html\n\n \n \n Info\n \n \n \n \n \n Close menu\n \n
\n Supercharge your hiring by taking advantage of our\n limited-time sale\n for Flowbite Docs + Job Board. Unlimited access to over 190K top-ranked\n candidates and the #1 design job board.\n
\n
\n Learn more\n Get access\n \n \n
\n\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Drawer (off-canvas) class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Drawer } from 'flowbite';\nimport type { DrawerOptions, DrawerInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the drawer menu element\nconst $targetEl: HTMLElement = document.getElementById('drawer-js-example');\n\n// options with default values\nconst options: DrawerOptions = {\n placement: 'right',\n backdrop: true,\n bodyScrolling: false,\n edge: false,\n edgeOffset: '',\n backdropClasses:\n 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-30',\n onHide: () => {\n console.log('drawer is hidden');\n },\n onShow: () => {\n console.log('drawer is shown');\n },\n onToggle: () => {\n console.log('drawer has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'drawer-js-example',\n override: true\n};\n\n/*\n * $targetEl (required)\n * options (optional)\n * instanceOptions (optional)\n */\nconst drawer: DrawerInterface = new Drawer($targetEl, options, instanceOptions);\n\n// show the drawer\ndrawer.show();\n```\n\n#### Dropdown\n\nThe 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.\n\nMake sure to include }}\">Flowbite's JavaScript file inside your project to enable dropdowns.\n\n##### Dropdown example\n\nIf 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.\n\nThe `dropdownId` is the id of the dropdown menu element.\n\n{{< example id=\"default-dropdown-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Dropdown hover\n\nUse 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).\n\nThere'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.\n\n{{< example id=\"dropdown-hover-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n{{< /example >}}\n\n###### Delay duration\n\nYou 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.\n\n{{< example id=\"dropdown-delay-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Dropdown divider\n\nYou can use the `divide-y divide-gray-100` classes to add separate elements inside the dropdown menu.\n\n{{< example id=\"dropdown-divider-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Dropdown header\n\nUse this example to show extra information outside of the list of menu items inside the dropdown.\n\n{{< example id=\"dropdown-header-example\" class=\"flex justify-center \" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Multi-level dropdown\n\nUse this example to enable multi-level dropdown menus by adding stacked elements inside of each other.\n\n{{< example id=\"dropdown-multi-level-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"350\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Dropdown with checkbox\n\nAdd multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.\n\n{{< example id=\"dropdown-checkbox-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"290\" >}}\n\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n###### Background hover\n\nUse this example to update the background color of a menu item when using a list of checkbox elements.\n\n{{< example id=\"dropdown-checkbox-bg-hover-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n###### Helper text\n\nAdd an extra helper text to each checkbox element inside the dropdown menu list with this example.\n\n{{< example id=\"dropdown-checkbox-helper-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Dropdown with radio\n\nEnable more advanced interaction with your users by adding radio input elements inside the dropdown menu.\n\n{{< example id=\"dropdown-radio-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"250\" >}}\n\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n###### Background hover\n\nUse this example to update the background color when hovering over a menu item when using radio elements.\n\n{{< example id=\"dropdown-radio-bg-hover-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"280\" >}}\n\n\n\n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n###### Helper text\n\nThis example can be used to add an extra helper text inside of each radio element from the dropdown menu.\n\n{{< example id=\"dropdown-radio-helper-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Dropdown with toggle switch\n\nShow a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.\n\n{{< example id=\"dropdown-toggle-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"280\" >}}\n\n\n\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n\n{{< /example >}}\n\n##### Dropdown with scrolling\n\nThis 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.\n\n{{< example id=\"dropdown-scroll-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Dropdown with search\n\nUse 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.\n\n{{< example id=\"dropdown-search-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"440\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Menu icon\n\nUse the menu icon trigger element on components such as cards as an alternative element to the button.\n\n{{< 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\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Notification bell\n\nUse 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.\n\n{{< example id=\"dropdown-notification-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"660\" >}}\n\n\n\n\n
\n{{< /example >}}\n\n##### User avatar\n\nThis example can be used to show a list of menu items and options when a user is logged into your application.\n\n{{< example id=\"dropdown-avatar-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"370\" >}}\n\n\n\n
\n{{< /example >}}\n\n###### Avatar with name\n\nUse this example to also show the name or email of the user next to the avatar for the dropdown menu.\n\n{{< example id=\"dropdown-avatar-name-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"370\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Dropdown navbar\n\nYou 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.\n\n{{< example id=\"dropdown-navbar-example\" bodyClass=\"!p-0\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"340\" >}}\n\n\n{{< /example >}}\n\n##### Dropdown datepicker\n\nUse 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.\n\n{{< example id=\"dropdown-datepicker-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"520\" >}}\n\n\n
\n
\n
\n
\n
\n \n
\n \n
\n to\n
\n
\n \n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Sizes\n\nThe dropdown menus work with buttons of all sizes including smaller or larger ones.\n\n{{< example id=\"dropdown-sizes-example\" github=\"components/dropdowns.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"380\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Placement\n\nYou 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.\n\n{{< example id=\"dropdown-placement-example\" class=\"flex flex-wrap justify-center py-48\" github=\"components/dropdowns.md\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n###### Double placement\n\nYou 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.\n\n{{< example id=\"dropdown-2x-placement-example\" class=\"flex flex-wrap justify-center\" github=\"components/dropdowns.md\" iframeHeight=\"240\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n##### Dropdown offset\n\nUse the offset options on the dropdown component to set the distance and skidding of the menu relative to the trigger element.\n\n###### Distance\n\nUse 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.\n\n{{< example id=\"dropdown-offset-distance-example\" class=\"flex flex-wrap justify-center\" github=\"components/dropdowns.md\" iframeHeight=\"320\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n###### Skidding\n\nThe `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.\n\n{{< example id=\"dropdown-offset-skidding-example\" class=\"flex flex-wrap justify-center\" github=\"components/dropdowns.md\" iframeHeight=\"320\" show_dark=true >}}\n\n\n\n
\n{{< /example >}}\n\n##### More examples\n\nFor more dropdown examples you can check out the [dropdown filter](https://flowbite.com/blocks/application/filter/) components from Flowbite Blocks.\n\n##### JavaScript behaviour\n\nThe **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.\n\n###### Object parameters\n\nInitialize 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetElement\n
\n
\n Element\n
\n
\n Required\n
\n
\n Apply the main dropdown menu element as the first parameter of the Dropdown object.\n
\n
\n
\n
\n triggerElement\n
\n
\n Element\n
\n
\n Required\n
\n
\n Apply the trigger element, such as a button, which is required to position the dropdown menu and set a click event.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the positioning of the dropdown menu.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse the following options as the third parameter for the Dropdown class to set the placement of the dropdown menu.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the dropdown menu relative to the trigger element choosing from top|right|bottom|left.\n
\n
\n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the dropdown menu choosing between hover|click|none.\n
\n
\n
\n
\n offsetDistance\n
\n
\n String\n
\n
\n Set the amount of pixels the dropdown menu should be offset relative to the trigger element on the X horizontal axis.\n
\n
\n
\n
\n offsetSkidding\n
\n
\n String\n
\n
\n Set the number of pixels the dropdown menu should be offset relative to the trigger element on the Y horizontal axis.\n
\n
\n
\n
\n delay\n
\n
\n Number\n
\n
\n Set the milliseconds for which the showing or hiding of the dropdown will be delayed for when using the hover trigger type.\n
\n
\n
\n
\n ignoreClickOutsideClass\n
\n
\n String\n
\n
\n Set a class for one or more elements that when they are clicked should ignore closing the dropdown (ie. offcanvas datepicker).\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the dropdown has been hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the dropdown has been shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the dropdown visibility has been toggled.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the methods from the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Dropdown object to show the dropdown menu.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Dropdown object to hide the dropdown menu.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Dropdown object to toggle the visibility of the dropdown menu.\n
\n
\n
\n
\n isVisible()\n
\n
\n Returns true or false based on the visibility of the dropdown.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a callback function when the dropdown has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a callback function when the dropdown has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a callback function when the dropdown visibility has been changed.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Dropdown object.\n\nFirst 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.\n\nAfter that, you can also optionally set an options object to set the placement of the dropdown menu and callback functions.\n\n```javascript\n// set the dropdown menu element\nconst $targetEl = document.getElementById('dropdownMenu');\n\n// set the element that trigger the dropdown menu on click\nconst $triggerEl = document.getElementById('dropdownButton');\n\n// options with default values\nconst options = {\n placement: 'bottom',\n triggerType: 'click',\n offsetSkidding: 0,\n offsetDistance: 10,\n delay: 300,\n ignoreClickOutsideClass: false,\n onHide: () => {\n console.log('dropdown has been hidden');\n },\n onShow: () => {\n console.log('dropdown has been shown');\n },\n onToggle: () => {\n console.log('dropdown has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'dropdownMenu',\n override: true\n};\n```\n\nCreate a new Dropdown object based on the options above.\n\n```javascript\nimport { Dropdown } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst dropdown = new Dropdown($targetEl, $triggerEl, options, instanceOptions);\n```\n\nUse the `show` and `hide` methods on the Dropdown object to programmatically show or hide the dropdown menu directly from JavaScript.\n\n```javascript\n// show the dropdown menu\ndropdown.show();\n\n// hide the dropdown menu\ndropdown.hide();\n\n// toggle the dropdown menu\ndropdown.toggle();\n\n// check if dropdown is visible/open\ndropdown.isVisible();\n```\n\n###### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n```html\n\n\n\n
\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Dropdown class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Dropdown } from 'flowbite';\nimport type { DropdownOptions, DropdownInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the dropdown menu element\nconst $targetEl: HTMLElement = document.getElementById('dropdownMenu');\n\n// set the element that trigger the dropdown menu on click\nconst $triggerEl: HTMLElement = document.getElementById('dropdownButton');\n\n// options with default values\nconst options: DropdownOptions = {\n placement: 'bottom',\n triggerType: 'click',\n offsetSkidding: 0,\n offsetDistance: 10,\n delay: 300,\n onHide: () => {\n console.log('dropdown has been hidden');\n },\n onShow: () => {\n console.log('dropdown has been shown');\n },\n onToggle: () => {\n console.log('dropdown has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'dropdownMenu',\n override: true\n};\n\n/*\n * targetEl: required\n * triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst dropdown: DropdownInterface = new Dropdown(\n $targetEl,\n $triggerEl,\n options,\n instanceOptions\n);\n\n// show the dropdown\ndropdown.show();\n```\n\n#### Footer\n\nThe 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.\n\nUse 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.\n\n##### Default footer\n\nUse this footer component to show a copyright notice and some helpful website links.\n\n{{< example id=\"default-footer-example\" bodyClass=\"!p-0\" github=\"components/footer.md\" class=\"p-2\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Footer with logo\n\nUse this component to show your brand's logo, a few website links and the copyright notice on a second row.\n\n{{< example id=\"footer-logo-example\" bodyClass=\"!p-0\" github=\"components/footer.md\" class=\"p-2\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n##### Social media icons\n\nThis 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.\n\n{{< example id=\"footer-social-media-example\" bodyClass=\"!p-0\" github=\"components/footer.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Sitemap links\n\nIf 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.\n\n{{< example id=\"footer-sitemap-example\" bodyClass=\"!p-0\" github=\"components/footer.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Sticky footer\n\nUse 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.\n\n{{< example id=\"footer-sticky-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n##### More examples\n\nFor more footer examples you can check out the footer sections from Flowbite Blocks:\n\n- [Footers for dashboard](https://flowbite.com/blocks/application/dashboard-footer/)\n- [Footers for marketing](https://flowbite.com/blocks/marketing/footer/)\n\n#### Forms\n\nGet 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.\n\n##### Default form\n\nThis 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.\n\n{{< example id=\"default-form-example\" github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n
\n {{< requires_tw3 >}}\n
\n\n##### Floating labels\n\nUse 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.\n\n{{< example id=\"form-floating-label-example\" github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Input Sizes\n\nUse the following utility classes to create three different sizing options (large, base, and small) for your form input elements.\n\n{{< example id=\"form-sizes-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Disabled inputs\n\nUse the following utility classes to indicate a disabled form input item.\n\n{{< example id=\"form-disabled-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Shadow inputs\n\nAlternatively, you can decide to apply a shadow styling using the `shadow-xs` class to any of your form input elements.\n\n{{< example id=\"form-shadow-example\" github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Helper text\n\nUse the following markup to also add a helper text below your form input item. Usually used for newsletter signup elements.\n\n{{< example id=\"form-helper-text-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Input element with icon\n\nUse the following Tailwind utility classes and [SVG icon](https://flowbite.com/icons/) to add an icon inside input form elements.\n\n{{< example id=\"form-input-icon-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Input element with addon\n\nUse this example to add a SVG icon or special character with an addon style to the input element.\n\n{{< example id=\"form-input-addon-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Form validation\n\nUse the following two success and error styles when validation your forms.\n\n{{< example id=\"form-validation-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Textarea\n\nUse the following code to create a textarea form element.\n\n{{< example id=\"form-textarea-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Select input\n\nUse the following select input element to show selectable list of items.\n\n{{< example id=\"form-select-input-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Checkbox\n\nThe 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.\n\n{{< example id=\"form-checkbox-example\" github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Radio buttons\n\nGroup a series of buttons together on a single line or stack them in a vertical column.\n\n{{< example id=\"form-radio-example\" github=\"components/forms.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### File upload\n\nUse the following Tailwind CSS file upload element to receive any type of file from users.\n\n{{< example id=\"form-file-input-example\" github=\"components/forms.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Toggle Switch\n\nUse the following toggle switch component to ask for a yes or no type of input from your users without the use of JavaScript.\n\n{{< example id=\"form-toggle-example\" class=\"flex flex-col flex-wrap\" github=\"components/forms.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n##### More examples\n\nYou can check out the following resources for more form components from Flowbite Blocks:\n\n- [Register forms](https://flowbite.com/blocks/marketing/register/)\n- [Login forms](https://flowbite.com/blocks/marketing/login/)\n- [Reset password forms](https://flowbite.com/blocks/marketing/reset-password/)\n- [Account recovery forms](https://flowbite.com/blocks/marketing/account-recovery/)\n- [Contact forms](https://flowbite.com/blocks/marketing/contact/)\n- [CRUD create forms](https://flowbite.com/blocks/application/crud-create-forms/)\n- [CRUD update forms](https://flowbite.com/blocks/application/crud-update-forms/)\n- [User onboarding forms](https://flowbite.com/blocks/marketing/user-onboarding/)\n\n#### Gallery\n\nThe 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.\n\nThis 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.\n\n##### Default gallery\n\nUse this component to show a collection of images inside a gallery with three pictures on a row.\n\n{{< example id=\"default-gallery-example\" class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n{{< /example >}}\n\n##### Masonry grid\n\nThis example can be used to show the images inside a masonry grid layouts with four columns.\n\n{{< example id=\"masonry-gallery-example\" class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n{{< /example >}}\n\n##### Featured image\n\nThis example can be used to feature the most important image and show a row of five pictures below.\n\n{{< example id=\"featured-gallery-example\" class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n{{< /example >}}\n\n##### Quad gallery\n\nUse this example to show four larger images with two items on a row.\n\n{{< example id=\"quad-gallery-example\" class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Gallery with slider\n\nThis example uses the [carousel slider](https://flowbite.com/docs/components/carousel/) functionality to show multiple images inside a slider gallery.\n\n{{< example id=\"slider-gallery-example\" class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n \n \n \n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Custom slider controls\n\nThis example uses an alternative style for the control button for the carousel slider component.\n\n{{< example id=\"slider-controls-gallery-example\" class=\"flex justify-center\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n
\n
\n
\n \n \n
\n
\n{{< /example >}}\n\n##### Gallery with tag filters\n\nUse this example to show a list of tags and filter the images below based on the activately selected tag.\n\n{{< example id=\"tags-gallery-example\" bodyClass=\"mt-0\" github=\"components/gallery.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n{{< /example >}}\n\n#### Indicators\n\nThe 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.\n\nCheck out the following examples for multiple sizes, colors, positionings, styles, and more all coded with Tailwind CSS and Flowbite.\n\n##### Default indicator\n\nUse this example to create a simple indicator with multiple colors and position it anywhere on the website.\n\n{{< example id=\"default-indicator-example\" class=\"flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n##### Legend indicator\n\nThis example can be used as a legend indicator for charts to also add a text next to the bullet point.\n\n{{< example id=\"legend-indicator-example\" class=\"flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\nVisitors\nSessions\nCustomers\nRevenue\n{{< /example >}}\n\n##### Indicator count\n\nThis example can be used to show a number count inside the indicator and position it relative to a button component.\n\n{{< example id=\"indicator-count-example\" github=\"components/indicators.md\" class=\"flex items-center justify-center\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Status indicator\n\nUse this example to show a status indicator for the currently logged in user by showing red for offline and green for online.\n\n{{< example id=\"status-indicator-example\" github=\"components/indicators.md\" class=\"flex items-center justify-center\" show_dark=true >}}\n\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Badge indicator\n\nThis example can be used to add an indicator inside of a badge component.\n\n{{< example id=\"badge-indicator-example\" github=\"components/indicators.md\" class=\"flex items-center justify-center\" show_dark=true >}}\n\n
\n
\n
\n
\n \n
\n
\n
\n Neil Sims\n
\n
\n email@flowbite.com\n
\n
\n \n \n Available\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n Bonnie Green\n
\n
\n email@flowbite.com\n
\n
\n \n \n Unavailable\n \n
\n
\n
\n{{< /example >}}\n\n##### Stepper indicator\n\nYou can also use the indicators inside of a stepper component when completing a form element.\n\n{{< example id=\"stepper-indicator-example\" class=\"space-y-8\" github=\"components/indicators.md\" show_dark=true >}}\n\n\n
\n
\n
\n \n
\n \n
\n
\n
Step 1
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
Step 3
\n
\n
\n\n\n
\n
\n
\n \n
\n \n
\n
\n
Step 1
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Step 2
\n
\n
\n
\n
\n
\n \n
\n
\n
\n
Step 3
\n
\n
\n\n{{< /example >}}\n\n##### Loading indicator\n\nUse this animated loading indicator when content inside of a card is still loading.\n\n{{< example id=\"loading-indicator-example\" class=\"space-y-8 flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\n\n
\n
loading...
\n
\n{{< /example >}}\n\n##### Spinner indicator\n\nUse this animated spinner component inside of a card component that hasn't loaded yet.\n\n{{< example id=\"spinner-indicator-example\" class=\"space-y-8 flex items-center justify-center\" github=\"components/indicators.md\" show_dark=true >}}\n\n
\n
\n \n Loading...\n
\n
\n{{< /example >}}\n\n##### Indicator position\n\nUse these examples to position the indicator component anywhere relative to the parent element.\n\n{{< example id=\"position-indicator\" class=\"flex items-center justify-center space-y-8\" github=\"components/indicators.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n#### Jumbotron\n\nThe 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.\n\nThis 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.\n\nThe jumbotron component from Flowbite is responsive on all devices, natively supports dark mode and is coded with the utility classes from Tailwind CSS.\n\n##### Default jumbotron\n\nUse this default example to show a title, description, and two CTA buttons for the jumbotron component.\n\n{{< example id=\"default-jumbotron-example\" bodyClass=\"p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n\n{{< /example >}}\n\n##### Background image\n\nUse this jumbotron to apply a background image with a darkening opacity effect to improve readability.\n\n{{< example id=\"background-jumbotron-example\" bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n\n{{< /example >}}\n\n##### Featured video\n\nThis component can be used to feature a video together with a heading title, description, and CTA buttons.\n\n{{< example id=\"video-jumbotron-example\" bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n\n{{< /example >}}\n\n##### Authentication form\n\nUse this component to show a sign in or register form as the first section of your website.\n\n{{< example id=\"form-jumbotron-example\" bodyClass=\"!p-0 bg-gray-50 dark:bg-gray-900\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
\n
\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n\n{{< /example >}}\n\n##### Gradient background\n\nUse this component to show a hero pattern with a linear gradient layout as an overlay for added effects.\n\n{{< example id=\"gradient-jumbotron-example\" bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n \n
\n \n\n{{< /example >}}\n\n##### Jumbotron with cards\n\nThis example can be used to show cards with headings, descriptions, and CTA buttons inside a grid layout.\n\n{{< example id=\"cards-jumbotron-example\" bodyClass=\"!p-0\" github=\"components/jumbotron.md\" show_dark=true >}}\n\n\n
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.
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.
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.
\n\n{{< /example >}}\n\n##### More examples\n\nFor more jumbotron examples you can check out the [hero sections](https://flowbite.com/blocks/marketing/hero/) from Flowbite Blocks.\n\n#### KBD\n\nThe 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.\n\nUse the semantic `` keyboard input tag to use the default monospace font which is best suited for representing input keys.\n\n##### Default KBD\n\nHere's a list of KBD components that you can use inside any other element.\n\n{{< example id=\"default-kbd-example\" github=\"components/kbd.md\" show_dark=true >}}\nShift\nCtrl\nTab\nCaps Lock\nEsc\nSpacebar\nEnter\n{{< /example >}}\n\n##### KBD inside text\n\nUse this example by nesting an inline KBD component inside a paragraph.\n\n{{< example id=\"kbd-text-example\" github=\"components/kbd.md\" show_dark=true >}}\n\n
\n Please press Ctrl + Shift + R to re-render an MDN page.\n
\n{{< /example >}}\n\n##### KBD inside table\n\nThe KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.\n\n{{< example id=\"kbd-table-example\" github=\"components/kbd.md\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Key\n
\n
\n Description\n
\n
\n \n \n
\n
\n Shift\n or\n Tab\n
\n
\n Navigate to interactive elements\n
\n
\n
\n
\n Enter\n or\n Spacebar\n
\n
\n Ensure elements with ARIA role=\"button\" can be activated with both key commands.\n
\n{{< /example >}}\n\n##### Arrow keys\n\nUse this example to show arrow keys inside the KBD styled element.\n\n{{< example id=\"kbd-arrow-example\" github=\"components/list-group.md\" show_dark=true >}}\n\n\nArrow key up\n\n\n\nArrow key down\n\n\n\nArrow key left\n\n\n\nArrow key right\n\n{{< /example >}}\n\n##### Letter keys\n\nUse this example if you need to show a key from the latin alphabet\n\n{{< example id=\"kbd-letter-example\" github=\"components/kbd.md\" show_dark=true >}}\nQ\nW\nE\nR\nT\nY\nU\nI\nO\nP\nA\nS\nD\nF\nG\nH\nJ\nK\nL\nZ\nX\nC\nV\nB\nN\nM\n{{< /example >}}\n\n##### Number keys\n\nUse this example to show a key inside a KBD component from the english numeral system.\n\n{{< example id=\"kbd-number-example\" github=\"components/kbd.md\" show_dark=true >}}\n1\n2\n3\n4\n5\n6\n7\n8\n9\n0\n{{< /example >}}\n\n##### Function keys\n\nThis example can be used to denote function keys inside the KBD component.\n\n{{< example id=\"kbd-function-example\" github=\"components/kbd.md\" show_dark=true >}}\nF1\nF2\nF3\nF4\nF5\nF6\nF7\nF8\nF9\nF10\nF11\nF12\n{{< /example >}}\n\n#### List group\n\nThe list group component can be used to display a series of elements, buttons or links inside a single card component similar to a sidebar.\n\n##### Default list group\n\nHere's an example of a list group that you can use right away.\n\n{{< example id=\"default-list-group-example\" class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n
Profile
\n
Settings
\n
Messages
\n
Download
\n
\n{{< /example >}}\n\n##### List group with links\n\nYou can also display a series of links inside the list group element.\n\n{{< example id=\"list-group-links-example\" class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### List group with buttons\n\nIt 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.\n\n{{< example id=\"list-group-buttons-example\" class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n \n \n \n \n
\n{{< /example >}}\n\n##### List group with icons\n\nUse the following example to create a list of buttons as a menu together with [SVG icons](https://flowbite.com/icons/).\n\n{{< example id=\"list-group-icons-example\" class=\"flex justify-center\" github=\"components/list-group.md\" show_dark=true >}}\n\n
\n \n \n \n \n
\n{{< /example >}}\n\n#### Mega menu\n\nThe 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.\n\nMake 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.\n\n##### Default mega menu\n\nUse this example to show a list of links aligned on three columns inside the mega menu dropdown.\n\n{{< example id=\"default-mega-menu-example\" bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n{{< /example >}}\n\n##### Mega menu with icons\n\nThis example of a mega menu dropdown can be used to also show an icon near the text of the link.\n\n{{< example id=\"mega-menu-icons-example\" bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n{{< /example >}}\n\n##### Full width dropdown\n\nUse this example to show a mega menu dropdown that spans the entire width of the document page.\n\n{{< example id=\"mega-menu-full-width-example\" bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"440\" >}}\n\n\n{{< /example >}}\n\n##### Full width with CTA\n\nThis example can be used to also show a CTA button or link next to the menu items inside the dropdown.\n\n{{< example id=\"mega-menu-full-width-cta-example\" bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"360\" >}}\n\n\n{{< /example >}}\n\n##### Full width with image\n\nThis example can be used to also show a CTA with a backdround image inside the dropdown next to the other menu items and links.\n\n{{< example id=\"mega-menu-full-width-image-example\" bodyClass=\"!p-0\" github=\"components/mega-menu.md\" show_dark=true iframeHeight=\"360\" >}}\n\n\n{{< /example >}}\n\n##### More examples\n\nYou can check out more mega menu examples on the [header components](https://flowbite.com/blocks/marketing/header/) page from Flowbite Blocks.\n\n#### Modal\n\nThe 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.\n\nGet started with multiple sizes, colors, and styles built with the utility classes from Tailwind CSS and the components from Flowbite.\n\n##### Default modal\n\nIn 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.\n\nIf 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:\n\n- `data-modal-toggle=\"modalID\"` - toggle the modal\n- `data-modal-show=\"modalID\"` - show the modal\n- `data-modal-hide=\"modalID\"` - close the modal\n\n{{< example id=\"default-modal-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Terms of Service\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Static modal\n\nUse 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.\n\n{{< example class=\"dark:bg-gray-900\" github=\"components/modal.md\" class=\"flex justify-center\" iframeHeight=\"600\" show_dark=true >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Static modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Pop-up modal\n\nYou 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.\n\n{{< example id=\"modal-popup-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"500\" >}}\n\n\n
\n
\n
\n \n
\n \n
Are you sure you want to delete this product?
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Form element\n\nUse 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.\n\n{{< example id=\"modal-form-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Sign in to our platform\n
\n \n
\n \n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Modal with CRUD\n\nUse 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.\n\n{{< example id=\"modal-crud-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Create New Product\n
\n \n
\n \n \n
\n
\n
\n{{< /example >}}\n\n##### Modal with radio inputs\n\nThis example can be used to show a list of options to your users by using advanced radio inputs with a custom design.\n\n{{< example id=\"modal-radio-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Open positions\n
\n \n
\n \n
\n
Select your desired position:
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Modal with timeline\n\nUse 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.\n\n{{< example id=\"modal-timeline-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n
\n Changelog\n
\n \n
\n \n
\n \n
\n \n \n \n
Flowbite Application UI v2.0.0 Latest
\n \n \n
\n
\n \n \n \n
Flowbite Figma v2.8.0
\n \n \n
\n
\n \n \n \n
Flowbite Library v1.2.2
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Modal with progress bar\n\nThis 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.\n\n{{< example id=\"modal-progress-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"600\" >}}\n\n\n\n\n\n
\n
\n \n
\n \n
\n \n
Approaching Full Capacity
\n
Choosing the right server storage solution is essential for maintaining data integrity.
\n
\n My storage\n 376,3 of 500 GB used\n
\n
\n \n
\n \n
\n \n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n\n##### Crypto wallet\n\nUse this web3 modal component to show crypto wallet connection options like MetaMask or WalletConnect when building a website based on NFT authentication and collectibles.\n\n{{< example id=\"modal-crypto-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"700\" >}}\n\n\n\n
\n
\n \n
\n \n
\n
\n Connect wallet\n
\n \n
\n \n
\n
Connect with one of our available wallet providers or create a new one.
\n{{< /example >}}\n\n##### Sizes\n\nYou 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.\n\n{{< example id=\"modal-sizes-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"900\" >}}\n\n
\n \n \n \n \n \n
\n\n\n
\n
\n \n
\n \n
\n
\n Small modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Default modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Large modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Extra Large modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n 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.\n
\n
\n 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.\n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Placement\n\nUse 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`).\n\nThe default position is the center of the page.\n\n{{< example id=\"modal-placement-example\" github=\"components/modal.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"800\">}}\n\n
\n \n \n \n \n \n
\n\n\n
\n
\n \n
\n \n
\n
\n Top left modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Top right modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Bottom left modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n\n\n
\n
\n \n
\n \n
\n
\n Bottom right modal\n
\n \n
\n \n
\n
\n 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.\n
\n
\n 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.\n
\n
\n \n
\n \n \n
\n
\n
\n
\n{{< /example >}}\n\n##### More examples\n\nYou can check out more modal component examples from the following resources from Flowbite Blocks:\n\n- [CRUD read modals](https://flowbite.com/blocks/application/crud-read-modals/)\n- [CRUD create modals](https://flowbite.com/blocks/application/crud-create-modals/)\n- [CRUD update modals](https://flowbite.com/blocks/application/crud-update-modals/)\n- [Faceted search modals](https://flowbite.com/blocks/application/faceted-search-modals/)\n\n##### JavaScript behaviour\n\nThe **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.\n\n###### Object parameters\n\nInitialize a Modal object with parameters such as the modal element and the optional options object.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the main modal element as a JavaScript object.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the default state of the modal, placement, and animations.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n 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)\n
\n
\n
\n
\n backdrop\n
\n
\n String\n
\n
\n Choose between static or dynamic to prevent closing the modal when clicking outside.\n
\n
\n
\n
\n backdropClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS classes for the backdrop element (eg. 'bg-blue-500 dark:bg-blue-400'.\n
\n
\n
\n
\n closable\n
\n
\n Boolean\n
\n
\n Set to false to disable closing the modal on hitting ESC or clicking on the backdrop.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the modal has been hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the modal has been shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the modal visibility has been toggled.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the methods from the Modal object to show, hide, and toggle the visibility directly from JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n toggle()\n
\n
\n Use the toggle function on the Modal object to toggle the modal element's visibility.\n
\n
\n
\n
\n show()\n
\n
\n Use the show function on the Modal object to show the modal element.\n
\n
\n
\n
\n hide()\n
\n
\n Use the hide function on the Modal object to hide the modal element.\n
\n
\n
\n
\n isHidden()\n
\n
\n Use this function to check if the modal is hidden.\n
\n
\n
\n
\n isVisible()\n
\n
\n Use this function to check if the modal is visible.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function when the modal has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a custom callback function when the modal has been closed.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a custom callback function when the modal visibility has been toggled.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Modal object.\n\nFirst 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.\n\n```javascript\n// set the modal menu element\nconst $targetEl = document.getElementById('modalEl');\n\n// options with default values\nconst options = {\n placement: 'bottom-right',\n backdrop: 'dynamic',\n backdropClasses:\n 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',\n closable: true,\n onHide: () => {\n console.log('modal is hidden');\n },\n onShow: () => {\n console.log('modal is shown');\n },\n onToggle: () => {\n console.log('modal has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'modalEl',\n override: true\n};\n```\n\nCreate a new Modal object based on the options above.\n\n```javascript\nimport { Modal } from 'flowbite';\n\n/*\n * $targetEl: required\n * options: optional\n */\nconst modal = new Modal($targetEl, options, instanceOptions);\n```\n\nUse the `show` and `hide` methods to show and hide the modal component directly from JavaScript.\n\n```javascript\n// show the modal\nmodal.show();\n\n// hide the modal\nmodal.hide();\n```\n\nUse the `toggle` method to toggle the visibility of the modal.\n\n```javascript\n// toggle the modal\nmodal.toggle();\n```\n\nUse the `isHidden` or `isVisible` method to check if the modal is visible or not.\n\n```javascript\n// true if hidden\nmodal.isHidden();\n\n// true if visible\nmodal.isVisible();\n```\n\n###### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n```html\n\n
\n \n
\n \n \n \n Terms of Service\n \n \n \n \n \n Close modal\n \n
\n \n
\n \n With less than a month to go before the European Union\n enacts new consumer privacy laws for its citizens, companies\n around the world are updating their terms of service\n agreements to comply.\n \n \n The European Unionβs General Data Protection Regulation\n (G.D.P.R.) goes into effect on May 25 and is meant to ensure\n a common set of data rights in the European Union. It\n requires organizations to notify users as soon as possible\n of high-risk data breaches that could personally affect\n them.\n \n
\n \n \n \n I accept\n \n \n Decline\n \n
\n \n \n\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Modal class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Modal } from 'flowbite';\nimport type { ModalOptions, ModalInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\nconst $modalElement: HTMLElement = document.querySelector('#modalEl');\n\nconst modalOptions: ModalOptions = {\n placement: 'bottom-right',\n backdrop: 'dynamic',\n backdropClasses:\n 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40',\n closable: true,\n onHide: () => {\n console.log('modal is hidden');\n },\n onShow: () => {\n console.log('modal is shown');\n },\n onToggle: () => {\n console.log('modal has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'modalEl',\n override: true\n};\n\nconst modal: ModalInterface = new Modal($modalElement, modalOptions, instanceOptions);\n\nmodal.show();\n```\n\n#### Navbar\n\nGet 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.\n\n##### Default navbar\n\nUse 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.\n\n{{< example id=\"default-navbar-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n{{< /example >}}\n\n##### Navbar with dropdown\n\nThis example can be used to show a secondary dropdown menu when clicking on one of the navigation links.\n\n{{< example id=\"navbar-dropdown-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n{{< /example >}}\n\n##### Multi-level dropdown\n\nUse this example to show multiple layers of dropdown menu by stacking them inside of each other.\n\n{{< example id=\"navbar-multi-dropdown-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n{{< /example >}}\n\n##### Sticky navbar\n\nUse this example to keep the navbar positioned fixed to the top side as you scroll down the document page.\n\n{{< example id=\"navbar-sticky-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"480\" iframeMaxHeight=\"480\" skeletonPlaceholders=true >}}\n\n\n{{< /example >}}\n\n##### Navbar with submenu\n\nUse this example to show another subnav below the main navbar element.\n\n{{< example id=\"navbar-submenu-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n##### Navbar with search\n\nUse this example of a navbar element to also show a search input element that you can integrate for a site-wide search.\n\n{{< example id=\"navbar-search-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n{{< /example >}}\n\n##### Navbar with CTA button\n\nUse the following navbar element to show a call to action button alongside the logo and page links.\n\n{{< example id=\"navbar-cta-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"300\" >}}\n\n\n{{< /example >}}\n\n##### Language dropdown\n\nGet started with this example to show a language dropdown selector in the navbar component.\n\n{{< example id=\"navbar-language-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n{{< /example >}}\n\n##### User menu dropdown\n\nUse this example to create a navigation bar with a user profile or button to toggle a dropdown menu.\n\n{{< example id=\"navbar-user-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"380\" >}}\n\n\n{{< /example >}}\n\n##### Mega menu navbar\n\nYou 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.\n\n{{< example id=\"navbar-mega-menu\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"340\" >}}\n\n\n{{< /example >}}\n\n##### Solid background\n\nUse this example to show a solid background for the navbar component instead of being transparent.\n\n{{< example id=\"navbar-solid-bg-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n{{< /example >}}\n\n##### Hamburger menu\n\nAll 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.\n\nHere's an example where you can show the hamburger icon and the menu on all screen sizes.\n\n{{< example id=\"navbar-hamburger-example\" bodyClass=\"!p-0\" github=\"components/navbar.md\" show_dark=true iframeHeight=\"320\" >}}\n\n\n{{< /example >}}\n\n##### More examples\n\nYou can check out more navbar component examples from the following resources from Flowbite Blocks:\n\n- [Headers for marketing](https://flowbite.com/blocks/marketing/header/)\n- [Navbars for dashboard](https://flowbite.com/blocks/application/navbar/)\n- [Application shell layouts](https://flowbite.com/blocks/application/shells/)\n\n##### JavaScript behaviour\n\nUse 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.\n\n###### Object parameters\n\nUse the object parameters from the Collapse object to set the trigger element, target element, and the options including callback functions.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the target element object that will be expanded or collapsed.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Optional\n
\n
\n Pass the trigger element that will expand or collapse the target element based on click event. \n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Set these options to override the default transition, duration, and timing function of the collapse animation.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse these optional options for the Collapse object to set the transition, duration, and timing function types based on the utility classes from Tailwind CSS.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n onCollapse\n
\n
\n Function\n
\n
\n Set a callback function when the item has been collapsed.\n
\n
\n
\n
\n onExpand\n
\n
\n Function\n
\n
\n Set a callback function when the item has been expanded.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the item has either been expanded or collapsed.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the following methods on the Dismiss object to programmatically manipulate the behaviour.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n collapse()\n
\n
\n Use this method on the Collapse object to hide the target element.\n
\n
\n
\n
\n expand()\n
\n
\n Use this method on the Collapse object to show the target element.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Collapse object toggle the current visibility of the target element.\n
\n
\n
\n
\n updateOnCollapse(callback)\n
\n
\n Use this method to set a callback function when the item has been collapsed.\n
\n
\n
\n
\n updateOnExpand(callback)\n
\n
\n Use this method to set a callback function when the item has been expanded.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a callback function when the item has been toggled.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck 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.\n\nFirst of all, you need to set the object parameters where the target element is required and the other two are optional.\n\n```javascript\n// set the target element that will be collapsed or expanded (eg. navbar menu)\nconst $targetEl = document.getElementById('targetEl');\n\n// optionally set a trigger element (eg. a button, hamburger icon)\nconst $triggerEl = document.getElementById('triggerEl');\n\n// optional options with default values and callback functions\nconst options = {\n onCollapse: () => {\n console.log('element has been collapsed');\n },\n onExpand: () => {\n console.log('element has been expanded');\n },\n onToggle: () => {\n console.log('element has been toggled');\n },\n};\n\nconst instanceOptions = {\n id: 'targetEl',\n override: true\n};\n\n```\n\nNext step is to create a new instance of a Collapse object using the parameters we have set above.\n\n```javascript\nimport { Collapse } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: optional\n * options: optional\n */\nconst collapse = new Collapse($targetEl, $triggerEl, options, instanceOptions);\n```\n\nNow you can programmatically expand or collapse the target element using the methods of the Collapse object.\n\n```javascript\n// show the target element\ncollapse.expand();\n\n// hide the target element\ncollapse.collapse();\n\n// toggle the visibility of the target element\ncollapse.toggle();\n```\n\n###### HTML Markup\n\nHere 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.\n\n```html\n\n\n\n
\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Collapse object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Collapse } from 'flowbite';\nimport type { CollapseOptions, CollapseInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the target element that will be collapsed or expanded (eg. navbar menu)\nconst $targetEl: HTMLElement = document.getElementById('targetEl');\n\n// optionally set a trigger element (eg. a button, hamburger icon)\nconst $triggerEl: HTMLElement = document.getElementById('triggerEl');\n\n// optional options with default values and callback functions\nconst options: CollapseOptions = {\n onCollapse: () => {\n console.log('element has been collapsed');\n },\n onExpand: () => {\n console.log('element has been expanded');\n },\n onToggle: () => {\n console.log('element has been toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'targetEl',\n override: true\n};\n\n/*\n * $targetEl: required\n * $triggerEl: optional\n * options: optional\n * instanceOptions: optional\n */\nconst collapse: CollapseInterface = new Collapse(\n $targetEl,\n $triggerEl,\n options,\n instanceOptions\n);\n\n// show the target element\ncollapse.expand();\n```\n\n#### Pagination\n\nThe 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.\n\n##### Default pagination\n\nUse 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.\n\n{{< example id=\"default-pagination-example\" class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n##### Pagination with icons\n\nThe 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.\n\n{{< example id=\"pagination-icons-example\" class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n##### Previous and next\n\nUse the following markup to show simple previous and next elements.\n\n{{< example id=\"pagination-prev-next-example\" class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Previous and next with icons\n\nUse the following code to show simple previous and next elements with icons.\n\n{{< 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 >}}\n\n
\n{{< /example >}}\n\n##### Table data pagination\n\nYou can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.\n\n{{< example id=\"pagination-table-example\" class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n \n
\n \n \n
\n
\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n \n
\n \n \n
\n
\n{{< /example >}}\n\n##### Table data pagination with icons\n\nYou 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.\n\n{{< example id=\"pagination-table-icons-example\" class=\"flex flex-col space-y-4 items-center justify-center\" github=\"components/pagination.md\" show_dark=true >}}\n\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n
\n \n \n \n
\n
\n
\n \n \n Showing 1 to 10 of 100 Entries\n \n
\n \n \n \n
\n
\n{{< /example >}}\n\n#### Popover\n\nGet 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.\n\nMake sure that you have the Flowbite JavaScript included in your project to enable the popover interactivity by following the }}\">quickstart guide.\n\n##### Default popover\n\nInitialize 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.\n\n{{< example id=\"default-popover-example\" class=\"flex justify-center pt-24\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover title
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n##### User profile\n\nUse this example to show more information about a user profile when hovering over the trigger component.\n\n{{< example id=\"popover-user-profile-example\" class=\"flex justify-center pt-52\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n{{< /example >}}\n\n##### Company profile\n\nThis example can be used to show more information about a company profile.\n\n{{< example id=\"popover-company-profile-example\" class=\"flex justify-center pt-80\" github=\"components/popover.md\" disable_init_js=true show_dark=true >}}\n\n\n
\n{{< /example >}}\n\n##### Image popover\n\nUse 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.\n\n{{< example id=\"popover-image-example\" class=\"flex justify-center pt-64\" github=\"components/popover.md\" show_dark=true >}}\n\n
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
\n
\n
\n
\n
\n
About Italy
\n
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.
\n{{< /example >}}\n\n##### Description popover\n\nShow helpful information inside a popover when hovering over a question mark button.\n\n{{< example id=\"popover-description-example\" class=\"pb-96\" github=\"components/popover.md\" show_dark=true >}}\n\n
This is just some informational text
\n
\n
\n
Activity growth - Incremental
\n
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.
\n
Calculation
\n
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.
\n{{< /example >}}\n\n##### Progress popover\n\nShow a progress bar with details inside a popover when hovering over a settings button.\n\n{{< example id=\"popover-description-example\" class=\"flex justify-center pt-36\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Available storage
\n
This server has 30 of 150 GB of block storage remaining.
\n{{< /example >}}\n\n##### Password strength\n\nDynamically show the password strength progress when creating a new password positioned relative to the input element.\n\n{{< example id=\"popover-password-example\" class=\"pb-16\" github=\"components/popover.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Placement\n\nSet 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.\n\n{{< example id=\"popover-placement-example\" class=\"flex flex-wrap justify-center py-24 space-x-4\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover top
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n
\n
\n
Popover right
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n
\n
\n
Popover bottom
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n
\n
\n
Popover left
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n##### Triggering\n\nManually 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`.\n\n{{< example id=\"popover-triggering-example\" class=\"flex justify-center pt-24\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover hover
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n\n\n\n
\n
\n
Popover click
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n##### Offset\n\nIncrease or decrease the default offset by adding the `data-popover-offset=\"{offset}\"` data attribute where the value is an integer.\n\n{{< example id=\"popover-offset-example\" class=\"flex justify-center pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover offset
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n##### Animation\n\nCustomize the animation of the popover component by using the utility classes from Tailwind CSS such as `transition-opacity` and `duration-{x}`.\n\n{{< example id=\"popover-animation-example\" class=\"flex justify-center pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover animation
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n
\n{{< /example >}}\n\n##### Disable arrow\n\nYou can also disable the popover arrow by not including the `data-popper-arrow` element.\n\n{{< example id=\"popover-disable-arrow-example\" class=\"flex justify-center pt-32\" github=\"components/popover.md\" show_dark=true >}}\n\n\n
\n
\n
Popover no arrow
\n
\n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n
\n{{< /example >}}\n\n##### JavaScript behaviour\n\nThe 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.\n\n###### Object parameters\n\nCreate 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set the popover component as the target element.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set an element to trigger the popover when clicking or hovering (ie. a button, text).\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the positioning of the popover element, trigger type, offset, and more.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse the following options as the third parameter for the Popover object to set the positioning, offset, and the trigger type (hover or click).\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the popover element relative to the trigger element choosing from top|right|bottom|left.\n
\n
\n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the popover content choosing between hover|click|none.\n
\n
\n
\n
\n offset\n
\n
\n Integer\n
\n
\n Set the offset distance between the popover and the trigger element.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the popover is hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the popover is shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the popover visibility has been toggled.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the methods from the Popover object to programmatically show or hide the popover from directly JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Popover object to show the popover content.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Popover object to hide the popover content.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Popover object to toggle the visibility of the popover content.\n
\n
\n
\n
\n isVisible()\n
\n
\n Use this function to check if the popover is visible or not.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function when the popover has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a custom callback function when the popover has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a custom callback function when the popover has been toggled.\n
\n
\n \n
\n
\n\n###### Example\n\nUse following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Popover object.\n\nFirst of all, set the target element as the popover itself and the trigger element which can be a button or text element.\n\nAfter that you can also set the options object to change the placement and trigger type of the popover, alongside with the callback functions.\n\n```javascript\n// set the popover content element\nconst $targetEl = document.getElementById('popoverContent');\n\n// set the element that trigger the popover using hover or click\nconst $triggerEl = document.getElementById('popoverButton');\n\n// options with default values\nconst options = {\n placement: 'bottom',\n triggerType: 'hover',\n offset: 10,\n onHide: () => {\n console.log('popover is shown');\n },\n onShow: () => {\n console.log('popover is hidden');\n },\n onToggle: () => {\n console.log('popover is toggled');\n },\n};\n\n// instance options object\nconst instanceOptions = {\n id: 'popoverContent',\n override: true\n};\n```\n\nCreate a new Popover object based on the options above.\n\n```javascript\nimport { Popover } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n */\nconst popover = new Popover($targetEl, $triggerEl, options, instanceOptions);\n```\n\nUse the `show` and `hide` methods on the Popover object to programmatically show and hide the popover element using JavaScript.\n\n```javascript\n// show the popover\npopover.show();\n\n// hide the popover\npopover.hide();\n\n// toggle the popover\npopover.toggle();\n\n// check if popover is visible\npopover.isVisible();\n\n// destroy popover object (removes event listeners and off-canvas Popper.js)\ntooltip.destroy();\n\n// re-initialize popover object\ntooltip.init();\n```\n\n###### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n```html\n\n Default popover\n\n\n \n
\n Popover title\n
\n \n
\n
And here's some amazing content. It's very engaging. Right?
\n
\n \n\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Popover class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Popover } from 'flowbite';\nimport type { PopoverOptions, PopoverInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the popover content element\nconst $targetEl: HTMLElement = document.getElementById('popoverContent');\n\n// set the element that trigger the popover using hover or click\nconst $triggerEl: HTMLElement = document.getElementById('popoverButton');\n\n// options with default values\nconst options: PopoverOptions = {\n placement: 'top',\n triggerType: 'hover',\n offset: 10,\n onHide: () => {\n console.log('popover is shown');\n },\n onShow: () => {\n console.log('popover is hidden');\n },\n onToggle: () => {\n console.log('popover is toggled');\n },\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'popoverContent',\n override: true\n};\n\nif ($targetEl) {\n /*\n * targetEl: required\n * triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\n const popover: PopoverInterface = new Popover(\n $targetEl,\n $triggerEl,\n options,\n instanceOptions\n );\n\n popover.show();\n}\n```\n\n#### Progress bar\n\nThe 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.\n\n##### Default progress bar\n\nUse 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.\n\n{{< example id=\"default-progress-example\" github=\"components/progress.md\" show_dark=true >}}\n
\n \n
\n{{< /example >}}\n\n##### Sizes\n\nYou can also use different sizes by using various sizing utility classes from Flowbite and Tailwind CSS.\n\n{{< example id=\"progress-sizes-example\" github=\"components/progress.md\" show_dark=true >}}\n
Small
\n
\n \n
\n
Default
\n
\n \n
\n
Large
\n
\n \n
\n
Extra Large
\n
\n \n
\n{{< /example >}}\n\n##### With label inside\n\nHere is an example of using a progress bar with the label inside the bar.\n\n{{< example id=\"progress-label-example\" github=\"components/progress.md\" show_dark=true >}}\n
\n
45%
\n
\n{{< /example >}}\n\n##### With label outside\n\nAnd this is an example of using a progress bar outside the bar.\n\n{{< example id=\"progress-label-outside-example\" github=\"components/progress.md\" show_dark=true >}}\n
\n Flowbite\n 45%\n
\n
\n \n
\n{{< /example >}}\n\n##### Colors\n\nYou can also apply any color using the `bg-{color}` utility classes from Tailwind CSS and Flowbite.\n\n{{< example id=\"progress-colors-example\" github=\"components/progress.md\" show_dark=true >}}\n
Dark
\n
\n \n
\n
Blue
\n
\n \n
\n
Red
\n
\n \n
\n
Green
\n
\n \n
\n
Yellow
\n
\n \n
\n
Indigo
\n
\n \n
\n
Purple
\n
\n \n
\n{{< /example >}}\n\n#### Rating\n\nGet 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.\n\nYou 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.\n\n##### Default rating\n\nUse this simple example of a star rating component for showing review results.\n\n{{< example id=\"default-rating-example\" class=\"flex justify-center\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
\n{{< /example >}}\n\n##### Rating with text\n\nIf you also want to show a text near the stars you can use this example as a reference.\n\n{{< example id=\"rating-text-example\" class=\"flex justify-center\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
4.95
\n
out of
\n
5
\n
\n{{< /example >}}\n\n##### Rating count\n\nAggregate more results by using this example to show the amount of reviews and the average score.\n\n{{< example id=\"rating-count-example\" class=\"flex justify-center\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Star sizes\n\nCheck out the different sizing options for the star review component from small, medium, and large.\n\n{{< example id=\"rating-star-sizes-example\" class=\"flex flex-col items-center\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n
\n{{< /example >}}\n\n##### Advanced rating\n\nThis 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).\n\n{{< example id=\"rating-advanced-example\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Score rating\n\nThis component can be used to break up a general rating score into multiple categories using progress bars.\n\n{{< example id=\"rating-score-example\" github=\"components/rating.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Rating comment\n\nUse 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.\n\n{{< example id=\"rating-comment-example\" github=\"components/rating.md\" show_dark=true >}}\n\n\n
\n \n
\n
Jese Leos
\n
\n
\n
\n \n \n \n \n \n
Thinking to buy another one!
\n
\n \n
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.
\n
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.
\n Read more\n \n\n{{< /example >}}\n\n##### Review content\n\nUse this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.\n\n{{< example id=\"rating-review-example\" github=\"components/rating.md\" show_dark=true >}}\n\n\n
\n
\n \n
\n
Jese Leos
\n
\n \n United States\n
\n
\n
\n
\n
Apartament with city view
\n
3 nights December 2021
\n
Family
\n
\n
\n
\n
\n
\n \n
Spotless, good appliances, excellent layout, host was genuinely nice and helpful.
\n
\n
8.7
\n
\n
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.
\n
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.
\n \n
\n\n{{< /example >}}\n\n#### Sidebar\n\nThe 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.\n\n##### Default sidebar\n\nUse this example to show a responsive list of menu items inside the sidebar with icons and labels.\n\n{{< example id=\"default-sidebar-example\" github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Multi-level menu\n\nUse 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.\n\n{{< example id=\"sidebar-multi-level-example\" github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Content separator\n\nSeparate the content inside the sidebar component by applying a border separator between the two menus.\n\n{{< example id=\"sidebar-separator-example\" github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### CTA button\n\nUse this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.\n\n{{< example id=\"sidebar-cta-button-example\" github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Logo branding\n\nShow the logo of your brand and link back to the homepage from the top part of the sidebar.\n\n{{< example id=\"sidebar-logo-example\" github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Sidebar with navbar\n\nUse this example to show a navbar together with a sidebar layout for your web application.\n\n{{< example id=\"sidebar-logo-example\" github=\"components/sidebar.md\" bodyClass=\"!p-0\" iframeHeight=\"640\" iframeMaxHeight=\"640\" show_dark=true >}}\n\n\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Off-canvas sidebar\n\nUse this example to show the navigation as an off-canvas drawer component when clicking on an element.\n\n{{< example id=\"drawer-navigation-example\" github=\"components/sidebar.md\" show_dark=true iframeHeight=\"640\" iframeMaxHeight=\"640\" skeletonPlaceholders=true >}}\n\n\n
\n{{< /example >}}\n\n##### More examples\n\nYou 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.\n\n##### Dashboard Layout\n\nThese 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.\n\n#### Skeleton\n\nUse 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.\n\nYou 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.\n\nYou can also animate the skeleton component by using the `.animate-pulse` utility class from Tailwind CSS.\n\n##### Default skeleton\n\nUse this example to show a placeholder when loading text content.\n\n{{< example id=\"default-skeleton-example\" github=\"components/skeleton.md\" show_dark=true >}}\n
\n \n \n \n \n \n \n Loading...\n
\n\n{{< /example >}}\n\n##### Image placeholder\n\nThis example can be used to show a placeholder when loading an image and text content.\n\n{{< example id=\"skeleton-image-example\" github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n \n
\n
\n \n \n \n \n \n \n
\n Loading...\n
\n\n{{< /example >}}\n\n##### Video placeholder\n\nUse this example to show a skeleton placeholder when loading video content.\n\n{{< example id=\"skeleton-video-example\" github=\"components/skeleton.md\" show_dark=true >}}\n\n
\n \n Loading...\n
\n{{< /example >}}\n\n##### Text placeholder\n\nUse this example to show a placeholder when loading longer pagraphs and headings.\n\n{{< example id=\"skeleton-text-example\" github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n Loading...\n
\n{{< /example >}}\n\n##### Card placeholder\n\nUse this example to show a placeholder when loading content inside a card.\n\n{{< example id=\"skeleton-card-example\" github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n \n
\n \n \n \n \n
\n \n
\n \n \n
\n
\n Loading...\n
\n{{< /example >}}\n\n##### Widget placeholder\n\nThis example can be used to show a placeholder of skeleton when fetching data for widgets and cards inside an application.\n\n{{< example id=\"skeleton-chart-example\" github=\"components/skeleton.md\" show_dark=true >}}\n
\n \n \n
\n \n \n \n \n \n \n \n
\n Loading...\n
\n{{< /example >}}\n\n##### List placeholder\n\nUse this example to show a placeholder when loading a list of items.\n\n{{< example id=\"skeleton-list-example\" github=\"components/skeleton.md\" show_dark=true >}}\n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n
\n
\n \n \n
\n \n
\n Loading...\n
\n{{< /example >}}\n\n##### Testimonial placeholder\n\nThis example can be used to show a skeleton placeholder when loading data for a testimonial section.\n\n{{< example id=\"skeleton-testimonial-example\" github=\"components/skeleton.md\" show_dark=true >}}\n
\n \n \n
\n \n \n \n
\n Loading...\n
\n{{< /example >}}\n\n##### Accessibility\n\nUse 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.\n\n#### Speed Dial\n\nGet 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.\n\nThis 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.\n\nMake sure that you have the Flowbite JS file included in your application by following our }}\">quickstart guide.\n\n##### Default speed dial\n\nTo 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.\n\nFurthermore, make sure that the trigger button element has the `data-dial-toggle=\"{targetElementId}\"` where the value is the ID of the target element.\n\n{{< example id=\"default-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n##### Square speed dial\n\nUse this example to make the trigger button's style square instead of a full circle using the `rounded-lg` utility class.\n\n{{< example id=\"square-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n##### Text inside button\n\nThis example can be used to show the descriptive text inside the button instead of a tooltip.\n\n{{< 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 >}}\n\n
\n
\n \n \n \n \n
\n \n
\n\n
\n
\n \n \n \n \n
\n \n
\n{{< /example >}}\n\n##### Text outside button\n\nUse this example to show the text of each button outside of the speed dial as an alternative style.\n\n{{< example id=\"speed-dial-text-outside-button-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n \n \n \n
\n \n
\n\n
\n
\n \n \n \n \n
\n \n
\n{{< /example >}}\n\n##### Dropdown menu\n\nThis example can be used to show a list of menu items instead of buttons when activating the speed dial.\n\n{{< example id=\"dropdown-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Alternative menu\n\nThis example can be used to show an alternative style when showing a list of menu items.\n\n{{< example id=\"dropdown-alternative-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Positioning\n\nThe positioning of the speed dial component relative to the body element can be easily done by using the positioning utility classes from Tailwind CSS.\n\n###### Top right\n\nUse the `top-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the top right side of the document body.\n\n{{< example id=\"top-right-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n
\n{{< /example >}}\n\n###### Bottom right\n\nUse the `bottom-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the bottom right side of the document body.\n\n{{< example id=\"bottom-right-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n###### Bottom left\n\nUse the `bottom-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the bottom left side of the document body.\n\n{{< example id=\"bottom-left-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n###### Top left\n\nUse the `top-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the top left side of the document body.\n\n{{< example id=\"top-left-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n \n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n
\n{{< /example >}}\n\n##### Alignment\n\nThe alignment of the speed dial menu items and buttons can be set using the flexbox utility classes from Tailwind CSS.\n\n###### Vertical\n\nThe default alignment of the menu items of the speed dial is vertical using the `flex-col` utility class.\n\n{{< example id=\"vertical-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n###### Horizontal\n\nHorizontally align the speed dial menu items by using the flexbox utility classes from Tailwind CSS.\n\n{{< example id=\"horizontal-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n##### Triggering\n\nUse 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.\n\n###### Hover\n\nThe default trigger type is hover for each speed dial component.\n\n{{< example id=\"hover-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n###### Click\n\nIf 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.\n\n{{< example id=\"click-speed-dial-example\" class=\"flex justify-center pt-24 h-80\" github=\"components/speed-dial.md\" show_dark=true >}}\n\n
\n
\n \n
\n Share\n \n
\n \n
\n Print\n \n
\n \n
\n Download\n \n
\n \n
\n Copy\n \n
\n
\n \n
\n{{< /example >}}\n\n##### JavaScript behaviour\n\nThe 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.\n\n###### Object parameters\n\nCreate 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n parentEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n This is the parent and main wrapping element of the speed dial component.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set a button as the trigger element for the speed dial.\n
\n
\n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n This is the element that is the list of menu items or buttons that will be toggled.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the trigger type and other options of the speed dial.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse the following options as the third parameter for the Speed Dial object to set the trigger type (hover or click).\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the speed dial choosing between hover|click|none.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the speed dial is hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the speed dial is shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the speed dial is toggled.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the methods from the Speed Dial object to programmatically show or hide the component from directly JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Speed Dial object to show the list of menu items or buttons.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Speed Dial object to hide the list of menu items or buttons.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Speed Dial object to toggle the visibility of the list of menu items or buttons.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a callback function when the dial has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a callback function when the dial has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a callback function when the dial visibility has been changed.\n
\n
\n \n
\n
\n\n###### Example\n\nUse following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Speed Dial object.\n\nThree arguments are required for the Speed Dial component, namely the parent element, trigger element, and the target element.\n\nFurthermore, you can also pass an object of options to set the trigger type and set the callback functions.\n\n```javascript\n// parent element wrapping the speed dial\nconst $parentEl = document.getElementById('dialParent');\n\n// the trigger element that can be clicked or hovered\nconst $triggerEl = document.getElementById('dialButton');\n\n// the content wrapping element of menu items or buttons\nconst $targetEl = document.getElementById('dialContent');\n\n// options with default values\nconst options = {\n triggerType: 'click',\n onHide: () => {\n console.log('speed dial is shown');\n },\n onShow: () => {\n console.log('speed dial is hidden');\n },\n onToggle: () => {\n console.log('speed dial is toggled');\n },\n};\n\n// instance options with default values\nconst instanceOptions = {\n id: 'dialContent',\n override: true\n};\n```\n\nCreate a new Speed Dial object based on the options above.\n\n```javascript\nimport { Dial } from 'flowbite';\n\n/*\n * $parentEl: required\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n * instanceOptions: optional\n */\nconst dial = new Dial($parentEl, $triggerEl, $targetEl, options, instanceOptions);\n```\n\nUse the `show`, `hide`, or `toggle` methods on the Speed Dial object to programmatically show and hide the speed dial component using JavaScript.\n\n```javascript\n// show the speed dial\ndial.show();\n\n// hide the speed dial\ndial.hide();\n\n// toggle the visibility of the speed dial\ndial.toggle();\n```\n\n###### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n```html\n
\n \n \n \n \n \n Share\n \n \n Share\n \n
\n \n \n \n \n \n Print\n \n \n Print\n \n
\n \n \n \n \n \n Download\n \n \n Download\n \n \n \n \n \n \n \n Copy\n \n \n Copy\n \n \n \n \n \n \n \n Open actions menu\n \n\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Speed Dial class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Dial } from 'flowbite';\nimport type { DialOptions, DialInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// parent element wrapping the speed dial\nconst $parentEl: HTMLElement = document.getElementById('dialParent');\n\n// the trigger element that can be clicked or hovered\nconst $triggerEl: HTMLElement = document.getElementById('dialButton');\n\n// the content wrapping element of menu items or buttons\nconst $targetEl: HTMLElement = document.getElementById('dialContent');\n\n// options with default values\nconst options: DialOptions = {\n triggerType: 'hover',\n onHide: () => {\n console.log('speed dial is shown');\n },\n onShow: () => {\n console.log('speed dial is hidden');\n },\n onToggle: () => {\n console.log('speed dial is toggled');\n },\n};\n\n// instance options with default values\nconst instanceOptions: InstanceOptions = {\n id: 'dialContent',\n override: true\n};\n\n/*\n * $parentEl: required\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n */\nconst dial: DialInterface = new Dial($parentEl, $triggerEl, $targetEl, options);\n\n// show the speed dial\ndial.show();\n```\n\n#### Spinner\n\nThe 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.\n\n##### Default spinner\n\nUse the following SVG element with the `animate-spin` animation class to show a loading animation:\n\n{{< example id=\"default-spinner-example\" github=\"components/spinner.md\" show_dark=true >}}\n
\n \n Loading...\n
\n{{< /example >}}\n\n##### Colors\n\nYou can change the colors of the spinner element using the fill and color utility classes from Tailwind CSS:\n\n- use `fill-{*}` to change the main colors\n- use `text-{*}` to change the background\n\n{{< example id=\"spinner-colors-example\" github=\"components/spinner.md\" class=\"flex items-center space-x-2 rtl:space-x-reverse\" show_dark=true >}}\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n{{< /example >}}\n\n##### Sizes\n\nChange the size of the spinner component using the `h-{*}` and `w-{*}` utility classes from Tailwind CSS:\n\n{{< example id=\"spinner-sizes-example\" github=\"components/spinner.md\" class=\"flex items-center space-x-2 rtl:space-x-reverse\" show_dark=true >}}\n\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n
\n \n Loading...\n
\n{{< /example >}}\n\n##### Alignment\n\nBecause 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:\n\n{{< example id=\"spinner-alignment-example\" github=\"components/spinner.md\" show_dark=true >}}\n\n
\n
\n \n Loading...\n
\n
\n
\n
\n \n Loading...\n
\n
\n
\n
\n \n Loading...\n
\n
\n{{< /example >}}\n\n##### Spinner with card\n\nUse this animated loading indicator when content inside of a card is still loading.\n\n{{< example id=\"spinner-card-example\" github=\"components/spinner.md\" show_dark=true >}}\n\n
\n
Noteworthy technology acquisitions 2021
\n
Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.
\n
\n \n Loading...\n
\n
\n{{< /example >}}\n\n##### Progress spinner\n\nUse this animated spinner component inside a list of steppers elements.\n\n{{< example id=\"spinner-progress-example\" github=\"components/spinner.md\" show_dark=true >}}\n\n
Converting your image:
\n
\n
\n \n Upload your file to our website\n
\n
\n \n Choose your file format\n
\n
\n
\n \n Loading...\n
\n Preparing your file\n
\n
\n{{< /example >}}\n\n##### Buttons\n\nThe spinner component can also be used inside elements such as buttons when submitting form data:\n\n{{< example id=\"spinner-buttons-example\" github=\"components/spinner.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Accessibillity\n\nUse 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.\n\nThe `role=\"status\"` attribute on the main `
` wrapper is used to indicate a status message to assistive technologies such as screen readers.\n\n#### Stepper\n\nThe 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.\n\nThere 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.\n\n##### Default stepper\n\nUse this example to show a list of form steps with a number and title of the step in a horizontal alignment.\n\n{{< example id=\"default-stepper-example\" github=\"components/stepper.md\" show_dark=true >}}\n\n\n
\n \n \n Personal Info\n \n
\n
\n \n 2\n Account Info\n \n
\n
\n 3\n Confirmation\n
\n\n{{< /example >}}\n\n##### Progress stepper\n\nThis 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.\n\n{{< example id=\"progress-stepper-example\" github=\"components/stepper.md\" show_dark=true >}}\n\n\n
\n \n \n \n
\n
\n \n \n \n
\n
\n \n \n \n
\n\n{{< /example >}}\n\n##### Detailed stepper\n\nUse this example to show an extra subtitle next to the number and the title of the steppper component based on an ordered list element.\n\n{{< example id=\"detailed-stepper-example\" github=\"components/stepper.md\" show_dark=true >}}\n\n
\n \n 1\n \n \n
User info
\n
Step details here
\n \n
\n
\n \n 2\n \n \n
Company info
\n
Step details here
\n \n
\n
\n \n 3\n \n \n
Payment info
\n
Step details here
\n \n
\n\n\n{{< /example >}}\n\n##### Vertical stepper\n\nThis example can be used to show a list of steps aligned vertically where you can indicate the completed, currently active, and the unexplored steps.\n\n{{< example id=\"vertical-stepper-example\" github=\"components/stepper.md\" show_dark=true >}}\n\n
\n
\n
\n User info\n
1. User info
\n \n
\n
\n
\n
\n
\n
\n Account info\n
2. Account info
\n \n
\n
\n
\n
\n
\n
\n Social accounts\n
3. Social accounts
\n \n
\n
\n
\n
\n
\n
\n Review\n
4. Review
\n
\n
\n
\n
\n
\n
\n Confirmation\n
5. Confirmation
\n
\n
\n
\n\n{{< /example >}}\n\n##### Breadcrumb stepper\n\nThis 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.\n\n{{< example id=\"breadcrumb-stepper-example\" github=\"components/stepper.md\" show_dark=true >}}\n\n
\n \n 1\n \n Personal Info\n \n
\n
\n \n 2\n \n Account Info\n \n
\n
\n \n 3\n \n Review\n
\n\n\n{{< /example >}}\n\n##### Timeline stepper\n\nUse this example to show the number of steps inside a timeline component using icons, title, and subtitle for each step.\n\n{{< example id=\"timeline-stepper-example\" github=\"components/stepper.md\" class=\"p-4\" show_dark=true >}}\n\n \n
\n \n \n \n
Personal Info
\n
Step details here
\n
\n
\n \n \n \n
Account Info
\n
Step details here
\n
\n
\n \n \n \n
Review
\n
Step details here
\n
\n
\n \n \n \n
Confirmation
\n
Step details here
\n
\n\n{{< /example >}}\n\n##### Stepper with form\n\nUse this example to show the stepper component next to a form layout and change the content based on which currently step your are completing.\n\n{{< example id=\"form-stepper-example\" github=\"components/stepper.md\" show_dark=true >}}\n\n\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n
\n
\n \n
\n
\n\n\n{{< /example >}}\n\n#### Tables\n\nThe 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.\n\nGet started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite.\n\n##### Default table\n\nUse the following example of a responsive table component to show multiple rows and columns of text data.\n\n{{< example id=\"default-table-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Color\n
\n
\n Category\n
\n
\n Price\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n Silver\n
\n
\n Laptop\n
\n
\n $2999\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n White\n
\n
\n Laptop PC\n
\n
\n $1999\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n Black\n
\n
\n Accessories\n
\n
\n $99\n
\n
\n \n
\n
\n{{< /example >}}\n\n##### Highlight\n\nAccentuate certain elements inside the table such as the rows, columns or data cells based on your needs.\n\n###### Striped rows\n\nUse this example to increase the readability of the data sets by alternating the background color of every second table row.\n\n{{< example id=\"table-striped-rows-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n###### Striped columns\n\nUse this example to increase the readability of the table cells by alternating the background color of every second table column.\n\n{{< example id=\"table-striped-columns-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Color\n
\n
\n Category\n
\n
\n Price\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n Silver\n
\n
\n Laptop\n
\n
\n $2999\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n White\n
\n
\n Laptop PC\n
\n
\n $1999\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n Black\n
\n
\n Accessories\n
\n
\n $99\n
\n
\n
\n
\n Google Pixel Phone\n
\n
\n Gray\n
\n
\n Phone\n
\n
\n $799\n
\n
\n
\n
\n Apple Watch 5\n
\n
\n Red\n
\n
\n Wearables\n
\n
\n $999\n
\n
\n \n
\n
\n{{< /example >}}\n\n###### Hover state\n\nUse 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.\n\n{{< example id=\"table-hover-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Table layout\n\nUse the following examples of table layouts to show the head, foot or caption of the table.\n\n###### Table head (sortable)\n\nThis example can be used to show the head of the table component with sortable icons.\n\n{{< example id=\"table-head-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n###### Table foot\n\nUse this example where the `` HTML element can be used in conjunction with the head and caption of the table component.\n\n{{< example id=\"table-foot-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Qty\n
\n
\n Price\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n 1\n
\n
\n $2999\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n 1\n
\n
\n $1999\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n 1\n
\n
\n $99\n
\n
\n \n \n
\n
Total
\n
3
\n
21,000
\n
\n \n
\n
\n{{< /example >}}\n\n###### Table caption\n\nImprove accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.\n\n{{< example id=\"table-caption-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n
\n Our products\n
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.
\n{{< /example >}}\n\n##### Table styles\n\nGet started with the following table styles and choose the one that best fits your application.\n\n###### Without border\n\nUse this example of a table component without any border between the table cells.\n\n{{< example id=\"table-borderless-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n
\n \n
\n
\n Product name\n
\n
\n Color\n
\n
\n Category\n
\n
\n Price\n
\n
\n \n \n
\n
\n Apple MacBook Pro 17\"\n
\n
\n Silver\n
\n
\n Laptop\n
\n
\n $2999\n
\n
\n
\n
\n Microsoft Surface Pro\n
\n
\n White\n
\n
\n Laptop PC\n
\n
\n $1999\n
\n
\n
\n
\n Magic Mouse 2\n
\n
\n Black\n
\n
\n Accessories\n
\n
\n $99\n
\n
\n \n
\n
\n{{< /example >}}\n\n###### Table with shadow\n\nUse this example to apply a shadow-sm border to the table component.\n\n{{< example id=\"table-shadow-example\" github=\"components/tables.md\" class=\"pb-4 overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Overflow scrolling\n\nUse this example where we apply `overflow-x-auto` to enable horizontal scrolling if the content inside the table overflows that maximum width.\n\n{{< example id=\"table-scroll-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Table search\n\nUse this example to show a search bar that can be used to query through data inside the table component.\n\n{{< example id=\"table-search-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n\n##### Table filter\n\nUse this example with a filter bar to select certain data sets inside the table based on the options that you've selected.\n\n{{< example id=\"table-filter-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Table pagination\n\nPaginate the table data when using larger data sets based on any given amount of results per page.\n\n{{< example id=\"table-pagination-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Checkbox selection\n\nCheckboxes can be used inside table data rows to select multiple data sets and apply a bulk action.\n\n{{< example id=\"table-checkbox-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n\n##### Table with users\n\nUse this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.\n\n{{< example id=\"table-users-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Table with products\n\nGet 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.\n\n{{< example id=\"table-products-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n\n##### Table with modal\n\nUse this example to show a modal with a form where you can edit table data by clicking on one of the rows.\n\n{{< example id=\"table-modal-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true iframeHeight=\"640\" >}}\n
\n{{< /example >}}\n\n##### Comparison table\n\nUse this example to compare values inside a table such as a pricing card.\n\n{{< example id=\"table-comparison-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Table colors\n\nApply any color to the table element by using the `bg-{color}` and `text-{color}` color class variants from Tailwind CSS.\n\n{{< example id=\"table-colors-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n###### Striped rows color\n\nUse this example to apply a different color to every second row inside the table.\n\n{{< example id=\"table-striped-rows-colors-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n###### Striped columns color\n\nUse this example to apply a different color to every second column inside a colored table.\n\n{{< example id=\"table-striped-columns-colors-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n###### Hover state\n\nUse this example to apply a different color to every second row inside the table with a colored background.\n\n{{< example id=\"table-striped-colors-hover-example\" github=\"components/tables.md\" class=\"overflow-hidden\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### More examples\n\nYou can check out more table component examples from the following resources from Flowbite Blocks:\n\n- [Advanced tables](https://flowbite.com/blocks/application/advanced-tables/)\n- [Table headers](https://flowbite.com/blocks/application/table-headers/)\n- [Table footers](https://flowbite.com/blocks/application/table-footers/)\n- [Pricing tables](https://flowbite.com/blocks/marketing/pricing/)\n\n#### Tabs\n\nThe 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.\n\n##### Default tabs\n\nUse the following default tabs component example to show a list of links that the user can navigate from on your website.\n\n{{< example id=\"default-tabs-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Tabs with underline\n\nUse this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.\n\n{{< example id=\"tabs-underline-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Tabs with icons\n\nThis is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.\n\n{{< example id=\"tabs-icons-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Pills tabs\n\nIf you want to use pills as a style for the tabs component you can do so by using this example.\n\n{{< example id=\"tabs-pill-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Vertical tabs\n\nUse this example to show a vertically aligned set of tabs on the left side of the page.\n\n{{< example id=\"tabs-vertical-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.
\n
The tab JavaScript swaps classes to control the content visibility and styling.
\n
\n
\n\n{{< /example >}}\n\n\n##### Full width tabs\n\nIf 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.\n\n{{< example id=\"tabs-full-width-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
\n\n##### Interactive tabs\n\nUse 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.\n\nEach 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.\n\nUse 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.\n\nApply 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.\n\nYou can use multiple tab components on a single page but make sure that the id's are different.\n\n{{< example id=\"tabs-interactive-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n{{< /example >}}\n\n##### Active tab style\n\nUse 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.\n\n{{< example id=\"tabs-interactive-active-example\" github=\"components/tabs.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n
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.
\n
\n
\n{{< /example >}}\n\n##### JavaScript behaviour\n\nThe **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.\n\n###### Object parameters\n\nCreate a new Tabs object with parameters such as an array of the tab and content elements.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n tabsElement\n
\n
\n Element\n
\n
\n Required\n
\n
\n Parent HTML element of the tabs component.\n
\n
\n
\n
\n items\n
\n
\n Array\n
\n
\n Required\n
\n
\n Array of the tab objects including the id, trigger element, and the content element.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n An object of options for the appearances of the tabs and to use callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse the following options as the second parameter for the Tabs object to set the appearance of the active tab elements and use callback functions.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n defaultTabId\n
\n
\n String\n
\n
\n Set the currently active tab element based on the ID.\n
\n
\n
\n
\n activeClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS class names to apply to the active tab element.\n
\n
\n
\n
\n inactiveClasses\n
\n
\n String\n
\n
\n Set a string of Tailwind CSS class names to apply to the inactive tab elements.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the a new tab has been shown.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the methods from the Tabs object to programmatically change the current active tab using JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show(id)\n
\n
\n Use the show function on the Tab object to change the current active tab element.\n
\n
\n
\n
\n getTab(id)\n
\n
\n Return the tab element based on the ID.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function whenever a tab has been shown.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck out the following example to learn how to initialize and manipulate a Tabs object in JavaScript.\n\nFirst 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.\n\n```javascript\nconst tabsElement = document.getElementById('tabs-example');\n\n// create an array of objects with the id, trigger element (eg. button), and the content element\nconst tabElements = [\n {\n id: 'profile',\n triggerEl: document.querySelector('#profile-tab-example'),\n targetEl: document.querySelector('#profile-example'),\n },\n {\n id: 'dashboard',\n triggerEl: document.querySelector('#dashboard-tab-example'),\n targetEl: document.querySelector('#dashboard-example'),\n },\n {\n id: 'settings',\n triggerEl: document.querySelector('#settings-tab-example'),\n targetEl: document.querySelector('#settings-example'),\n },\n {\n id: 'contacts',\n triggerEl: document.querySelector('#contacts-tab-example'),\n targetEl: document.querySelector('#contacts-example'),\n },\n];\n\n// options with default values\nconst options = {\n defaultTabId: 'settings',\n activeClasses:\n 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500',\n inactiveClasses:\n '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',\n onShow: () => {\n console.log('tab is shown');\n },\n};\n\n// instance options with default values\nconst instanceOptions = {\n id: 'tabs-example',\n override: true\n};\n```\n\nCreate a new Tabs object based on the parameters we've previously set.\n\n```javascript\nimport { Tabs } from 'flowbite';\n\n/*\n* tabsElement: parent element of the tabs component (required)\n* tabElements: array of tab objects (required)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst tabs = new Tabs(tabsElement, tabElements, options, instanceOptions);\n```\n\nLastly, 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.\n\n```javascript\n// shows another tab element\ntabs.show('dashboard');\n\n// get the tab object based on ID\ntabs.getTab('contacts');\n\n// get the current active tab object\ntabs.getActiveTab();\n```\n\n###### HTML Markup\n\nYou can use this HTML code as an example for the JavaScript code from above.\n\n```html\n
\n
\n
\n \n Profile\n \n
\n
\n \n Dashboard\n \n
\n
\n \n Settings\n \n
\n
\n \n Contacts\n \n
\n
\n
\n
\n \n
\n This is some placeholder content the\n Profile tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n
\n \n
\n This is some placeholder content the\n Dashboard tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n \n \n
\n This is some placeholder content the\n Settings tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n \n \n
\n This is some placeholder content the\n Contacts tab's associated content. Clicking another tab will toggle the visibility of this one for\n the next. The tab JavaScript swaps classes to control the content\n visibility and styling.\n
\n \n\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Tabs class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Tabs } from 'flowbite';\nimport type { TabsOptions, TabsInterface, TabItem } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\nconst tabsElement: HTMLElement = document.getElementById('tabs-example');\n\n// create an array of objects with the id, trigger element (eg. button), and the content element\nconst tabElements: TabItem[] = [\n {\n id: 'profile',\n triggerEl: document.querySelector('#profile-tab-example'),\n targetEl: document.querySelector('#profile-example'),\n },\n {\n id: 'dashboard',\n triggerEl: document.querySelector('#dashboard-tab-example'),\n targetEl: document.querySelector('#dashboard-example'),\n },\n {\n id: 'settings',\n triggerEl: document.querySelector('#settings-tab-example'),\n targetEl: document.querySelector('#settings-example'),\n },\n {\n id: 'contacts',\n triggerEl: document.querySelector('#contacts-tab-example'),\n targetEl: document.querySelector('#contacts-example'),\n },\n];\n\n// options with default values\nconst options: TabsOptions = {\n defaultTabId: 'settings',\n activeClasses:\n 'text-blue-600 hover:text-blue-600 dark:text-blue-500 dark:hover:text-blue-400 border-blue-600 dark:border-blue-500',\n inactiveClasses:\n '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',\n onShow: () => {\n console.log('tab is shown');\n },\n};\n\n// instance options with default values\nconst instanceOptions: InstanceOptions = {\n id: 'tabs-example',\n override: true\n};\n\n/*\n* tabsElement: parent element of the tabs component (required)\n* tabElements: array of tab elements (required)\n* options (optional)\n* instanceOptions (optional)\n*/\nconst tabs: TabsInterface = new Tabs(tabsElement, tabElements, options, instanceOptions);\n\n// open tab item based on id\ntabs.show('contacts');\n```\n\n#### Timeline\n\nThe 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.\n\n##### Default timeline\n\nUse 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.\n\nOptionally, you can also add a CTA button to any of the timeline elements.\n\n{{< example id=\"default-timeline-example\" github=\"components/timeline.md\" show_dark=true >}}\n \n
\n \n \n
Application UI code in Tailwind CSS
\n
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
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.
\n
\n
\n \n \n
E-Commerce UI code in Tailwind CSS
\n
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
\n
\n\n\n{{< /example >}}\n\n##### Vertical timeline\n\nUse this vertical timeline component with icons and badges to show a more advanced set of data.\n\n{{< example id=\"timeline-vertical-example\" github=\"components/timeline.md\" show_dark=true >}}\n \n
\n \n \n \n
Flowbite Application UI v2.0.0 Latest
\n \n
Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
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.
\n
\n
\n \n \n \n
Flowbite Library v1.2.2
\n \n
Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
\n
\n\n\n{{< /example >}}\n\n##### Stepper timeline\n\nUse this horizontally aligned timeline component to show a series of data in a chronological order.\n\n{{< example id=\"timeline-stepper-example\" github=\"components/timeline.md\" show_dark=true >}}\n\n
\n
\n
\n \n
\n \n
\n
\n
Flowbite Library v1.0.0
\n \n
Get started with dozens of web components and interactive elements.
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Flowbite Library v1.2.0
\n \n
Get started with dozens of web components and interactive elements.
\n
\n
\n
\n
\n
\n \n
\n \n
\n
\n
Flowbite Library v1.3.0
\n \n
Get started with dozens of web components and interactive elements.
\n
\n
\n\n\n{{< /example >}}\n\n##### Activity log\n\nThis 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.\n\n{{< example id=\"timeline-activity-log-example\" github=\"components/timeline.md\" show_dark=true >}}\n \n
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.
\n
\n
\n
\n \n \n \n
\n \n
Jese Leos has changed Pricing page task status to Finished
\n
\n
\n\n\n{{< /example >}}\n\n##### Grouped timeline\n\nUse 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.\n\n{{< example id=\"timeline-grouped-example\" github=\"components/timeline.md\" show_dark=true >}}\n
\n\n{{< /example >}}\n\n#### Toast\n\nThe 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.\n\n##### Default toast\n\nUse 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.\n\n{{< example id=\"default-toast-example\" class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n \n Fire icon\n
\n
Set yourself free.
\n \n
\n\n{{< /example >}}\n\n##### Colors\n\nUse these contextual toast components to show success, danger, or warning alert messages to your users.\n\n{{< example id=\"toast-colors-example\" class=\"flex flex-col items-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n \n Check icon\n
\n
Item moved successfully.
\n \n
\n
\n
\n \n Error icon\n
\n
Item has been deleted.
\n \n
\n
\n
\n \n Warning icon\n
\n
Improve password difficulty.
\n \n
\n\n{{< /example >}}\n\n##### Simple toast\n\nThis component can be used to show simple messages and notifications without the use of a close button.\n\n{{< example id=\"toast-simple-example\" class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n \n
Message sent successfully.
\n
\n{{< /example >}}\n\n##### Undo button\n\nUse this toast component to also show an \"undo\" button to reverse the action of the user.\n\n{{< example id=\"toast-undo-example\" class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n\n{{< /example >}}\n\n##### Toast message\n\nThis component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.\n\n{{< example id=\"toast-message-example\" class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n \n
\n Jese Leos\n
Hi Neil, thanks for sharing your thoughts regarding Flowbite.
\n{{< /example >}}\n\n##### Push notification\n\nThis 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.\n\n{{< example id=\"toast-push-example\" class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n
\n New notification\n \n
\n
\n
\n \n \n \n Message icon\n \n
\n
\n
Bonnie Green
\n
commented on your photo
\n a few seconds ago \n
\n
\n
\n\n{{< /example >}}\n\n##### Interactive toast\n\nUse 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.\n\n{{< example id=\"toast-interactive-example\" class=\"flex justify-center\" github=\"components/toast.md\" show_dark=true >}}\n\n
\n\n{{< /example >}}\n\n##### Positioning\n\nUse the `fixed` class from Tailwind CSS to position these toast components relative to the main content wrapper element from your document:\n\n- Top left: `fixed top-5 left-5`\n- Top right: `fixed top-5 right-5`\n- Bottom left: `fixed bottom-5 left-5`\n- Bottom right: `fixed bottom-5 right-5`\n\n{{< example id=\"toast-positioning-example\" github=\"components/toast.md\" class=\"relative h-56\" show_dark=true >}}\n\n
\n
Top left positioning.
\n
\n
\n
Top right positioning.
\n
\n
\n
Bottom right positioning.
\n
\n
\n
Bottom left positioning.
\n
\n{{< /example >}}\n\nYou can set your own distance for the `top-*|right-*|bottom-*|left-*` positioning classes.\n\n##### JavaScript behaviour\n\nPlease check out the }}#javascript-behaviour\">Dismiss object documentation to learn how to programmatically work with the toast component directly from JavaScript.\n\n#### Tooltip\n\nFlowbite 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.\n\nBefore continuing, make sure that you have the }}\">Flowbite JavaScript file included in your project in order to make the tooltip component work.\n\n##### Default tooltip example\n\nTo 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.\n\n{{< example id=\"default-tooltip-example\" class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n##### Tooltip styles\n\nYou 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.\n\n{{< example id=\"tooltip-styles-example\" class=\"flex justify-center pt-8 \" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n\n\n\n
\n Tooltip content\n \n
\n\n\n\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n##### Placement\n\nThe 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.\n\n{{< example id=\"tooltip-placement-example\" class=\"flex flex-wrap justify-center py-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n\n\n\n
\n Tooltip on top\n \n
\n\n\n\n\n\n
\n Tooltip on right\n \n
\n\n\n\n\n\n
\n Tooltip on bottom\n \n
\n\n\n\n\n\n
\n Tooltip on left\n \n
\n{{< /example >}}\n\n##### Triggering\n\nYou 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`.\n\n{{< example id=\"tooltip-triggering-example\" class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n\n\n\n
\n Tooltip content\n \n
\n\n\n\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n##### Animation\n\nYou 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.\n\n{{< example id=\"tooltip-animation-example\" class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n
\n Tooltip content\n \n
\n{{< /example >}}\n\n##### Disable arrow\n\nYou can also disable the tooltip arrow by not including the `data-popper-arrow` element.\n\n{{< example id=\"tooltip-disable-arrow-example\" class=\"flex justify-center pt-8\" github=\"components/tooltips.md\" show_dark=true >}}\n\n\n
\n Tooltip content\n
\n{{< /example >}}\n\n##### JavaScript behaviour\n\nThe **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.\n\n###### Object parameters\n\nInitialize 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.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Apply the tooltip content element to show and hide it either using the methods or the hover or click status of the trigger element.\n
\n
\n
\n
\n triggerEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Set an element to trigger the tooltip when clicking or hovering (ie. a button, text).\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Use the options parameter to set the positioning of the tooltip element, trigger type, offsets, and more.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n placement\n
\n
\n String\n
\n
\n Set the position of the tooltip element relative to the trigger element choosing from top|right|bottom|left.\n
\n
\n
\n
\n triggerType\n
\n
\n String\n
\n
\n Set the event type that will trigger the tooltip content choosing between hover|click|none.\n
\n
\n
\n
\n onHide\n
\n
\n Function\n
\n
\n Set a callback function when the tooltip is hidden.\n
\n
\n
\n
\n onShow\n
\n
\n Function\n
\n
\n Set a callback function when the tooltip is shown.\n
\n
\n
\n
\n onToggle\n
\n
\n Function\n
\n
\n Set a callback function when the tooltip visibility is toggled.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the methods from the Tooltip object to programmatically show or hide the tooltip from JavaScript.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n show()\n
\n
\n Use this method on the Tooltip object to show the tooltip content.\n
\n
\n
\n
\n hide()\n
\n
\n Use this method on the Tooltip object to hide the tooltip content.\n
\n
\n
\n
\n toggle()\n
\n
\n Use this method on the Tooltip object to toggle the visibility of the tooltip content.\n
\n
\n
\n
\n updateOnShow(callback)\n
\n
\n Use this method to set a custom callback function when the tooltip has been shown.\n
\n
\n
\n
\n updateOnHide(callback)\n
\n
\n Use this method to set a custom callback function when the tooltip has been hidden.\n
\n
\n
\n
\n updateOnToggle(callback)\n
\n
\n Use this method to set a custom callback function when the tooltip visibility has been toggled.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Tooltip object.\n\nFirst of all, set the target element as the tooltip itself and the trigger element which can be a button or text element.\n\nAfter that you can also set the options object to change the placement and trigger type of the tooltip, alongside with the callback functions.\n\n```javascript\n// set the tooltip content element\nconst $targetEl = document.getElementById('tooltipContent');\n\n// set the element that trigger the tooltip using hover or click\nconst $triggerEl = document.getElementById('tooltipButton');\n\n// options with default values\nconst options = {\n placement: 'bottom',\n triggerType: 'hover',\n onHide: () => {\n console.log('tooltip is shown');\n },\n onShow: () => {\n console.log('tooltip is hidden');\n },\n onToggle: () => {\n console.log('tooltip is toggled');\n },\n};\n\n\n// instance options with default values\nconst instanceOptions = {\n id: 'tooltipContent',\n override: true\n};\n```\n\nCreate a new Tooltip object based on the options above.\n\n```javascript\nimport { Tooltip } from 'flowbite';\n\n/*\n * $targetEl: required\n * $triggerEl: required\n * options: optional\n */\nconst tooltip = new Tooltip($targetEl, $triggerEl, options, instanceOptions);\n```\n\nUse the `show` and `hide` methods on the Tooltip object to programmatically show and hide the tooltip element using JavaScript.\n\n```javascript\n// show the tooltip\ntooltip.show();\n\n// hide the tooltip\ntooltip.hide();\n\n// toggle the tooltip\ntooltip.toggle();\n\n// destroy tooltip object (removes event listeners and off-canvas Popper.js)\ntooltip.destroy();\n\n// re-initialize tooltip object\ntooltip.init();\n```\n\n###### HTML Markup\n\nUse the following HTML code for the JavaScript example above.\n\n```html\n\n Default tooltip\n\n\n Tooltip content\n \n\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the Tooltip class, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { Tooltip } from 'flowbite';\nimport type { TooltipOptions, TooltipInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the tooltip content element\nconst $targetEl: HTMLElement = document.getElementById('tooltipContent');\n\n// set the element that trigger the tooltip using hover or click\nconst $triggerEl: HTMLElement = document.getElementById('tooltipButton');\n\n// options with default values\nconst options: TooltipOptions = {\n placement: 'top',\n triggerType: 'hover',\n onHide: () => {\n console.log('tooltip is shown');\n },\n onShow: () => {\n console.log('tooltip is hidden');\n },\n onToggle: () => {\n console.log('tooltip is toggled');\n },\n};\n\n// instance options with default values\nconst instanceOptions: InstanceOptions = {\n id: 'tooltipContent',\n override: true\n};\n\n/*\n * targetEl: required\n * triggerEl: required\n * options: optional\n */\nconst tooltip: TooltipInterface = new Tooltip($targetEl, $triggerEl, options, instanceOptions);\n\n// show the tooltip\ntooltip.show();\n```\n\n#### Typography\n\nGet 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.\n\nYou can check out this [live demo](https://flowbite.com/plugins/typography/) to see how content inside an article will render like.\n\n##### Getting started\n\nMake sure that you have both [Node.js](https://nodejs.org/) and [Tailwind CSS](https://tailwindcss.com/) already installed in your project.\n\n1. Install the Flowbite Typography plugin via NPM:\n\n```bash\nnpm i -D flowbite-typography\n```\n\n2. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:\n\n```javascript\n@plugin \"flowbite-typography\";\n```\n\nAlternatively you can do the same but in your `tailwind.config.js` file:\n\n```javascript\n// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('flowbite-typography'),\n // ...\n ],\n}\n```\n\nNow you can go ahead and use the new formatting classes from the Flowbite Typography plugin.\n\n##### Basic usage\n\nOnce 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.\n\nAll 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.\n\n```html\n\n
Prototyping from A to Z: best practices for successful prototypes
\n
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.
\n
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.
\n
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.
\n \n ...\n\n
When does design come in handy?
\n
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
\n \n
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;
\n
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;
\n
Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
\n
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.
\n \n\n```\n\nYou can also set the `lg:format-lg` class to set increase font sizes and spacings for larger viewport devices.\n\n##### Link colors\n\nYou can update the default blue link color to anything you'd like by setting the `format-{color}` class:\n\n```html\n\n
Prototyping from A to Z: best practices for successful prototypes
\n
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.
\n
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.
\n
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.
\n\n```\n##### Dark mode\n\nEnable dark mode for the typography by using the `dark:format-invert` class on the article wrapper element:\n\n```html\n\n
The content inside this article will invert when switching to dark mode
\n
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.
\n
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.
\n
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.
\n \n ...\n\n
When does design come in handy?
\n
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
\n \n
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;
\n
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;
\n
Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
\n
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.
\n \n\n```\n\n##### Max width\n\nOverride the default maximum width by setting a custom `max-w-{size}` class next to the `format` class:\n\n```html\n\n
Prototyping from A to Z: best practices for successful prototypes
\n
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.
\n
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.
\n
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.
\n\n```\n\n##### Disable format\n\nIf you want to disable formatting inside the typography content you can use the `not-format` class:\n\n```html\n\n
The content inside this article will invert when switching to dark mode
\n
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.
\n
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.
\n
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.
\n \n ...\n\n \n
\n
When does design come in handy?
\n
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:
\n \n
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;
\n
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;
\n
Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
\n
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.
\n \n
\n\n```\n\n##### Options\n\nExtend the plugin's options inside the Tailwind configuration file to set your own colors, class name, and more.\n\n###### Custom colors\n\nYou can set your own colors by extending the typography plugin inside the `tailwind.config.js` file:\n\n```javascript\nmodule.exports = {\n theme: {\n extend: {\n typography: ({ theme }) => ({\n orange: {\n css: {\n '--tw-format-body': theme('colors.orange[500]'),\n '--tw-format-headings': theme('colors.orange[900]'),\n '--tw-format-lead': theme('colors.orange[500]'),\n '--tw-format-links': theme('colors.orange[600]'),\n '--tw-format-bold': theme('colors.orange[900]'),\n '--tw-format-counters': theme('colors.orange[500]'),\n '--tw-format-bullets': theme('colors.orange[500]'),\n '--tw-format-hr': theme('colors.orange[200]'),\n '--tw-format-quotes': theme('colors.orange[900]'),\n '--tw-format-quote-borders': theme('colors.orange[300]'),\n '--tw-format-captions': theme('colors.orange[700]'),\n '--tw-format-code': theme('colors.orange[900]'),\n '--tw-format-code-bg': theme('colors.orange[50]'),\n '--tw-format-pre-code': theme('colors.orange[100]'),\n '--tw-format-pre-bg': theme('colors.orange[900]'),\n '--tw-format-th-borders': theme('colors.orange[300]'),\n '--tw-format-td-borders': theme('colors.orange[200]'),\n '--tw-format-th-bg': theme('colors.orange[50]'),\n '--tw-format-invert-body': theme('colors.orange[200]'),\n '--tw-format-invert-headings': theme('colors.white'),\n '--tw-format-invert-lead': theme('colors.orange[300]'),\n '--tw-format-invert-links': theme('colors.white'),\n '--tw-format-invert-bold': theme('colors.white'),\n '--tw-format-invert-counters': theme('colors.orange[400]'),\n '--tw-format-invert-bullets': theme('colors.orange[600]'),\n '--tw-format-invert-hr': theme('colors.orange[700]'),\n '--tw-format-invert-quotes': theme('colors.pink[100]'),\n '--tw-format-invert-quote-borders': theme('colors.orange[700]'),\n '--tw-format-invert-captions': theme('colors.orange[400]'),\n '--tw-format-invert-code': theme('colors.white'),\n '--tw-format-invert-pre-code': theme('colors.orange[300]'),\n '--tw-format-invert-pre-bg': 'rgb(0 0 0 / 50%)',\n '--tw-format-invert-th-borders': theme('colors.orange[600]'),\n '--tw-format-invert-td-borders': theme('colors.orange[700]'),\n '--tw-format-invert-th-bg': theme('colors.orange[700]'),\n },\n },\n }),\n },\n },\n plugins: [\n require('flowbite-typography'),\n // ...\n ],\n}\n```\n\nNow you can use the `format-red` class and apply these styles.\n\n###### Wrapper class\n\nChange the default `format` class to your own choosing by updating the `tailwind.config.js` file:\n\n```javascript\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('flowbite-typography')({\n className: 'custom-class',\n }),\n ]\n ...\n}\n```\n\n###### Custom CSS\n\nYou can also customize the default CSS by extending the `css` key value pair from the Tailwind configuration file:\n\n```javascript\nmodule.exports = {\n theme: {\n extend: {\n typography: {\n DEFAULT: {\n css: {\n color: '#666',\n a: {\n color: '#3182ce',\n '&:hover': {\n color: '#2c5282',\n },\n },\n },\n },\n },\n },\n },\n plugins: [\n require('flowbite-typography'),\n // ...\n ],\n}\n```\n\n##### Blog templates\n\nYou can check out the following [blog template](https://flowbite.com/blocks/publisher/blog-templates/) layouts from Flowbite Blocks that use the Typography plugin.\n\n#### Video\n\nGet 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.\n\n##### Video player\n\nUse 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.\n\n{{< example id=\"default-video-example\" github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Autoplay\n\nUse the `autoplay` attribute on the video component to automatically start the video when the page has been loaded.\n\n{{< example id=\"video-autoplay-example\" github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Muted\n\nUse the `muted` attribute together with the `autoplay` option to start the video while the sound is muted.\n\n{{< example id=\"video-muted-example\" github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Sizes\n\nSet the width and height of the video component using the `w-{size}` and `h-{size}` utility classes from Tailwind CSS.\n\n###### Width\n\nUse the `w-{size}` class to set the width of the video component.\n\n{{< example id=\"video-width-example\" github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Height\n\nUse the `h-{size}` class to set the height of the video player.\n\n{{< example id=\"video-height-example\" github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Responsive\n\nUse the following example to make the video responsive across all devices and viewports.\n\n{{< example id=\"video-responsive-example\" github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Custom styles\n\nCustomize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border.\n\n{{< example id=\"video-customize-example\" github=\"typography/video.md\" show_dark=true >}}\n\n{{< /example >}}\n\n### Forms\n\n#### Input field\n\nThe 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.\n\nOn 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.\n\n##### Input fields\n\nUse 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.\n\n{{< example id=\"default-input-field-example\" github=\"forms/input-field.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Input sizes\n\nUse the following examples to apply a small, default or large size for the input fields.\n\n{{< example id=\"input-field-sizes-example\" github=\"forms/input-field.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Disabled state\n\nGet started with this example if you want to apply the disabled state to an input field.\n\n{{< example id=\"input-field-disabled-example\" github=\"forms/input-field.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Validation\n\nUse the following example to apply validation styles for success and error messages.\n\n{{< example id=\"input-field-validation-example\" github=\"forms/input-field.md\" show_dark=true >}}\n
\n \n \n
Well done! Some success message.
\n
\n
\n \n \n
Oh, snapp! Some error message.
\n
\n{{< /example >}}\n\n##### Input group\n\nThis example can be used to add a descriptive icon or additional text inside the input field.\n\n{{< example id=\"input-field-group-example\" github=\"forms/input-field.md\" show_dark=true >}}\n\n
\n
\n \n
\n \n
\n\n
\n \n \n \n \n
\n{{< /example >}}\n\n##### Helper text\n\nUse this example to show a helper text below the input field for additional explanation and links.\n\n{{< example id=\"input-field-helper-example\" github=\"forms/input-field.md\" show_dark=true >}}\n\n\n
Weβll never share your details. Read our Privacy Policy.
\n{{< /example >}}\n\n##### Search input\n\nGet started with this example where the submit button is positioned inside the input field.\n\n{{< example id=\"input-field-search-example\" github=\"forms/input-field.md\" show_dark=true >}}\n\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Dropdown input\n\nUse this example to show a dropdown menu right next to the input field.\n\n{{< example id=\"input-field-dropdown-example\" github=\"forms/input-field.md\" show_dark=true iframeHeight=\"290\" >}}\n\n{{< /example >}}\n\n#### File input\n\nThe 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.\n\nMake 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.\n\n##### File upload example\n\nGet started with a simple file input component to let users upload one single file.\n\n{{< example id=\"default-file-upload-example\" github=\"forms/file-input.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Helper text\n\nAdd a descriptive helper text to inform users the allowed extensions and sizes of the files.\n\n{{< example id=\"file-upload-helper-example\" github=\"forms/file-input.md\" show_dark=true >}}\n\n\n
SVG, PNG, JPG or GIF (MAX. 800x400px).
\n{{< /example >}}\n\n##### Multiple files\n\nApply the `multiple` attribute to the file input component to allow more files to be uploaded.\n\n{{< example id=\"file-upload-multiple-example\" github=\"forms/file-input.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Sizes\n\nChoose from the small, default, and large file input sizing options.\n\n{{< example id=\"file-upload-sizes-example\" github=\"forms/file-input.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n##### Dropzone\n\nThe dropzone file input component can be used to upload one or more files by clicking anywhere in the area.\n\n{{< example id=\"file-upload-dropzone-example\" github=\"forms/file-input.md\" show_dark=true >}}\n
\n \n
\n{{< /example >}}\n\n#### Search input\n\nThe 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.\n\nYou 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.\n\n##### Search bar example\n\nGet started with the default example of a search input component including and icon and submit button.\n\n{{< example id=\"default-search-bar-example\" github=\"forms/search-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Search with dropdown\n\nUse 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.\n\n{{< example id=\"search-bar-dropdown-example\" github=\"forms/search-input.md\" show_dark=true iframeHeight=\"290\" >}}\n\n{{< /example >}}\n\n##### Simple search input\n\nUse the simplest form of a search input component with an icon and a search button next to the text field.\n\n{{< example id=\"search-bar-simple-example\" github=\"forms/search-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Location search\n\nUse this example where you can select a country in which you want to search for an address or city.\n\n{{< example id=\"search-bar-location-example\" github=\"forms/search-input.md\" show_dark=true iframeHeight=\"290\" >}}\n\n{{< /example >}}\n\n##### Voice search\n\nGet started with this example if you would like to enable voice search for your website and users.\n\n{{< example id=\"search-bar-voice-example\" github=\"forms/search-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n#### Number input\n\nThe 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.\n\nThe 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.\n\n##### Default number input\n\nUse this component to set a number value inside a form field by applying the `type=\"number\"` attribute.\n\n{{< example id=\"default-number-input\" github=\"components/number-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### ZIP code input\n\nUse 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.\n\n{{< example id=\"zip-code-number-input\" github=\"components/number-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Phone number\n\nUse 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.\n\n{{< example id=\"phone-code-number-input\" github=\"components/number-input.md\" show_dark=true iframeHeight=\"360\" >}}\n\n{{< /example >}}\n\n##### Control buttons\n\nUse this example with control buttons to increment and decrement the value inside the input field.\n\nIf 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:\n\n- `data-input-counter` - initialize the input field\n- `data-input-counter-increment` - increment the value of the input field\n- `data-input-counter-decrement` - decrement the value of the input field\n\n{{< example id=\"control-number-input\" github=\"components/number-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Control buttons with icon\n\nUse this example to also add an icon inside the input field to improve the user experience.\n\n{{< example id=\"control-icon-number-input\" github=\"components/number-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Counter input\n\nUse this example as an alternative style to the control buttons example above.\n\n{{< example id=\"control-icon-number-input\" github=\"components/number-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Currency input\n\nThis component can be used to set a currency value inside a form field when you need to set a price.\n\n{{< example id=\"control-number-input\" github=\"components/number-input.md\" show_dark=true iframeHeight=\"290\" >}}\n\n{{< /example >}}\n\n##### Credit card input\n\nUse 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/).\n\n{{< example id=\"zip-code-number-input\" github=\"components/number-input.md\" show_dark=true iframeHeight=\"540\" >}}\n\n{{< /example >}}\n\n##### Pin code input\n\nUse 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.\n\n{{< example id=\"zip-code-number-input\" github=\"components/number-input.md\" show_dark=true javascript=`\n// use this simple function to automatically focus on the next input\nfunction focusNextInput(el, prevId, nextId) {\n if (el.value.length === 0) {\n if (prevId) {\n document.getElementById(prevId).focus();\n }\n } else {\n if (nextId) {\n document.getElementById(nextId).focus();\n }\n }\n}\n\ndocument.querySelectorAll('[data-focus-input-init]').forEach(function(element) {\n element.addEventListener('keyup', function() {\n const prevId = this.getAttribute('data-focus-input-prev');\n const nextId = this.getAttribute('data-focus-input-next');\n focusNextInput(this, prevId, nextId);\n });\n \n// Handle paste event to split the pasted code into each input\n element.addEventListener('paste', function(event) {\n event.preventDefault();\n const pasteData = (event.clipboardData || window.clipboardData).getData('text');\n const digits = pasteData.replace(/\\D/g, ''); // Only take numbers from the pasted data\n\n // Get all input fields\n const inputs = document.querySelectorAll('[data-focus-input-init]');\n \n // Iterate over the inputs and assign values from the pasted string\n inputs.forEach((input, index) => {\n if (digits[index]) {\n input.value = digits[index];\n // Focus the next input after filling the current one\n const nextId = input.getAttribute('data-focus-input-next');\n if (nextId) {\n document.getElementById(nextId).focus();\n }\n }\n });\n });\n});\n` >}}\n\n{{< /example >}}\n\n##### Number input with slider\n\nThis 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/).\n\n{{< example id=\"zip-code-number-input\" github=\"components/number-input.md\" show_dark=true iframeHeight=\"290\" disable_init_js=\"true\" javascript=`\n// Get the elements\nvar rangeInput = document.getElementById('price-range-input');\nvar currencyInput = document.getElementById('currency-input');\n\n// Function to update the currency input\nfunction updateCurrencyInput() {\ncurrencyInput.value = rangeInput.value;\n}\n\n// Add event listener to the range input\nrangeInput.addEventListener('input', updateCurrencyInput);\n` >}}\n\n{{< /example >}}\n\n##### Convert currency\n\nUse this example of two number input fields and dropdowns to convert currency and even from fiat to crypto.\n\n{{< example id=\"control-number-input\" github=\"components/number-input.md\" show_dark=true iframeHeight=\"290\" disable_init_js=\"true\" >}}\n\n{{< /example >}}\n\n##### Advanced control buttons\n\nThis 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.\n\n{{< example id=\"control-icon-number-input\" github=\"components/number-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Min and max values\n\nBy 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:\n\n- `data-input-counter-min` - set the minimum value of the input\n- `data-input-counter-max` - set the maximum value of the input\n\nThese values will be enforced and validated whenever the user clicks on one of the buttons or tries to introduce the value manually.\n\n{{< example id=\"control-number-min-max-input\" github=\"components/number-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### JavaScript behaviour\n\nUse 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.\n\n###### Object parameters\n\nUse the object parameters from the InputCounter object to set the target, increment, and decrement elements as well as the options object.\n\n
\n
\n \n
\n
\n Parameter\n
\n
\n Type\n
\n
\n Required\n
\n
\n Description\n
\n
\n \n \n
\n
\n targetEl\n
\n
\n Element\n
\n
\n Required\n
\n
\n Pass the target input field element that will be incremented or decremented based on click event.\n
\n
\n
\n
\n incrementEl\n
\n
\n Element\n
\n
\n Optional\n
\n
\n Pass the increment button element that will increase the value of the target element based on click event.\n
\n
\n
\n
\n decrementEl\n
\n
\n Element\n
\n
\n Optional\n
\n
\n Pass the decrement button element that will decrease the value of the target element based on click event.\n
\n
\n
\n
\n options\n
\n
\n Object\n
\n
\n Optional\n
\n
\n Set these options to set the minimum and maximum value of the input field and the callback functions.\n
\n
\n
\n
\n instanceOptions\n
\n
\n Object\n
\n
\n Optional\n
\n
\n 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.\n
\n
\n \n
\n
\n\n###### Options\n\nUse 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.\n\n
\n
\n \n
\n
\n Option\n
\n
\n Type\n
\n
\n Description\n
\n
\n \n \n
\n
\n minValue\n
\n
\n Integer\n
\n
\n Set the minimum value of the input field.\n
\n
\n
\n
\n maxValue\n
\n
\n Integer\n
\n
\n Set the maximum value of the input field.\n
\n
\n
\n
\n onIncrement\n
\n
\n Function\n
\n
\n Set a callback function when the item has been incremented.\n
\n
\n
\n
\n onDecrement\n
\n
\n Function\n
\n
\n Set a callback function when the item has been decremented.\n
\n
\n \n
\n
\n\n###### Methods\n\nUse the following methods of the InputCounter object to programmatically manipulate the behaviour of the input field.\n\n
\n
\n \n
\n
\n Method\n
\n
\n Description\n
\n
\n \n \n
\n
\n getCurrentValue()\n
\n
\n Use this method to get the current value of the input field.\n
\n
\n
\n
\n increment()\n
\n
\n Use this method on the InputCounter object to increment the value of the input field.\n
\n
\n
\n
\n decrement()\n
\n
\n Use this method on the InputCounter object to decrement the value of the input field.\n
\n
\n
\n
\n updateOnIncrement(callback)\n
\n
\n Use this method to set a callback function whenever the input field has been incremented.\n
\n
\n
\n
\n updateOnDecrement(callback)\n
\n
\n Use this method to set a callback function whenever the input field has been decremented.\n
\n
\n \n
\n
\n\n###### Example\n\nCheck 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.\n\nFirst of all, you need to set the object parameters where the target element is required and the other two are optional.\n\n```javascript\n// set the target element of the input field\nconst $targetEl = document.getElementById('counter-input-example');\n\n// optionally set the increment and decrement elements\nconst $incrementEl = document.getElementById('increment-button');\n\nconst $decrementEl = document.getElementById('decrement-button');\n\n// optional options with default values and callback functions\nconst options = {\n minValue: 0,\n maxValue: null, // infinite\n onIncrement: () => {\n console.log('input field value has been incremented');\n },\n onDecrement: () => {\n console.log('input field value has been decremented');\n }\n};\n\nconst instanceOptions = {\n id: 'counter-input-example',\n override: true\n};\n```\n\nNext step is to create a new instance of a InputCounter object using the parameters we have set above.\n\n```javascript\nimport { InputCounter } from 'flowbite';\n\n/*\n * $targetEl: required\n * $incrementEl: optional\n * $decrementEl: optional\n * options: optional\n */\nconst counterInput = new InputCounter($targetEl, $incrementEl, $decrementEl, options, instanceOptions);\n```\n\nNow you can programmatically increment or decrement the input field using the methods of the InputCounter object.\n\n```javascript\n// get the current value of the input field\ncounterInput.getCurrentValue();\n\n// increment the value of the input field\ncounterInput.increment();\n\n// decrement the value of the input field\ncounterInput.decrement();\n```\n\n###### HTML Markup\n\nHere is an example of the HTML markup that you can use for the JavaScript example above.\n\n```html\n\n```\n\n###### TypeScript\n\nIf you're using the }}\">TypeScript configuration from Flowbite then you can import the types for the InputCounter object, parameters and its options.\n\nHere's an example that applies the types from Flowbite to the code above:\n\n```javascript\nimport { InputCounter } from 'flowbite';\nimport type { InputCounterOptions, InputCounterInterface } from 'flowbite';\nimport type { InstanceOptions } from 'flowbite';\n\n// set the target element of the input field\nconst $targetEl: HTMLInputElement = document.getElementById('counter-input-example') as HTMLInputElement;\n\n// optionally set the increment and decrement elements\nconst $incrementEl: HTMLElement = document.getElementById('increment-button');\n\nconst $decrementEl: HTMLElement = document.getElementById('decrement-button');\n\n// optional options with default values and callback functions\nconst options: InputCounterOptions = {\n minValue: 0,\n maxValue: null, // infinite\n onIncrement: () => {\n console.log('input field value has been incremented');\n },\n onDecrement: () => {\n console.log('input field value has been decremented');\n }\n};\n\n// instance options object\nconst instanceOptions: InstanceOptions = {\n id: 'counter-input-example',\n override: true\n};\n\n/*\n * $targetEl: required\n * $incrementEl: optional\n * $decrementEl: optional\n * options: optional\n * instanceOptions: optional\n */\nconst counterInput: InputCounterInterface = new InputCounter(\n $targetEl,\n $incrementEl,\n $decrementEl,\n options,\n instanceOptions\n);\n\n// increment the value of the input field\ncounterInput.increment();\n\n// decrement the value of the input field\ncounterInput.decrement();\n```\n\n#### Phone input\n\nThe 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.\n\nThe 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.\n\n##### Default phone input\n\nUse this component to set a phone number inside an input field by setting the `type=\"tel\"` attribute.\n\n{{< example id=\"default-phone-number-input\" github=\"components/phone-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Phone input country code\n\nThis 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.\n\n{{< example id=\"phone-code-number-input\" github=\"components/phone-input.md\" show_dark=true iframeHeight=\"360\" >}}\n\n{{< /example >}}\n\n##### Floating label input\n\nSet a phone number inside an input field with a floating label inspired by Material UI from Google.\n\n{{< example id=\"floating-label-phone-example\" github=\"forms/phone-input.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Verification code input\n\nUse this example to send a verification code to the user's phone number for authentication.\n\n{{< example id=\"phone-verification-number-input\" github=\"components/phone-input.md\" show_dark=true iframeHeight=\"360\" disable_init_js=\"true\" >}}\n\n{{< /example >}}\n\n##### Phone number select\n\nUse this example to select one of your saved phone numbers from an application with a copy-paste feature.\n\n{{< example id=\"phone-select-number-input\" github=\"components/phone-input.md\" show_dark=true disable_init_js=\"true\" javascript=`\nwindow.addEventListener('load', function() {\n const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'phone-numbers');\n const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-phone');\n\n const $defaultIcon = document.getElementById('copy-icon');\n const $successIcon = document.getElementById('copy-icon-success');\n\n const $defaultTooltipMessage = document.getElementById('tooltip-text');\n const $successTooltipMessage = document.getElementById('tooltip-text-success');\n\n clipboard.updateOnCopyCallback((clipboard) => {\n showSuccess();\n\n // reset to default state\n setTimeout(() => {\n resetToDefault();\n }, 2000);\n })\n\n const showSuccess = () => {\n $defaultIcon.classList.add('hidden');\n $successIcon.classList.remove('hidden');\n $defaultTooltipMessage.classList.add('hidden');\n $successTooltipMessage.classList.remove('hidden'); \n tooltip.show();\n }\n\n const resetToDefault = () => {\n $defaultIcon.classList.remove('hidden');\n $successIcon.classList.add('hidden');\n $defaultTooltipMessage.classList.remove('hidden');\n $successTooltipMessage.classList.add('hidden');\n tooltip.hide();\n }\n});\n` >}}\n\n{{< /example >}}\n\n##### Authentication form\n\nUse this example to authenticate users with a login form using a phone number instead of an email address.\n\n{{< example id=\"phone-auth-number-input\" github=\"components/phone-input.md\" show_dark=true iframeHeight=\"390\" disable_init_js=\"true\" >}}\n\n{{< /example >}}\n\n##### Advanced phone verification\n\nUse this example to verify a phone number via SMS or phone call using a dropdown component.\n\n{{< example id=\"phone-code-alt-number-input\" github=\"components/phone-input.md\" show_dark=true iframeHeight=\"360\" disable_init_js=\"true\" >}}\n\n{{< /example >}}\n\n#### Select\n\nThe 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.\n\n##### Select input example\n\nGet started with the default example of a select input component to get a single option selection.\n\n{{< example id=\"default-select-example\" github=\"forms/select.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Multiple options\n\nApply the `multiple` attribute to the select component to allow users to select one or more options.\n\n{{< example id=\"select-multiple-example\" github=\"forms/select.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Size attribute\n\nUse the size attribute for the select component to specify the number of visible options in the list.\n\n{{< example id=\"select-size-example\" github=\"forms/select.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Disabled state\n\nApply the `disable` state to the select component to disallow the selection of new options.\n\n{{< example id=\"select-disabled-example\" github=\"forms/select.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Underline select\n\nUse the underline style for the select component as an alternative appearance.\n\n{{< example id=\"select-underline-example\" github=\"forms/select.md\" show_dark=true >}}\n\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Select with dropdown\n\nUse this example if you want to create a multi-level dropdown and select component combination.\n\n{{< example id=\"select-dropdown-example\" github=\"forms/select.md\" show_dark=true iframeHeight=\"300\" >}}\n\n{{< /example >}}\n\n##### Sizes\n\nGet started with the small, default, and large sizes for the select component from the example below.\n\n{{< example id=\"select-sizes-example\" github=\"forms/select.md\" show_dark=true >}}\n\n{{< /example >}}\n\n#### Textarea\n\nThe 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.\n\nFrom 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. \n\n##### Textarea example\n\nGet started with the default example of a textarea component below.\n\n{{< example id=\"default-textarea-example\" github=\"forms/textarea.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### WYSIWYG Editor\n\nIf 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.\n\n{{< example id=\"textarea-wysiwyg-example\" github=\"forms/textarea.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Comment box\n\nMost 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.\n\n{{< example id=\"textarea-comment-example\" github=\"forms/textarea.md\" show_dark=true >}}\n\n
\n{{< /example >}}\n\n##### Chatroom input\n\nIf 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.\n\n{{< example id=\"textarea-chatroom-example\" github=\"forms/textarea.md\" show_dark=true >}}\n\n{{< /example >}}\n\n#### Timepicker\n\nThe 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.\n\nThe 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.\n\nThe 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.\n\n##### Default timepicker\n\nUse this example to show a simple input field with the native browser timepicker.\n\n{{< example id=\"timepicker-default-example\" github=\"components/timepicker.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Timepicker with icon\n\nThis example can be used to select a time via an input field where you can add an icon to the input group.\n\n{{< example id=\"timepicker-input-group-example\" github=\"components/timepicker.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Timepicker with dropdown\n\nUse 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.\n\n{{< example id=\"timepicker-dropdown-example\" github=\"components/timepicker.md\" iframeHeight=\"300\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Timepicker with select\n\nUse this example to show a select input next to the timepicker to select an option like a timezone.\n\n{{< example id=\"timepicker-select-example\" class=\"flex justify-center\" github=\"components/timepicker.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Timepicker range selector\n\nUse this example to select a time interval using two input field often used for the duration of an event.\n\n{{< example id=\"timepicker-range-selector-example\" github=\"components/timepicker.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Timerange with dropdown\n\nThis example can be used to show the timerange picker inside a dropdown only when clicking on a button.\n\n{{< example id=\"timepicker-range-selector-dropdown-example\" class=\"flex justify-center items-center\" github=\"components/timepicker.md\" show_dark=true iframeHeight=\"260\" javascript=`\nconst dropdown = FlowbiteInstances.getInstance('Dropdown', 'dropdownTimepicker');\nconst $saveTimeButton = document.getElementById('saveTimeButton');\n\n$saveTimeButton.addEventListener('click', function() {\n // save time code and then hide the dropdown\n dropdown.hide();\n});\n` >}}\n\n\n\n
\n
\n
\n \n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n \n
\n \n
\n
\n
\n \n
\n{{< /example >}}\n\n##### Timerange picker with toggle\n\nUse this example to show or hide the timepicker when clicking on an trigger element.\n\n{{< example id=\"timepicker-range-selector-dropdown-example\" class=\"flex items-center justify-center\" github=\"components/timepicker.md\" show_dark=true iframeHeight=\"190\" >}}\n
\n \n
\n
\n \n
\n
\n \n
\n \n
\n
\n
\n \n
\n
\n \n
\n \n
\n
\n
\n
\n{{< /example >}}\n\n##### Inline timepicker buttons\n\nThis 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.\n\n{{< example id=\"timepicker-inline-example\" github=\"components/timepicker.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n##### Modal with timepicker\n\nUse 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.\n\n{{< example id=\"timepicker-modal-example\" github=\"components/timepicker.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"880\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Drawer with timepicker\n\nUse 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.\n\n{{< example id=\"timepicker-drawer-example\" github=\"components/timepicker.md\" class=\"flex justify-center\" show_dark=true iframeHeight=\"880\" >}}\n\n
\n \n
\n\n
\n
Time schedule
\n \n \n
\n{{< /example >}}\n\n#### Checkbox\n\nThe 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.\n\nMake sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the checkbox component.\n\n##### Checkbox example\n\nUse this default example of a checkbox element in a checked and unchecked state.\n\n{{< example id=\"default-checkbox-example\" github=\"forms/checkbox.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Disabled state\n\nThis example can be used for the disabled state of the checkbox component by applying the `disabled` attribute to the input element.\n\n{{< example id=\"disabled-checkbox-example\" github=\"forms/checkbox.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Checkbox link\n\nUse this example if you want to add an anchor link inside the label of the checkbox component.\n\n{{< example id=\"checkbox-link-example\" github=\"forms/checkbox.md\" show_dark=true >}}\n
\n \n \n
\n{{< /example >}}\n\n##### Helper text\n\nGet started with this example if you want to add a secondary helper text for the checkbox component.\n\n{{< example id=\"checkbox-helper-example\" github=\"forms/checkbox.md\" show_dark=true >}}\n
\n
\n \n
\n
\n \n
For orders shipped from $25 in books or $29 in other categories
\n
\n
\n{{< /example >}}\n\n##### Bordered\n\nUse this example of a checkbox inside a card element to enable a larger area of clicking activation.\n\n{{< example id=\"checkbox-bordered-example\" class=\"grid gap-6 md:grid-cols-2\" github=\"forms/checkbox.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Checkbox list group\n\nUse this example to show a list of checkbox items grouped inside a card.\n\n{{< example id=\"checkbox-list-example\" github=\"components/radio.md\" show_dark=true >}}\n
Technology
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n{{< /example >}}\n\n##### Horizontal list group\n\nUse this example to show a list of checkbox items inside a card horizontally.\n\n{{< example id=\"checkbox-horizontal-list-example\" github=\"components/radio.md\" show_dark=true >}}\n
Identification
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Checkbox dropdown\n\nUse this example to show a list of checkbox items inside a dropdown menu.\n\n{{< example id=\"checkbox-dropdown-example\" class=\"flex justify-center\" github=\"components/dropdowns.md\" show_dark=true iframeHeight=\"430\" >}}\n\n\n\n
\n{{< /example >}}\n\n##### Inline layout\n\nYou can align the checkbox elements horizontally by using a wrapper tag and applying the `flex` class.\n\n{{< example id=\"checkbox-inline-example\" github=\"forms/checkbox.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n{{< /example >}}\n\n##### Colors\n\nUse the `text-{color}-{shade}` classes from Tailwind CSS to change the color of the checkbox component.\n\n{{< example id=\"checkbox-colors-example\" class=\"flex flex-wrap\" github=\"forms/checkbox.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Advanced layout\n\nUse this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.\n\n{{< example id=\"checkbox-advanced-example\" class=\"flex flex-wrap\" github=\"forms/checkbox.md\" show_dark=true >}}\n
Choose technology:
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n{{< /example >}}\n\n#### Radio\n\nThe 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.\n\nMake sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the radio component.\n\n##### Radio example\n\nUse the default example of a radio component with the checked and unchecked state.\n\n{{< example id=\"default-radio-example\" github=\"forms/radio.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Disabled state\n\nApply the `disabled` attribute to the radio component to disallow the selection for the user.\n\n{{< example id=\"radio-disabled-example\" github=\"forms/radio.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Radio link\n\nUse this example if you want to include an anchor tag inside the label of the radio component.\n\n{{< example id=\"radio-link-example\" github=\"forms/radio.md\" show_dark=true >}}\n
\n \n \n
\n{{< /example >}}\n\n##### Helper text\n\nGet started with this example if you want to add a secondary text to the label for the radio component.\n\n{{< example id=\"radio-helper-example\" github=\"forms/radio.md\" show_dark=true >}}\n
\n
\n \n
\n
\n \n
For orders shipped from $25 in books or $29 in other categories
\n
\n
\n{{< /example >}}\n\n##### Bordered\n\nUse this example to show a radio input elements inside a card with border.\n\n{{< example id=\"radio-bordered-example\" class=\"grid gap-6 md:grid-cols-2\" github=\"forms/radio.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Radio list group\n\nThis example can be used to show a list of radio buttons inside a grouped list.\n\n{{< example id=\"radio-list-group-example\" github=\"components/radio.md\" show_dark=true >}}\n
Identification
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n{{< /example >}}\n\n##### Horizontal list group\n\nUse this example to group up radio button components inside a list.\n\n{{< example id=\"radio-horizontal-list-example\" github=\"components/radio.md\" show_dark=true >}}\n
Identification
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n{{< /example >}}\n\n
\n {{< requires_js >}}\n
\n\n##### Radio in dropdown\n\nHere's an example of a list group that you can use right away.\n\n{{< example id=\"radio-dropdown-example\" class=\"flex justify-center\" github=\"components/radio.md\" show_dark=true iframeHeight=\"370\" >}}\n\n\n\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Inline layout\n\nUse the `flex` class for a wrapper element to horizontally align the radio elements.\n\n{{< example id=\"radio-inline-example\" github=\"forms/radio.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n{{< /example >}}\n\n##### Advanced layout\n\nUse 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.\n\n{{< example id=\"radio-advanced-example\" class=\"flex flex-wrap\" github=\"forms/checkbox.md\" show_dark=true >}}\n
How much do you expect to use each month?
\n
\n
\n \n \n
\n
\n \n \n
\n
\n{{< /example >}}\n\n##### Colors\n\nApply the `text-{color}-{shade}` utility class from Tailwind CSS to change the color of the radio component.\n\n{{< example id=\"radio-colors-example\" github=\"forms/radio.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n{{< /example >}}\n\n#### Toggle\n\nThe 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.\n\n##### Toggle example\n\nGet started with the default toggle component example as a checkbox element to receive a true or false selection from the user.\n\n{{< example id=\"default-toggle-example\" class=\"flex justify-center\" github=\"forms/toggle.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Checked state\n\nApply the `checked` attribute to the toggle component to activate the selection by default.\n\n{{< example id=\"toggle-checked-example\" class=\"flex justify-center\" github=\"forms/toggle.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Disabled state\n\nApply the `disabled` attribute to disallow the users from making any further selections.\n\n{{< example id=\"toggle-disabled-example\" class=\"flex flex-col flex-wrap items-center\" github=\"forms/toggle.md\" show_dark=true >}}\n\n\n\n{{< /example >}}\n\n##### Colors\n\nChange the color of the toggle component by updating the color classes of `peer-focus` and `peer-checked`.\n\n{{< example id=\"toggle-colors-example\" class=\"flex inline-flex-wrap justify-center\" github=\"forms/toggle.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n##### Sizes\n\nGet started with small, default, or large sizes of the toggle component based on your needs.\n\n{{< example id=\"toggle-sizes-example\" class=\"flex flex-col flex-wrap items-center\" github=\"forms/toggle.md\" show_dark=true >}}\n\n\n\n\n\n{{< /example >}}\n\n#### Range\n\nThe 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.\n\nThe 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.\n\n##### Range slider example\n\nGet started with this default example with values from 1 to 100 and the default value of 50.\n\n{{< example id=\"default-range-example\" github=\"forms/range.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Disabled state\n\nApply the `disabled` class to disallow the users from further selecting values.\n\n{{< example id=\"range-disabled-example\" github=\"forms/range.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Min and max\n\nUse the min and max attributes on the range component to set the limits of the range values.\n\n{{< example id=\"range-minmax-example\" github=\"forms/range.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Steps\n\nUse the step attribute on the range component to set the increment with which the values will change.\n\n{{< example id=\"range-steps-example\" github=\"forms/range.md\" show_dark=true >}}\n\n\n{{< /example >}}\n\n##### Sizes\n\nApply 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.\n\n{{< example id=\"range-sizes-example\" github=\"forms/range.md\" show_dark=true >}}\n\n\n\n\n\n\n\n\n{{< /example >}}\n\n##### Labels\n\nUse the following example to add labels to each value milestone of the range slider component.\n\n{{< example id=\"range-labels-example\" github=\"forms/range.md\" show_dark=true >}}\n
\n \n \n Min ($100)\n $500\n $1000\n Max ($1500)\n
\n{{< /example >}}\n\n#### Floating label\n\nThe 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.\n\nOn 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.\n\n##### Floating label example\n\nGet 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.\n\n{{< 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 >}}\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Disabled state\n\nApply the `disabled` attribute to the input fields to disallow the user from changing the content.\n\n{{< example id=\"floating-label-disabled-example\" class=\"grid items-end gap-6 md:grid-cols-3\" github=\"forms/floating-label.md\" show_dark=true >}}\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n{{< /example >}}\n\n##### Validation\n\nUse 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.\n\n{{< example id=\"floating-label-validation-example\" github=\"forms/floating-label.md\" show_dark=true >}}\n\n
\n
\n
\n \n \n
\n
Well done! Some success message.
\n
\n
\n
\n \n \n
\n
Well done! Some success message.
\n
\n
\n
\n \n \n
\n
Well done! Some success message.
\n
\n
\n\n\n
\n
\n
\n \n \n
\n
Oh, snapp! Some error message.
\n
\n
\n
\n \n \n
\n
Oh, snapp! Some error message.
\n
\n
\n
\n \n \n
\n
Oh, snapp! Some error message.
\n
\n
\n{{< /example >}}\n\n##### Sizes\n\nUse the small and default sizes of the floating label input fields from the following example.\n\n{{< example id=\"floating-label-sizes-example\" github=\"forms/floating-label.md\" show_dark=true >}}\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n{{< /example >}}\n\n##### Helper text\n\nAdd a helper text in addition to the label if you want to show more information below the input field.\n\n{{< example id=\"floating-label-helper-example\" github=\"forms/floating-label.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n### Typography\n\n#### Headings\n\nGet 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.\n\nAt 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.\n\n##### Default heading\n\nUse this example of a H1 heading in the context of a paragraph and CTA button for landing pages.\n\n{{< example id=\"default-heading-example\" class=\"text-center\" github=\"typography/headings.md\" show_dark=true >}}\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n\n Learn more\n \n\n{{< /example >}}\n\n##### Second-level heading\n\nUse this example of a second-level H2 heading as the main subtitle for each section of your web page.\n\n{{< example id=\"second-level-heading-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Payments tool for companies
\n
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.
\n
Deliver great service experiences fast - without the complexity of traditional ITSM solutions. Accelerate critical development work, eliminate toil, and deploy changes with ease.
\n\nRead more\n\n\n{{< /example >}}\n\n##### Highlighted heading\n\nUse this example to highlight a certain portion of the heading text with a different color.\n\n{{< example id=\"highlighted-heading-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Get back to growth with the world's #1 CRM.
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n{{< /example >}}\n\n##### Heading mark\n\nThis example can be used to mark one part of the heading text with a solid background for highlighting.\n\n{{< example id=\"heading-mark-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Regain control over your days
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n{{< /example >}}\n\n##### Heading gradient\n\nUse this example to highlight a portion of the heading text by using a gradient style.\n\n{{< example id=\"heading-gradient-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Better Data Scalable AI.
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n{{< /example >}}\n\n##### Heading underline\n\nGet started with this example to underline an important part of the heading component using the offset feature from Tailwind CSS.\n\n{{< example id=\"heading-underline-example\" github=\"typography/headings.md\" show_dark=true >}}\n
We invest in the worldβs potential
\n
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
\n{{< /example >}}\n\n##### Breadcrumb context\n\nGet started with this example to position a breadcrumb component above the H1 heading component.\n\n{{< example id=\"heading-breadcrumb-example\" github=\"typography/headings.md\" show_dark=true >}}\n\n
Team management
\n{{< /example >}}\n\n##### Badge context\n\nUse this example to show a badge component inside the heading text element as a secondary indicator.\n\n{{< example id=\"heading-badge-example\" github=\"typography/headings.md\" show_dark=true >}}\n
FlowbitePRO
\n{{< /example >}}\n\n##### Secondary text\n\nThis example can be used to add a secondary text inside the main heading component.\n\n{{< example id=\"heading-neutral-secondary-example\" github=\"typography/headings.md\" show_dark=true >}}\n
FlowbiteThis is secondary text
\n{{< /example >}}\n\n##### Sizes\n\nThe 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.\n\n###### Heading one (H1)\n\nUse the H1 tag as the most important text element to indicate the title of your web page.\n\n{{< example id=\"heading-one-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Heading 1
\n{{< /example >}}\n\n###### Heading two (H2)\n\nThe H2 tag can be used as subtitles of the page's sections.\n\n{{< example id=\"heading-two-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Heading 2
\n{{< /example >}}\n\n###### Heading three (H3)\n\nUse the H3 tags inside sections that already have a H2 available.\n\n{{< example id=\"heading-three-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Heading 3
\n{{< /example >}}\n\n###### Heading four (H4)\n\nThe H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.\n\n{{< example id=\"heading-four-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Heading 4
\n{{< /example >}}\n\n###### Heading five (H5)\n\nThe H5 tag is most often used in longer articles with other heading already available or in sidebars.\n\n{{< example id=\"heading-five-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Heading 5
\n{{< /example >}}\n\n###### Heading six (H6)\n\nUsing 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.\n\n{{< example id=\"heading-six-example\" github=\"typography/headings.md\" show_dark=true >}}\n
Heading 6
\n{{< /example >}}\n\n#### Paragraphs\n\nThe 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.\n\nGet 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.\n\n##### Default paragraph\n\nUse this example of a paragraph element to use inside article content or a landing page.\n\n{{< example id=\"default-paragraph-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n
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.
\n{{< /example >}}\n\n\n##### Leading paragraph\n\nThe leading text can be used as the first paragraph inside an article content page.\n\n{{< example id=\"paragraph-leading-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work and deploy.
\n
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.
\n{{< /example >}}\n\n##### First letter\n\nUse this example to highlight the first letter of the paragraph, often used in e-books and PDF documents.\n\n{{< example id=\"paragraph-first-letter-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n
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.
\n{{< /example >}}\n\n##### Paragraph link\n\nThis example can be used to add a custom styled link element inside the paragraph.\n\n{{< example id=\"paragraph-link-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n##### Paragraph bold\n\nUse this example to highlight a piece of text inside the paragraph by using a bolder font weight.\n\n{{< example id=\"paragraph-bold-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n##### Paragraph underline\n\nThis example can be used to underline a certain part of the text inside the paragraph.\n\n{{< example id=\"paragraph-underline-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n##### Paragraph italic\n\nUse this example to make the font style of the text inside the paragraph italic.\n\n{{< example id=\"paragraph-italic-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n##### Paragraph popover\n\nGet started with this example to show a popover with extra information inside paragraph elements.\n\n{{< example id=\"paragraph-popover-example\" class=\"pt-60\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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
\n
\n
\n
\n
\n
About Italy
\n
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.
\n{{< /example >}}\n\n##### Layout\n\nGet started with examples of layouts for the paragraph component to separate content into multiple rows and columns.\n\n###### One column\n\nUse this example to show multiple paragraphs on a single line.\n\n{{< example id=\"paragraph-one-column-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n
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.
\n{{< /example >}}\n\n###### Two columns even\n\nUse this example to separate paragraphs into two columns for better readability.\n\n{{< example id=\"paragraphs-two-columns-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n
\n
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.
\n
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.
\n
\n
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.
\n{{< /example >}}\n\n###### Three columns even\n\nThis example can be used to separate paragraphs into three separate columns.\n\n{{< example id=\"paragraphs-three-columns-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n
\n
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.
\n
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.
\n
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.
\n
\n
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.
\n{{< /example >}}\n\n###### Two columns uneven\n\nUse this example to separate paragraphs into two uneven columns.\n\n{{< example id=\"paragraphs-two-columns-uneven-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n
\n
\n
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.
\n
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.
\n
\n
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.
\n
\n
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.
\n{{< /example >}}\n\n##### Text alignment\n\nAlign 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.\n\n###### Left\n\nThe default alignment of the paragraph is to the left side and you can use the `text-left` class to align it manually.\n\n{{< example id=\"paragraph-left-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n###### Center\n\nUse the `text-center` class to align the paragraph text to the center.\n\n{{< example id=\"paragraph-center-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n###### Right\n\nUse the `text-right` utility class to align the paragraph text the right side of the page.\n\n{{< example id=\"paragraph-right-example\" github=\"typography/paragraphs.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n#### Blockquote\n\nGet 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.\n\nThe main `
` HTML tag can be used together with the `` tag or attribute to also mention the source of the quote content.\n\n##### Default blockquote\n\nUse this example to quote an external source inside a blockquote element.\n\n{{< example id=\"default-blockquote-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n##### Solid background\n\nThis example can be used as an alternative style to the default one by applying a solid background color.\n\n{{< example id=\"blockquote-background-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\nDoes 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.\n
\n
\n
\"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.\"
\n
\n
\nFirst 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.\n
\n{{< /example >}}\n\n##### Blockquote icon\n\nUse this example to show an icon above the blockquote text content.\n\n{{< example id=\"blockquote-icon-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n \n
\"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.\"
\n
\n{{< /example >}}\n\n##### Paragraph context\n\nUse this example to show a blockquote component between multiple paragraph elements.\n\n{{< example id=\"blockquote-paragraph-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
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.
\n
\n
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.
\n
\n
\" 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. \"
\n
\n
\n
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.
\n{{< /example >}}\n\n##### User testimonial\n\nThis example can be used for user testimonials by mentioning the author and occupation of the author.\n\n{{< example id=\"blockquote-testimonial-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n\n \n
\n
\"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.\"
\n
\n \n \n
\n Michael Gough\n CEO at Google\n
\n \n\n{{< /example >}}\n\n##### User Review\n\nUse this example to show a user review with rating stars and the name and occupation of the author.\n\n{{< example id=\"blockquote-review-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n\n
\n \n \n \n \n \n
\n
\n
\"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.\"
\n
\n \n \n
\n Bonnie Green\n CTO at Flowbite\n
\n \n\n{{< /example >}}\n\n##### Alignment\n\nChoose from the following examples the blockquote text alignment from starting from left, center to right based on the utility classes from Tailwind CSS.\n\n###### Left\n\nThe default alignment of the blockquote text content is the left side of the document.\n\n{{< example id=\"default-blockquote-left-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n###### Center\n\nUse the `text-center` class from Tailwind CSS to align the text content inside the blockquote to the center.\n\n{{< example id=\"default-blockquote-center-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n###### Right\n\nUse the `text-right` utility class from Tailwind CSS to align the blockquote text content to the right side of the page.\n\n{{< example id=\"default-blockquote-right-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n##### Sizes\n\nChoose from one of the multiple sizes for the default blockquote component based on the surrounding elements and sizes.\n\n###### Small\n\nUse the `text-lg` font size class from Tailwind CSS to apply the small size for the blockquote component.\n\n{{< example id=\"default-blockquote-small-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n###### Medium\n\nUse the `text-xl` utility class to set the default size for the blockquote element.\n\n{{< example id=\"default-blockquote-medium-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n###### Large\n\nThe `text-2xl` class can be used to set a large size for the blockquote component.\n\n{{< example id=\"default-blockquote-large-example\" github=\"typography/blockquote.md\" show_dark=true >}}\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n#### Image\n\nGet 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.\n\n##### Default image\n\nUse this example to show the a responsive image that won't grow beyond the maximum original width.\n\n{{< example id=\"default-image-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Image caption\n\nThis example can be used to add a caption for the image often used inside articles.\n\n{{< example id=\"image-caption-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n \n Image caption\n\n{{< /example >}}\n\n##### Rounded corners\n\nApply rounded corners to the image by using the specific utility classes from Tailwind CSS.\n\n###### Border radius\n\nUse 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.\n\n{{< example id=\"image-rounded-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Full circle\n\nUse this example to mask the image inside a circle using the `rounded-full` utility class from Tailwind CSS.\n\n{{< example id=\"image-rounded-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Image shadow\n\nThis example can be used to show a shadow effect for the image using the `shadow-{size}` utility class.\n\n{{< example id=\"image-shadow-example\" class=\"flex justify-center pb-8\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Retina-ready\n\nUse the `srcset` attribute to set Retina-ready images with double resolution.\n\n{{< example id=\"image-retina-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Image card\n\nUse this example to make the image a card item with a link and a short text description.\n\n{{< example id=\"image-card-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n \n \n \n \n
Do you want to get notified when a new component is added to Flowbite?
\n \n\n{{< /example >}}\n\n##### Image effects\n\nUse image effects such as grayscale or blur to change the appearances of the image when being hovered.\n\n###### Grayscale\n\nUse the filter option and apply a grayscale to the image element using the `grayscale` class.\n\n{{< example id=\"image-grayscale-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Blur\n\nApply a blur by using the `blur-{size}` utility class from Tailwind CSS to an image component.\n\n{{< example id=\"image-blur-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Alignment\n\nAlign the image component to the left, center or right side of the document page using margin styles.\n\n###### Left\n\nBy default, the image component will be aligned to the left side of the page.\n\n{{< example id=\"image-left-example\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Center\n\nHorizontally align the image to the center of the page using the `mx-auto` class.\n\n{{< example id=\"image-center-example\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Right\n\nUse the `ml-auto` (or `ms-auto`) class to align the image to the right side of the page.\n\n{{< example id=\"image-right-example\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n##### Sizes\n\nSet 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.\n\n###### Small\n\nUse the `max-w-xs` class to set a small size of the image.\n\n{{< example id=\"image-small-example\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Medium\n\nUse the `max-w-md` class to set a medium size of the image.\n\n{{< example id=\"image-medium-example\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Large\n\nUse the `max-w-xl` class to set a large size of the image.\n\n{{< example id=\"image-large-example\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n###### Full width\n\nUse 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.\n\n{{< example id=\"image-full-example\" github=\"typography/images.md\" show_dark=true >}}\n\n{{< /example >}}\n\n#### Lists\n\nGet 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.\n\n##### Unordered list\n\nUse this example to create a default unordered list of items using the `list-disc` class.\n\n{{< example id=\"unordered-list-example\" github=\"typography/lists.md\" show_dark=true >}}\n
Password requirements:
\n
\n
\n At least 10 characters (and up to 100 characters)\n
\n
\n At least one lowercase character\n
\n
\n Inclusion of at least one special character, e.g., ! @ # ?\n
\n
\n{{< /example >}}\n\n###### Icons\n\nThis example can be used to apply custom icons instead of the default bullets for the list items.\n\n{{< example id=\"unordered-list-icon-example\" github=\"typography/lists.md\" show_dark=true >}}\n
Password requirements:
\n
\n
\n \n At least 10 characters\n
\n
\n \n At least one lowercase character\n
\n
\n \n At least one special character, e.g., ! @ # ?\n
\n
\n{{< /example >}}\n\n###### Nested\n\nUse this example to nested another list of items inside the parent list element.\n\n{{< example id=\"unordered-list-nested-example\" github=\"typography/lists.md\" show_dark=true >}}\n
\n
\n List item one\n \n
You might feel like you are being really \"organized\" o
\n
Nested navigation in UIs is a bad idea too, keep things as flat as possible.
\n
Nesting tons of folders in your source code is also not helpful.
\n \n
\n
\n List item two\n
\n
I'm not sure if we'll bother styling more than two levels deep.
\n
Two is already too much, three is guaranteed to be a bad idea.
\n
If you nest four levels deep you belong in prison.
\n
\n
\n
\n List item three\n
\n
Again please don't nest lists if you want
\n
Nobody wants to look at this.
\n
I'm upset that we even have to bother styling this.
\n
\n
\n
\n{{< /example >}}\n\n###### Unstyled\n\nUse the `list-none` class to disable the list style bullets or numbers.\n\n{{< example id=\"unordered-list-unstyled-example\" github=\"typography/lists.md\" show_dark=true >}}\n
Password requirements:
\n
\n
\n At least 10 characters (and up to 100 characters)\n
\n
\n At least one lowercase character\n
\n
\n Inclusion of at least one special character, e.g., ! @ # ?\n
\n
\n{{< /example >}}\n\n##### Ordered list\n\nUse the `` tag to create an ordered list of items with numbers.\n\n{{< example id=\"ordered-list-example\" github=\"typography/lists.md\" show_dark=true >}}\n
Top students:
\n\n
\n Bonnie Green with 70 points\n
\n
\n Jese Leos with 63 points\n
\n
\n Leslie Livingston with 57 points\n
\n\n{{< /example >}}\n\n###### Nested\n\nThis example can be used to nest multiple lists into each other.\n\n{{< example id=\"ordered-list-nested-example\" github=\"typography/lists.md\" show_dark=true >}}\n\n
\n List item one\n
\n
You might feel like you are being really \"organized\" o
\n
Nested navigation in UIs is a bad idea too, keep things as flat as possible.
\n
Nesting tons of folders in your source code is also not helpful.
\n
\n
\n
\n List item two\n
\n
I'm not sure if we'll bother styling more than two levels deep.
\n
Two is already too much, three is guaranteed to be a bad idea.
\n
If you nest four levels deep you belong in prison.
\n
\n
\n
\n List item three\n
\n
Again please don't nest lists if you want
\n
Nobody wants to look at this.
\n
I'm upset that we even have to bother styling this.
\n
\n
\n\n{{< /example >}}\n\n##### Description list\n\nCreate a description list by using the `
` tag and set the term and name with the following example.\n\n{{< example id=\"description-list-example\" github=\"typography/lists.md\" show_dark=true >}}\n
\n
\n
Email address
\n
yourname@flowbite.com
\n
\n
\n
Home address
\n
92 Miles Drive, Newark, NJ 07103, California, USA
\n
\n
\n
Phone number
\n
+00 123 456 789 / +12 345 678
\n
\n
\n{{< /example >}}\n\n##### List with icons\n\nUse this example to create a list of items with [custom SVG icons](https://flowbite.com/icons/) instead of the default bullets.\n\n{{< example id=\"list-icons-example\" github=\"typography/lists.md\" show_dark=true >}}\n
\n
\n \n Individual configuration\n
\n
\n \n No setup, or hidden fees\n
\n
\n \n Team size: 1 developer\n
\n
\n \n Premium support: 6 months\n
\n
\n \n Free updates: 6 months\n
\n
\n{{< /example >}}\n\n##### Advanced layout\n\nThis example can be used to show more details for each list item such as the user's name, email and profile picture.\n\n{{< example id=\"list-advanced-layout-example\" github=\"typography/lists.md\" show_dark=true >}}\n
\n
\n
\n
\n \n
\n
\n
\n Neil Sims\n
\n
\n email@flowbite.com\n
\n
\n
\n $320\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Bonnie Green\n
\n
\n email@flowbite.com\n
\n
\n
\n $3467\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Michael Gough\n
\n
\n email@flowbite.com\n
\n
\n
\n $67\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Thomas Lean\n
\n
\n email@flowbite.com\n
\n
\n
\n $2367\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n Lana Byrd\n
\n
\n email@flowbite.com\n
\n
\n
\n $367\n
\n
\n
\n
\n{{< /example >}}\n\n##### Horizontal list\n\nUse this example to create a horizontally aligned list of items.\n\n{{< example id=\"horizontal-list-example\" github=\"typography/lists.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n#### Links\n\nGet 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.\n\nHyperlinks are a great way to reduce bounce rate of the current page and encourage visitors to browse your website and become a returning user.\n\n##### Default link\n\nUse this example to set default styles to an inline link element.\n\n{{< example id=\"default-link-example\" class=\"flex justify-center\" github=\"typography/links.md\" show_dark=true >}}\nRead more\n{{< /example >}}\n\n##### Button\n\nThis example can be used to set a hyperlink on a button component.\n\n{{< example id=\"link-button-example\" class=\"flex justify-center\" github=\"typography/links.md\" show_dark=true >}}\nRead more\n{{< /example >}}\n\n##### Paragraph\n\nUse this example to set a link inside a paragraph with an underline style.\n\n{{< example id=\"paragraph-link-example\" github=\"typography/links.md\" show_dark=true >}}\n
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.
\n{{< /example >}}\n\n##### Icon link\n\nThis example can be used to set a custom [SVG icon](https://flowbite.com/icons/) inside the hyperlink element.\n\n{{< example id=\"link-icon-example\" class=\"flex justify-center\" github=\"typography/links.md\" show_dark=true >}}\n
\n\n{{< /example >}}\n\n##### CTA link\n\nUse this example to set a hyperlink on a CTA element with text and a custom icon.\n\n{{< example id=\"link-cta-example\" class=\"flex justify-center\" github=\"typography/links.md\" show_dark=true >}}\n\n \n Get started with our Figma Design System\n \n \n{{< /example >}}\n\n##### Card link\n\nUse this example to set a hyperlink on a card component.\n\n{{< example id=\"link-card-example\" class=\"flex justify-center\" github=\"typography/links.md\" show_dark=true >}}\n\n
\n\n{{< /example >}}\n\n##### Image link\n\nThis example can be used to set a hyperlink on an image inside a card component.\n\n{{< example id=\"link-image-example\" class=\"flex justify-center\" github=\"typography/links.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n#### Text\n\nGet 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.\n\n##### Font size\n\nUse this example to set the font size of inline text elements using the `text-{size}` class.\n\n{{< example id=\"font-size-example\" class=\"flex items-center space-x-4 rtl:space-x-reverse\" github=\"typography/text.md\" show_dark=true >}}\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n{{< /example >}}\n\n##### Font weight\n\nThis example can be used to the font weight of an inline text element using the `font-{size}` class.\n\n{{< example id=\"font-weight-example\" class=\"flex items-center space-x-8 rtl:space-x-reverse\" github=\"typography/text.md\" show_dark=true >}}\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n
Aa
\n{{< /example >}}\n\n##### Text color\n\nUse the `text-{color}` classes from Tailwind CSS to set the color of the inline text.\n\n{{< example id=\"text-color-example\" class=\"space-y-2\" github=\"typography/text.md\" show_dark=true >}}\n
This text is in the blue color.
\n
This text is in the green color.
\n
This text is in the red color.
\n
This text is in the purple color.
\n
This text is in the teal color.
\n{{< /example >}}\n\n##### Letter spacing\n\nIncrease or decrease the spacing between letters using the `tracking-{type}` class.\n\n{{< example id=\"letter-spacing-example\" class=\"space-y-3\" github=\"typography/text.md\" show_dark=true >}}\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n{{< /example >}}\n\n##### Text Decoration\n\nSet decoration for the inline text elements such as underline, line through or uppercase using classes from Tailwind CSS.\n\n###### Underline\n\nUnderline text by using the `underline` class or disable it using `no-underline`.\n\n{{< example id=\"text-underline-example\" github=\"typography/text.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n###### Line through\n\nSet a strikethrough line on a text element using the `line-through` class.\n\n{{< example id=\"text-line-through-example\" github=\"typography/text.md\" show_dark=true >}}\n$109$79\n{{< /example >}}\n\n###### Uppercase\n\nForce uppercase characters for a given portion of text using the `uppercase` class.\n\n{{< example id=\"text-uppercase-example\" github=\"typography/text.md\" show_dark=true >}}\n
The crypto identity primitive.
\n{{< /example >}}\n\n##### Font style\n\nSet italic or non italic styles with the utility classes from Tailwind CSS.\n\n###### Italic\n\nUse the `italic` class from Tailwind CSS to set italic font style to a text element.\n\n{{< example id=\"text-italic-example\" github=\"typography/text.md\" show_dark=true >}}\n
The crypto identity primitive.
\n{{< /example >}}\n\n###### Normal\n\nText elements by default are non-italic.\n\n{{< example id=\"text-normal-example\" github=\"typography/text.md\" show_dark=true >}}\n
The crypto identity primitive.
\n{{< /example >}}\n\n##### Line Height\n\nSet the height between lines using the `leading-{type}` classes from Tailwind CSS.\n\n###### Leading normal\n\nUse the `leading-normal` class to set default line height.\n\n{{< example id=\"font-leading-normal-example\" github=\"typography/text.md\" show_dark=true >}}\n
The Al-powered app will help you improve yourself by analysing your everyday life.
\n{{< /example >}}\n\n###### Leading relaxed\n\nUse the `leading-relaxed` class to increase the space between lines.\n\n{{< example id=\"leading-relaxed-example\" github=\"typography/text.md\" show_dark=true >}}\n
The Al-powered app will help you improve yourself by analysing your everyday life.
\n{{< /example >}}\n\n###### Leading loose\n\nUse the `leading-loose` class to set a large amount of space between text lines.\n\n{{< example id=\"leading-loose-example\" github=\"typography/text.md\" show_dark=true >}}\n
The Al-powered app will help you improve yourself by analysing your everyday life.
\n{{< /example >}}\n\n##### Text Align\n\nUse the following examples to align the text content to the left, center, or right side of the page.\n\n###### Left\n\nUse the `text-left` class to align the text to the left side of the page.\n\n{{< example id=\"text-left-example\" github=\"typography/text.md\" show_dark=true >}}\n
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
\n{{< /example >}}\n\n###### Center\n\nUse the `text-center` class to align the text content to the center of the page.\n\n{{< example id=\"text-center-example\" github=\"typography/text.md\" show_dark=true >}}\n
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
\n{{< /example >}}\n\n###### Right\n\nUse the `text-right` class to align the text element to the right side of the page.\n\n{{< example id=\"text-right-example\" github=\"typography/text.md\" show_dark=true >}}\n
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
\n{{< /example >}}\n\n###### Text justify\n\nUse the `text-justify` class to justify the text content.\n\n{{< example id=\"text-justify-example\" github=\"typography/text.md\" show_dark=true >}}\n
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
\n{{< /example >}}\n\n##### Whitespace\n\nConfigure the whitespace behaviour of inline text elements using classes from Tailwind CSS.\n\n###### Normal\n\nUse the `whitespace-normal` class to set the default whitespace behaviour.\n\n{{< example id=\"whitespace-normal-example\" github=\"typography/text.md\" show_dark=true >}}\n
\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\n
\n{{< /example >}}\n\n###### Nowrap\n\nUse the `whitespace-nowrap` class to prevent text being added to a new line when the full width has been reached.\n\n{{< example id=\"whitespace-nowrap-example\" github=\"typography/text.md\" show_dark=true >}}\n
\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\n
\n{{< /example >}}\n\n###### Pre line\n\nUse the `whitespace-pre-line` class to add whitespace exactly how it has been set from the source code.\n\n{{< example id=\"whitespace-preline-example\" github=\"typography/text.md\" show_dark=true >}}\n
\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\nThis is some text. This is some text. This is some text.\n
\n{{< /example >}}\n\n##### Text Decoration Style\n\nUpdate the text decoration style using the `decoration-{*}` classes from Tailwind CSS.\n\n{{< example id=\"text-decoration-style-example\" github=\"typography/text.md\" show_dark=true >}}\n
\n{{< /example >}}\n\n##### Opacity\n\nUse the `text-{color}-{opacity}` class from Tailwind CSS to set the opacity of inline text elements.\n\n{{< example id=\"text-opacity-example\" class=\"space-y-3\" github=\"typography/text.md\" show_dark=true >}}\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n
Flowbite app will help you improve yourself by analysing your everyday life.
\n{{< /example >}}\n\n#### HR (Horizontal Line)\n\nThe HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts.\n\n##### Default HR\n\nUse this example to separate text content with a `` horizontal line.\n\n{{< example id=\"default-hr-example\" github=\"typography/hr.md\" show_dark=true >}}\n
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.
\n\n
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.
\n{{< /example >}}\n\n##### Trimmed\n\nUse this example to show a shorter version of the horizontal line.\n\n{{< example id=\"hr-trimmed-example\" github=\"typography/hr.md\" show_dark=true >}}\n
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.
\n\n
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.
\n{{< /example >}}\n\n##### Icon HR\n\nThis example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element.\n\n{{< example id=\"hr-icon-example\" class=\"text-center\" github=\"typography/hr.md\" show_dark=true >}}\n
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.
\n
\n \n
\n \n
\n
\n
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.
\n{{< /example >}}\n\n##### HR with text\n\nUse this example to add a text in the middle of the HR component.\n\n{{< example id=\"hr-text-example\" class=\"text-center\" github=\"typography/hr.md\" show_dark=true >}}\n
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.
\n
\n \n or\n
\n
Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.
\n{{< /example >}}\n\n##### HR shape\n\nThis example can be used to separate content with a HR tag as a shape instead of a line.\n\n{{< example id=\"hr-shape-example\" github=\"typography/hr.md\" show_dark=true >}}\n
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.
\n\n
\n
\"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.\"
\n
\n{{< /example >}}\n\n### Plugins\n\n#### Charts\n\nThe 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.\n\nWe 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.\n\nYou 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.\n\n##### Getting started\n\nBefore continuing make sure that you have Tailwind CSS, Flowbite and ApexCharts installed in your project.\n\n1. Follow the }}\">quickstart guide from Flowbite to install the plugin styles and functionality\n\n2. Make sure that you have ApexCharts installed and configured in your project:\n\nInstall ApexChart via NPM and save it in your `package.json` file:\n\n```bash\nnpm install apexcharts@3.46.0 --save\n``` \n\nAlternatively, you can also just include the CDN link:\n\n```html\n\n```\n\nNow that you have all the libraries installed you can copy-paste the chart examples below in your code.\n\n##### Area chart\n\nUse this example to show a basic area chart by setting the `type: \"area\"` option in JavaScript:\n\n{{< 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=`\nconst options = {\n chart: {\n height: \"100%\",\n maxWidth: \"100%\",\n type: \"area\",\n fontFamily: \"Inter, sans-serif\",\n dropShadow: {\n enabled: false,\n },\n toolbar: {\n show: false,\n },\n },\n tooltip: {\n enabled: true,\n x: {\n show: false,\n },\n },\n fill: {\n type: \"gradient\",\n gradient: {\n opacityFrom: 0.55,\n opacityTo: 0,\n shade: \"#1C64F2\",\n gradientToColors: [\"#1C64F2\"],\n },\n },\n dataLabels: {\n enabled: false,\n },\n stroke: {\n width: 6,\n },\n grid: {\n show: false,\n strokeDashArray: 4,\n padding: {\n left: 2,\n right: 2,\n top: 0\n },\n },\n series: [\n {\n name: \"New users\",\n data: [6500, 6418, 6456, 6526, 6356, 6456],\n color: \"#1A56DB\",\n },\n ],\n xaxis: {\n categories: ['01 February', '02 February', '03 February', '04 February', '05 February', '06 February', '07 February'],\n labels: {\n show: false,\n },\n axisBorder: {\n show: false,\n },\n axisTicks: {\n show: false,\n },\n },\n yaxis: {\n show: false,\n },\n}\n\nif (document.getElementById(\"area-chart\") && typeof ApexCharts !== 'undefined') {\n const chart = new ApexCharts(document.getElementById(\"area-chart\"), options);\n chart.render();\n}\n` >}}\n
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.
\n
Calculation
\n
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.
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.
\n
Calculation
\n
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.
\n{{< /example >}}\n\n##### Pie chart\n\nCreate 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:\n\n{{< 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=`\nconst getChartOptions = () => {\n return {\n series: [52.8, 26.8, 20.4],\n colors: [\"#1C64F2\", \"#16BDCA\", \"#9061F9\"],\n chart: {\n height: 420,\n width: \"100%\",\n type: \"pie\",\n },\n stroke: {\n colors: [\"white\"],\n lineCap: \"\",\n },\n plotOptions: {\n pie: {\n labels: {\n show: true,\n },\n size: \"100%\",\n dataLabels: {\n offset: -25\n }\n },\n },\n labels: [\"Direct\", \"Organic search\", \"Referrals\"],\n dataLabels: {\n enabled: true,\n style: {\n fontFamily: \"Inter, sans-serif\",\n },\n },\n legend: {\n position: \"bottom\",\n fontFamily: \"Inter, sans-serif\",\n },\n yaxis: {\n labels: {\n formatter: function (value) {\n return value + \"%\"\n },\n },\n },\n xaxis: {\n labels: {\n formatter: function (value) {\n return value + \"%\"\n },\n },\n axisTicks: {\n show: false,\n },\n axisBorder: {\n show: false,\n },\n },\n }\n}\n\nif (document.getElementById(\"pie-chart\") && typeof ApexCharts !== 'undefined') {\n const chart = new ApexCharts(document.getElementById(\"pie-chart\"), getChartOptions());\n chart.render();\n}\n` >}}\n
\n\n
\n
\n
\n
Website traffic
\n \n
\n
\n
Activity growth - Incremental
\n
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.
\n
Calculation
\n
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.
\n{{< /example >}}\n\n##### Donut chart\n\nSet 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.\n\nIn 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.\n\n{{< 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=`\nconst getChartOptions = () => {\n return {\n series: [35.1, 23.5, 2.4, 5.4],\n colors: [\"#1C64F2\", \"#16BDCA\", \"#FDBA8C\", \"#E74694\"],\n chart: {\n height: 320,\n width: \"100%\",\n type: \"donut\",\n },\n stroke: {\n colors: [\"transparent\"],\n lineCap: \"\",\n },\n plotOptions: {\n pie: {\n donut: {\n labels: {\n show: true,\n name: {\n show: true,\n fontFamily: \"Inter, sans-serif\",\n offsetY: 20,\n },\n total: {\n showAlways: true,\n show: true,\n label: \"Unique visitors\",\n fontFamily: \"Inter, sans-serif\",\n formatter: function (w) {\n const sum = w.globals.seriesTotals.reduce((a, b) => {\n return a + b\n }, 0)\n return '$' + sum + 'k'\n },\n },\n value: {\n show: true,\n fontFamily: \"Inter, sans-serif\",\n offsetY: -20,\n formatter: function (value) {\n return value + \"k\"\n },\n },\n },\n size: \"80%\",\n },\n },\n },\n grid: {\n padding: {\n top: -2,\n },\n },\n labels: [\"Direct\", \"Sponsor\", \"Affiliate\", \"Email marketing\"],\n dataLabels: {\n enabled: false,\n },\n legend: {\n position: \"bottom\",\n fontFamily: \"Inter, sans-serif\",\n },\n yaxis: {\n labels: {\n formatter: function (value) {\n return value + \"k\"\n },\n },\n },\n xaxis: {\n labels: {\n formatter: function (value) {\n return value + \"k\"\n },\n },\n axisTicks: {\n show: false,\n },\n axisBorder: {\n show: false,\n },\n },\n }\n}\n\nif (document.getElementById(\"donut-chart\") && typeof ApexCharts !== 'undefined') {\n const chart = new ApexCharts(document.getElementById(\"donut-chart\"), getChartOptions());\n chart.render();\n\n // Get all the checkboxes by their class name\n const checkboxes = document.querySelectorAll('#devices input[type=\"checkbox\"]');\n\n // Function to handle the checkbox change event\n function handleCheckboxChange(event, chart) {\n const checkbox = event.target;\n if (checkbox.checked) {\n switch(checkbox.value) {\n case 'desktop':\n chart.updateSeries([15.1, 22.5, 4.4, 8.4]);\n break;\n case 'tablet':\n chart.updateSeries([25.1, 26.5, 1.4, 3.4]);\n break;\n case 'mobile':\n chart.updateSeries([45.1, 27.5, 8.4, 2.4]);\n break;\n default:\n chart.updateSeries([55.1, 28.5, 1.4, 5.4]);\n }\n\n } else {\n chart.updateSeries([35.1, 23.5, 2.4, 5.4]);\n }\n }\n\n // Attach the event listener to each checkbox\n checkboxes.forEach((checkbox) => {\n checkbox.addEventListener('change', (event) => handleCheckboxChange(event, chart));\n });\n}\n` >}}\n
\n \n
\n
\n
Website traffic
\n \n
\n
\n
Activity growth - Incremental
\n
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.
\n
Calculation
\n
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.
\n{{< /example >}}\n\n##### Radial chart\n\nTo 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:\n\n{{< 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=`\nconst getChartOptions = () => {\n return {\n series: [90, 85, 70],\n colors: [\"#1C64F2\", \"#16BDCA\", \"#FDBA8C\"],\n chart: {\n height: \"350px\",\n width: \"100%\",\n type: \"radialBar\",\n sparkline: {\n enabled: true,\n },\n },\n plotOptions: {\n radialBar: {\n track: {\n background: '#E5E7EB',\n },\n dataLabels: {\n show: false,\n },\n hollow: {\n margin: 0,\n size: \"32%\",\n }\n },\n },\n grid: {\n show: false,\n strokeDashArray: 4,\n padding: {\n left: 2,\n right: 2,\n top: -23,\n bottom: -20,\n },\n },\n labels: [\"Done\", \"In progress\", \"To do\"],\n legend: {\n show: true,\n position: \"bottom\",\n fontFamily: \"Inter, sans-serif\",\n },\n tooltip: {\n enabled: true,\n x: {\n show: false,\n },\n },\n yaxis: {\n show: false,\n labels: {\n formatter: function (value) {\n return value + '%';\n }\n }\n }\n }\n}\n\nif (document.getElementById(\"radial-chart\") && typeof ApexCharts !== 'undefined') {\n const chart = new ApexCharts(document.querySelector(\"#radial-chart\"), getChartOptions());\n chart.render();\n}\n` >}}\n
\n
\n
\n
\n
Your team's progress
\n \n
\n
\n
Activity growth - Incremental
\n
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.
\n
Calculation
\n
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.
\n\n{{< /example >}}\n\n##### JavaScript behaviour\n\nWith 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.\n\nFor example, here's how you can initialize a new chart with an options object and call the `render()` function:\n\n```javascript\nconst chart = new ApexCharts(el, options);\nchart.render();\n```\n\nYou can also update the options or data on demand. Here's an example how you can add or remove data:\n\n```javascript\nconst chart = new ApexCharts(el, options);\n\nchart.updateSeries([{\n data: [342, 442, 311, 421, 212]\n}]);\n```\n\nYou can also toggle the visibility of a data series by calling the `toggleSeries()` method:\n\n```javascript\nconst chart = new ApexCharts(el, {\n series: [{\n name: 'Developer Edition'\n data: [342, 442, 311, 421, 212]\n }, {\n name: 'Designer Edition'\n data: [342, 442, 311, 421, 212]\n }]\n});\n\nchart.toggleSeries('Designer Edition');\n```\n\nYou can read more about all of the methods by checking out the official ApexCharts documentation.\n\n##### More examples\n\nCheck out more chart examples built with Flowbite, Tailwind CSS and Flowbite with these resources:\n\n- [Flowbite Admin Dashboard](https://github.com/themesberg/flowbite-admin-dashboard)\n\n#### Datatables\n\nThe 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.\n\nThis 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.\n\nAll 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.\n\n##### Getting started\n\nBefore continuing make sure that you have Tailwind CSS, Flowbite, and Simple Datables in your project.\n\n1. Install Tailwind CSS and follow our }}\">quickstart guide to install Flowbite and the official plugin\n\n2. Install the `simple-datatables` library using NPM:\n\n```bash\nnpm install simple-datatables --save\n```\n\nAlternatively, you can also include it in your project using CDN:\n\n```html\n\n```\n\nNow that you have installed all libraries you can start copy-pasting the datatable components from Flowbite.\n\nMake sure that in addition to the HTML markup you also copy the JavaScript code to initialize the component.\n\n##### Default datatable\n\nUse this example to show table data with default sorting and pagination functionalities.\n\n{{< 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=`\nif (document.getElementById(\"default-table\") && typeof simpleDatatables.DataTable !== 'undefined') {\n const dataTable = new simpleDatatables.DataTable(\"#default-table\", {\n searchable: false,\n perPageSelect: false\n });\n}\n` >}}\n
\n \n
\n
\n \n Name\n \n \n
\n
\n \n Release Date\n \n \n
\n
\n \n NPM Downloads\n \n \n
\n
\n \n Growth\n \n \n
\n
\n \n \n
\n
Flowbite
\n
2021/25/09
\n
269000
\n
49%
\n
\n
\n
React
\n
2013/24/05
\n
4500000
\n
24%
\n
\n
\n
Angular
\n
2010/20/09
\n
2800000
\n
17%
\n
\n
\n
Vue
\n
2014/12/02
\n
3600000
\n
30%
\n
\n
\n
Svelte
\n
2016/26/11
\n
1200000
\n
57%
\n
\n
\n
Ember
\n
2011/08/12
\n
500000
\n
44%
\n
\n
\n
Backbone
\n
2010/13/10
\n
300000
\n
9%
\n
\n
\n
jQuery
\n
2006/28/01
\n
6000000
\n
5%
\n
\n
\n
Bootstrap
\n
2011/19/08
\n
1800000
\n
12%
\n
\n
\n
Foundation
\n
2011/23/09
\n
700000
\n
8%
\n
\n
\n
Bulma
\n
2016/24/10
\n
500000
\n
7%
\n
\n
\n
Next.js
\n
2016/25/10
\n
2300000
\n
45%
\n
\n
\n
Nuxt.js
\n
2016/16/10
\n
900000
\n
50%
\n
\n
\n
Meteor
\n
2012/17/01
\n
1000000
\n
10%
\n
\n
\n
Aurelia
\n
2015/08/07
\n
200000
\n
20%
\n
\n
\n
Inferno
\n
2016/27/09
\n
100000
\n
35%
\n
\n
\n
Preact
\n
2015/16/08
\n
600000
\n
28%
\n
\n
\n
Lit
\n
2018/28/05
\n
400000
\n
60%
\n
\n
\n
Alpine.js
\n
2019/02/11
\n
300000
\n
70%
\n
\n
\n
Stimulus
\n
2018/06/03
\n
150000
\n
25%
\n
\n
\n
Solid
\n
2021/05/07
\n
250000
\n
80%
\n
\n \n
\n{{< /example >}}\n\n##### Table search\n\nSet the `searchable` option to `true` to enable the search functionality for all table data.\n\n{{< 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=`\nif (document.getElementById(\"search-table\") && typeof simpleDatatables.DataTable !== 'undefined') {\n const dataTable = new simpleDatatables.DataTable(\"#search-table\", {\n searchable: true,\n sortable: false\n });\n}\n` >}}\n
\n\n{{< /example >}}\n\n##### Filtering data\n\nTo 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.\n\n{{< 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=`\nif (document.getElementById(\"filter-table\") && typeof simpleDatatables.DataTable !== 'undefined') {\n const dataTable = new simpleDatatables.DataTable(\"#filter-table\", {\n tableRender: (_data, table, type) => {\n if (type === \"print\") {\n return table\n }\n const tHead = table.childNodes[0]\n const filterHeaders = {\n nodeName: \"TR\",\n attributes: {\n class: \"search-filtering-row\"\n },\n childNodes: tHead.childNodes[0].childNodes.map(\n (_th, index) => ({nodeName: \"TH\",\n childNodes: [\n {\n nodeName: \"INPUT\",\n attributes: {\n class: \"datatable-input\",\n type: \"search\",\n \"data-columns\": \"[\" + index + \"]\"\n }\n }\n ]})\n )\n }\n tHead.childNodes.push(filterHeaders)\n return table\n }\n });\n}\n` >}}\n
\n \n
\n
\n \n Name\n \n \n
\n
\n \n Category\n \n \n
\n
\n \n Brand\n \n \n
\n
\n \n Price\n \n \n
\n
\n \n Stock\n \n \n
\n
\n \n Total Sales\n \n \n
\n
\n \n Status\n \n \n
\n
\n \n \n
\n
Apple iMac
\n
Computers
\n
Apple
\n
$1,299
\n
50
\n
200
\n
In Stock
\n
\n
\n
Apple iPhone
\n
Mobile Phones
\n
Apple
\n
$999
\n
120
\n
300
\n
In Stock
\n
\n
\n
Samsung Galaxy
\n
Mobile Phones
\n
Samsung
\n
$899
\n
80
\n
150
\n
In Stock
\n
\n
\n
Dell XPS 13
\n
Computers
\n
Dell
\n
$1,099
\n
30
\n
120
\n
In Stock
\n
\n
\n
HP Spectre x360
\n
Computers
\n
HP
\n
$1,299
\n
25
\n
80
\n
In Stock
\n
\n
\n
Google Pixel 6
\n
Mobile Phones
\n
Google
\n
$799
\n
100
\n
200
\n
In Stock
\n
\n
\n
Sony WH-1000XM4
\n
Headphones
\n
Sony
\n
$349
\n
60
\n
150
\n
In Stock
\n
\n
\n
Apple AirPods Pro
\n
Headphones
\n
Apple
\n
$249
\n
200
\n
300
\n
In Stock
\n
\n
\n
Asus ROG Zephyrus
\n
Computers
\n
Asus
\n
$1,899
\n
15
\n
50
\n
In Stock
\n
\n
\n
Microsoft Surface Pro 7
\n
Computers
\n
Microsoft
\n
$899
\n
40
\n
100
\n
In Stock
\n
\n
\n
Samsung QLED TV
\n
Televisions
\n
Samsung
\n
$1,299
\n
25
\n
70
\n
In Stock
\n
\n
\n
LG OLED TV
\n
Televisions
\n
LG
\n
$1,499
\n
20
\n
50
\n
In Stock
\n
\n
\n
Canon EOS R5
\n
Cameras
\n
Canon
\n
$3,899
\n
10
\n
30
\n
In Stock
\n
\n
\n
Nikon Z7 II
\n
Cameras
\n
Nikon
\n
$3,299
\n
8
\n
25
\n
In Stock
\n
\n
\n
Apple Watch Series 7
\n
Wearables
\n
Apple
\n
$399
\n
150
\n
500
\n
In Stock
\n
\n
\n
Fitbit Charge 5
\n
Wearables
\n
Fitbit
\n
$179
\n
100
\n
250
\n
In Stock
\n
\n
\n
Dyson V11 Vacuum
\n
Home Appliances
\n
Dyson
\n
$599
\n
30
\n
90
\n
In Stock
\n
\n
\n
iRobot Roomba i7+
\n
Home Appliances
\n
iRobot
\n
$799
\n
20
\n
70
\n
In Stock
\n
\n
\n
Bose SoundLink Revolve
\n
Speakers
\n
Bose
\n
$199
\n
80
\n
200
\n
In Stock
\n
\n
\n
Sonos One
\n
Speakers
\n
Sonos
\n
$219
\n
60
\n
180
\n
In Stock
\n
\n
\n
Apple iPad Pro
\n
Tablets
\n
Apple
\n
$1,099
\n
50
\n
150
\n
In Stock
\n
\n
\n
Samsung Galaxy Tab S7
\n
Tablets
\n
Samsung
\n
$649
\n
70
\n
130
\n
In Stock
\n
\n
\n
Amazon Echo Dot
\n
Smart Home
\n
Amazon
\n
$49
\n
300
\n
800
\n
In Stock
\n
\n
\n
Google Nest Hub
\n
Smart Home
\n
Google
\n
$89
\n
150
\n
400
\n
In Stock
\n
\n
\n
PlayStation 5
\n
Gaming Consoles
\n
Sony
\n
$499
\n
10
\n
500
\n
Out of Stock
\n
\n
\n
Xbox Series X
\n
Gaming Consoles
\n
Microsoft
\n
$499
\n
15
\n
450
\n
Out of Stock
\n
\n
\n
Nintendo Switch
\n
Gaming Consoles
\n
Nintendo
\n
$299
\n
40
\n
600
\n
In Stock
\n
\n
\n
Apple MacBook Pro
\n
Computers
\n
Apple
\n
$1,299
\n
20
\n
100
\n
In Stock
\n
\n \n
\n{{< /example >}}\n\n##### Sorting data\n\nBy 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`.\n\n{{< 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=`\nif (document.getElementById(\"sorting-table\") && typeof simpleDatatables.DataTable !== 'undefined') {\n const dataTable = new simpleDatatables.DataTable(\"#sorting-table\", {\n searchable: false,\n perPageSelect: false,\n sortable: true\n });\n}\n` >}}\n
\n \n
\n
\n \n Country\n \n \n
\n
\n \n GDP\n \n \n
\n
\n \n Population\n \n \n
\n
\n \n GDP per Capita\n \n \n
\n
\n \n \n
\n
United States
\n
$21433 billion
\n
331 million
\n
$64763
\n
\n
\n
China
\n
$14342 billion
\n
1441 million
\n
$9957
\n
\n
\n
Japan
\n
$5082 billion
\n
126 million
\n
$40335
\n
\n
\n
Germany
\n
$3846 billion
\n
83 million
\n
$46386
\n
\n
\n
India
\n
$2875 billion
\n
1380 million
\n
$2083
\n
\n
\n
United Kingdom
\n
$2829 billion
\n
67 million
\n
$42224
\n
\n
\n
France
\n
$2716 billion
\n
65 million
\n
$41723
\n
\n
\n
Italy
\n
$2001 billion
\n
60 million
\n
$33350
\n
\n
\n
Canada
\n
$1643 billion
\n
38 million
\n
$43237
\n
\n
\n
South Korea
\n
$1631 billion
\n
52 million
\n
$31365
\n
\n
\n
Russia
\n
$1460 billion
\n
144 million
\n
$10139
\n
\n
\n
Brazil
\n
$1430 billion
\n
213 million
\n
$6718
\n
\n
\n
Australia
\n
$1393 billion
\n
25 million
\n
$55720
\n
\n
\n
Spain
\n
$1326 billion
\n
47 million
\n
$28255
\n
\n
\n
Mexico
\n
$1194 billion
\n
129 million
\n
$9255
\n
\n
\n
Indonesia
\n
$1158 billion
\n
273 million
\n
$4241
\n
\n
\n
Netherlands
\n
$1010 billion
\n
17 million
\n
$59412
\n
\n
\n
Saudi Arabia
\n
$804 billion
\n
35 million
\n
$22914
\n
\n
\n
Turkey
\n
$761 billion
\n
84 million
\n
$9060
\n
\n
\n
Switzerland
\n
$741 billion
\n
9 million
\n
$82333
\n
\n \n
\n{{< /example >}}\n\n##### Table pagination\n\nPagination 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. \n\nYou can also set the `perPageSelect` option to set the selection options of the table.\n\n{{< 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=`\nif (document.getElementById(\"pagination-table\") && typeof simpleDatatables.DataTable !== 'undefined') {\n const dataTable = new simpleDatatables.DataTable(\"#pagination-table\", {\n paging: true,\n perPage: 5,\n perPageSelect: [5, 10, 15, 20, 25],\n sortable: false\n });\n}\n` >}}\n
\n \n
\n
\n \n Model Name\n \n
\n
\n \n Developer\n \n
\n
\n \n Release Date\n \n
\n
\n \n Parameters\n \n
\n
\n \n Primary Application\n \n
\n
\n \n \n
\n
GPT-4
\n
OpenAI
\n
March 2023
\n
1 trillion
\n
Natural Language Processing
\n
\n
\n
BERT
\n
Google
\n
October 2018
\n
340 million
\n
Natural Language Understanding
\n
\n
\n
DALL-E 2
\n
OpenAI
\n
April 2022
\n
3.5 billion
\n
Image Generation
\n
\n
\n
T5
\n
Google
\n
October 2019
\n
11 billion
\n
Text-to-Text Transfer
\n
\n
\n
GPT-3.5
\n
OpenAI
\n
November 2022
\n
175 billion
\n
Natural Language Processing
\n
\n
\n
Codex
\n
OpenAI
\n
August 2021
\n
12 billion
\n
Code Generation
\n
\n
\n
PaLM 2
\n
Google
\n
May 2023
\n
540 billion
\n
Multilingual Understanding
\n
\n
\n
LaMDA
\n
Google
\n
May 2021
\n
137 billion
\n
Conversational AI
\n
\n
\n
CLIP
\n
OpenAI
\n
January 2021
\n
400 million
\n
Image and Text Understanding
\n
\n
\n
XLNet
\n
Google
\n
June 2019
\n
340 million
\n
Natural Language Processing
\n
\n
\n
Meena
\n
Google
\n
January 2020
\n
2.6 billion
\n
Conversational AI
\n
\n
\n
BigGAN
\n
Google
\n
September 2018
\n
Unlimited
\n
Image Generation
\n
\n
\n
Electra
\n
Google
\n
March 2020
\n
14 million
\n
Natural Language Understanding
\n
\n
\n
Swin Transformer
\n
Microsoft
\n
April 2021
\n
88 million
\n
Vision Processing
\n
\n
\n
GPT-NeoX-20B
\n
EleutherAI
\n
April 2022
\n
20 billion
\n
Natural Language Processing
\n
\n
\n
Ernie 3.0
\n
Baidu
\n
July 2021
\n
10 billion
\n
Natural Language Processing
\n
\n
\n
Turing-NLG
\n
Microsoft
\n
February 2020
\n
17 billion
\n
Natural Language Processing
\n
\n
\n
Wu Dao 2.0
\n
Beijing Academy of AI
\n
June 2021
\n
1.75 trillion
\n
Multimodal Processing
\n
\n
\n
Jukebox
\n
OpenAI
\n
April 2020
\n
1.2 billion
\n
Music Generation
\n
\n
\n
StyleGAN2
\n
NVIDIA
\n
February 2020
\n
Unlimited
\n
Image Generation
\n
\n
\n
FLAN
\n
Google
\n
December 2021
\n
137 billion
\n
Few-shot Learning
\n
\n
\n
GShard
\n
Google
\n
June 2020
\n
600 billion
\n
Multilingual Understanding
\n
\n
\n
AlphaFold
\n
DeepMind
\n
December 2020
\n
Unknown
\n
Protein Folding
\n
\n
\n
GPT-J
\n
EleutherAI
\n
June 2021
\n
6 billion
\n
Natural Language Processing
\n
\n
\n
M6
\n
Alibaba
\n
December 2020
\n
10 billion
\n
Multimodal Processing
\n
\n
\n
Megatron-Turing NLG
\n
NVIDIA & Microsoft
\n
October 2021
\n
530 billion
\n
Natural Language Processing
\n
\n
\n
DeepSpeed
\n
Microsoft
\n
February 2020
\n
Not disclosed
\n
AI Training Optimization
\n
\n \n
\n{{< /example >}}\n\n##### Selecting rows\n\nUse 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.\n\nUse the `datatable.selectrow` event to write your own code and get the data from the selected table row.\n\n{{< 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=`\nif (document.getElementById(\"selection-table\") && typeof simpleDatatables.DataTable !== 'undefined') {\n\n let multiSelect = true;\n let rowNavigation = false;\n let table = null;\n\n const resetTable = function() {\n if (table) {\n table.destroy();\n }\n\n const options = {\n rowRender: (row, tr, _index) => {\n if (!tr.attributes) {\n tr.attributes = {};\n }\n if (!tr.attributes.class) {\n tr.attributes.class = \"\";\n }\n if (row.selected) {\n tr.attributes.class += \" selected\";\n } else {\n tr.attributes.class = tr.attributes.class.replace(\" selected\", \"\");\n }\n return tr;\n }\n };\n if (rowNavigation) {\n options.rowNavigation = true;\n options.tabIndex = 1;\n }\n\n table = new simpleDatatables.DataTable(\"#selection-table\", options);\n\n // Mark all rows as unselected\n table.data.data.forEach(data => {\n data.selected = false;\n });\n\n table.on(\"datatable.selectrow\", (rowIndex, event) => {\n event.preventDefault();\n const row = table.data.data[rowIndex];\n if (row.selected) {\n row.selected = false;\n } else {\n if (!multiSelect) {\n table.data.data.forEach(data => {\n data.selected = false;\n });\n }\n row.selected = true;\n }\n table.update();\n });\n };\n\n // Row navigation makes no sense on mobile, so we deactivate it and hide the checkbox.\n const isMobile = window.matchMedia(\"(any-pointer:coarse)\").matches;\n if (isMobile) {\n rowNavigation = false;\n }\n\n resetTable();\n}\n` >}}\n
\n \n
\n
\n \n Name\n \n \n
\n
\n \n Release Date\n \n \n
\n
\n \n NPM Downloads\n \n \n
\n
\n \n Growth\n \n \n
\n
\n \n \n
\n
Flowbite
\n
2021/25/09
\n
269000
\n
49%
\n
\n
\n
React
\n
2013/24/05
\n
4500000
\n
24%
\n
\n
\n
Angular
\n
2010/20/09
\n
2800000
\n
17%
\n
\n
\n
Vue
\n
2014/12/02
\n
3600000
\n
30%
\n
\n
\n
Svelte
\n
2016/26/11
\n
1200000
\n
57%
\n
\n
\n
Ember
\n
2011/08/12
\n
500000
\n
44%
\n
\n
\n
Backbone
\n
2010/13/10
\n
300000
\n
9%
\n
\n
\n
jQuery
\n
2006/28/01
\n
6000000
\n
5%
\n
\n
\n
Bootstrap
\n
2011/19/08
\n
1800000
\n
12%
\n
\n
\n
Foundation
\n
2011/23/09
\n
700000
\n
8%
\n
\n
\n
Bulma
\n
2016/24/10
\n
500000
\n
7%
\n
\n
\n
Next.js
\n
2016/25/10
\n
2300000
\n
45%
\n
\n
\n
Nuxt.js
\n
2016/16/10
\n
900000
\n
50%
\n
\n
\n
Meteor
\n
2012/17/01
\n
1000000
\n
10%
\n
\n
\n
Aurelia
\n
2015/08/07
\n
200000
\n
20%
\n
\n
\n
Inferno
\n
2016/27/09
\n
100000
\n
35%
\n
\n
\n
Preact
\n
2015/16/08
\n
600000
\n
28%
\n
\n
\n
Lit
\n
2018/28/05
\n
400000
\n
60%
\n
\n
\n
Alpine.js
\n
2019/02/11
\n
300000
\n
70%
\n
\n
\n
Stimulus
\n
2018/06/03
\n
150000
\n
25%
\n
\n
\n
Solid
\n
2021/05/07
\n
250000
\n
80%
\n
\n \n
\n{{< /example >}}\n\n##### Export files\n\nIf 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.\n\n{{< example id=\"export-datatable-example\" class=\"dark:bg-gray-900\" github=\"plugins/datatables.md\" show_dark=true datatables=true disable_init_js=true javascript=`\nif (document.getElementById(\"export-table\") && typeof simpleDatatables.DataTable !== 'undefined') {\n\n const exportCustomCSV = function(dataTable, userOptions = {}) {\n // A modified CSV export that includes a row of minuses at the start and end.\n const clonedUserOptions = {\n ...userOptions\n }\n clonedUserOptions.download = false\n const csv = simpleDatatables.exportCSV(dataTable, clonedUserOptions)\n // If CSV didn't work, exit.\n if (!csv) {\n return false\n }\n const defaults = {\n download: true,\n lineDelimiter: \"\\n\",\n columnDelimiter: \";\"\n }\n const options = {\n ...defaults,\n ...clonedUserOptions\n }\n const separatorRow = Array(dataTable.data.headings.filter((_heading, index) => !dataTable.columns.settings[index]?.hidden).length)\n .fill(\"+\")\n .join(\"+\"); // Use \"+\" as the delimiter\n\n const str = separatorRow + options.lineDelimiter + csv + options.lineDelimiter + separatorRow;\n\n if (userOptions.download) {\n // Create a link to trigger the download\n const link = document.createElement(\"a\");\n link.href = encodeURI(\"data:text/csv;charset=utf-8,\" + str);\n link.download = (options.filename || \"datatable_export\") + \".txt\";\n // Append the link\n document.body.appendChild(link);\n // Trigger the download\n link.click();\n // Remove the link\n document.body.removeChild(link);\n }\n\n return str\n }\n const table = new simpleDatatables.DataTable(\"#export-table\", {\n template: (options, dom) => \"
\n{{< /example >}}\n\n##### JavaScript behaviour\n\nLearn 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.\n\nAfter 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.\n\n```javascript\n// if you installed via CDN\nconst dataTable = new simpleDatatables.DataTable(\"#default-table\");\n\n// if you installed via NPM\nimport { DataTable } from \"simple-datatables\";\nconst dataTable = DataTable(\"#default-table\");\n```\n\nYou can pass an object of options as the second argument to customize the table appearance and behavior.\n\n```javascript\nconst dataTable = new simpleDatatables.DataTable(\"#default-table\", options);\n```\n\nAfter initializing the DataTable, you can access the instance methods and properties.\n\nHere's a full list of the exposed methods and properties from the simple-datatables repository.\n\n##### Options\n\nCheck out some of the more commonly used options that you can pass to the DataTable instance.\n\n###### Injecting data\n\nUse the `data` option to pass data from an array of arrays to the table using JavaScript.\n\n```javascript\nconst customData = {\n \"headings\": [\n \"Name\",\n \"Company\",\n \"Date\",\n ],\n \"data\": [\n [\n \"Flowbite\",\n \"Bergside\",\n \"05/23/2023\",\n ],\n [\n \"Next.js\",\n \"Vercel\",\n \"03/12/2024\",\n ],\n};\n\nconst dataTable = new DataTable(\"#default-table\", { data: customData });\n```\n\nThis is a useful feature where instead of a hard coded array you can pass data from an API or a JSON file.\n\n###### Appearance\n\nUse 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.\n\n```javascript\nconst dataTable = new DataTable(\"#default-table\", {\n caption: \"Flowbite is an open-source library\",\n classes: {\n // add custom HTML classes, full list: https://fiduswriter.github.io/simple-datatables/documentation/classes\n // we recommend keeping the default ones in addition to whatever you want to add because Flowbite hooks to the default classes for styles\n },\n footer: true, // enable or disable the footer\n header: true, // enable or disable the header\n labels: {\n // add custom text for the labels, full list: https://fiduswriter.github.io/simple-datatables/documentation/labels\n },\n template: (options, dom) => {\n // add custom HTML template for the table, full list: https://fiduswriter.github.io/simple-datatables/documentation/template\n },\n scrollY: \"300px\", // enable vertical scrolling\n});\n```\n\nThese 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.\n\n###### Pagination\n\nUse these options to enable pagination, set the number of rows per page, and customize the appearance.\n\n```javascript\nconst dataTable = new DataTable(\"#default-table\", {\n paging: true, // enable or disable pagination\n perPage: 10, // set the number of rows per page\n perPageSelect: [5, 10, 20, 50], // set the number of rows per page options\n firstLast: true, // enable or disable the first and last buttons\n nextPrev: true, // enable or disable the next and previous buttons\n});\n```\n\nPagination is a useful feature when you have a large dataset and you want to split it into multiple pages.\n\n###### Searching\n\nThese options can be used to enable searching, set the search placeholder, and customize the appearance.\n\n```javascript\nconst dataTable = new DataTable(\"#default-table\", {\n searchable: true, // enable or disable searching\n sensitivity: \"base\" // set the search sensitivity (base, accent, case, variant)\n searchQuerySeparator: \" \", // set the search query separator\n});\n```\n\nThe searching feature is great when you have a large dataset and you want to search for a specific row.\n\n###### Sorting\n\nUse these options to enable sorting, set the default sort column, and customize the sort appearance.\n\n```javascript\nconst dataTable = new DataTable(\"#default-table\", {\n sortable: true, // enable or disable sorting\n locale: \"en-US\", // set the locale for sorting\n numeric: true, // enable or disable numeric sorting\n caseFirst: \"false\", // set the case first for sorting (upper, lower)\n ignorePunctuation: true // enable or disable punctuation sorting\n});\n```\n\nThe sorting feature is useful when you want to sort the table rows based on a specific column.\n\n##### Methods\n\nCheck out some of the common methods that you can use to interact with the DataTable instance.\n\n```javascript\n// programatically search the table where the \"term\" variable is the query string\ndataTable.search(term, columns);\n\n// add a new table row data to the table (considering you have four columns)\ndataTable.insert({\n \"Heading 1\": \"Cell 1\",\n \"Heading 2\": \"Cell 2\",\n \"Heading 3\": \"Cell 3\",\n \"Heading 4\": \"Cell 4\",\n});\n\n// updates the DOM of the table\ndataTable.update();\n```\n\nHere's a full list of the exposed methods and properties from the simple-datatables repository.\n\n##### License\n\nAll 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.\n\n#### WYSIWYG\n\nThe 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.\n\nThe 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.\n\nAll 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.\n\n##### Getting started\n\nBefore continuing make sure that you have Tailwind CSS, Flowbite, and Tip Tap installed in your project.\n\n1. Follow the [quickstart guide](https://flowbite.com/docs/getting-started/quickstart/) from Flowbite to enable the interactive elements\n\n2. Install the [Flowbite Typography](https://flowbite.com/docs/components/typography/) plugin to format the content of text inside the WYSYIWYG editor preview:\n\n```bash\nnpm i flowbite-typography\n```\n\n3. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:\n\n```javascript\n@plugin \"flowbite-typography\";\n```\n\nAlternatively you can do the same but in your `tailwind.config.js` file:\n\n```javascript\n// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4\nmodule.exports = {\n theme: {\n // ...\n },\n plugins: [\n require('flowbite-typography'),\n // ...\n ],\n}\n```\n\n4. Finally, install Tip Tap either via NPM or skip this step if you're using CDN:\n\n```bash\nnpm install @tiptap/core @tiptap/pm @tiptap/starter-kit\n```\n\nNow you're ready to use the examples below by copying the HTML markup and the JavaScript code.\n\n##### Default text editor\n\nUse 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.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\nimport Highlight from 'https://esm.sh/@tiptap/extension-highlight@2.6.6';\nimport Underline from 'https://esm.sh/@tiptap/extension-underline@2.6.6';\nimport Link from 'https://esm.sh/@tiptap/extension-link@2.6.6';\nimport TextAlign from 'https://esm.sh/@tiptap/extension-text-align@2.6.6';\nimport Image from 'https://esm.sh/@tiptap/extension-image@2.6.6';\nimport YouTube from 'https://esm.sh/@tiptap/extension-youtube@2.6.6';\nimport TextStyle from 'https://esm.sh/@tiptap/extension-text-style@2.6.6';\nimport FontFamily from 'https://esm.sh/@tiptap/extension-font-family@2.6.6';\nimport { Color } from 'https://esm.sh/@tiptap/extension-color@2.6.6';\nimport Bold from 'https://esm.sh/@tiptap/extension-bold@2.6.6'; // Import the Bold extension\n\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-example\")) {\n\n const FontSizeTextStyle = TextStyle.extend({\n addAttributes() {\n return {\n fontSize: {\n default: null,\n parseHTML: element => element.style.fontSize,\n renderHTML: attributes => {\n if (!attributes.fontSize) {\n return {};\n }\n return { style: 'font-size: ' + attributes.fontSize };\n },\n },\n };\n },\n });\n const CustomBold = Bold.extend({\n // Override the renderHTML method\n renderHTML({ mark, HTMLAttributes }) {\n const { style, ...rest } = HTMLAttributes;\n\n // Merge existing styles with font-weight\n const newStyle = 'font-weight: bold;' + (style ? ' ' + style : '');\n\n return ['span', { ...rest, style: newStyle.trim() }, 0];\n },\n // Ensure it doesn't exclude other marks\n addOptions() {\n return {\n ...this.parent?.(),\n HTMLAttributes: {},\n };\n },\n });\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-example'),\n extensions: [\n StarterKit.configure({\n textStyle: false,\n bold: false,\n marks: {\n bold: false,\n },\n }),\n // Include the custom Bold extension\n CustomBold,\n TextStyle,\n Color,\n FontSizeTextStyle,\n FontFamily,\n Highlight,\n Underline,\n Link.configure({\n openOnClick: false,\n autolink: true,\n defaultProtocol: 'https',\n }),\n TextAlign.configure({\n types: ['heading', 'paragraph'],\n }),\n Image,\n YouTube,\n ],\n 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.
\n{{< /example >}}\n\nNotice: 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:\n\n```html\n\n```\n\nIf you're importing the package with Yarn or NPM then you need to add this in your `package.json` file:\n\n```javascript\n// when using Yarn\n\"resolutions\": {\n \"prosemirror-model\": \"1.19.3\"\n}\n\n// when using NPM\n\"overrides\": {\n \"prosemirror-model\": \"1.19.3\"\n}\n```\n\nWe recommend later checking the Tip Tap library for a proper update to prevent this quickfix in the future.\n\n##### Text formatting\n\nUse 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.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\nimport Highlight from 'https://esm.sh/@tiptap/extension-highlight@2.6.6';\nimport Underline from 'https://esm.sh/@tiptap/extension-underline@2.6.6';\nimport Subscript from 'https://esm.sh/@tiptap/extension-subscript@2.6.6';\nimport Superscript from 'https://esm.sh/@tiptap/extension-superscript@2.6.6';\nimport TextStyle from 'https://esm.sh/@tiptap/extension-text-style@2.6.6';\nimport FontFamily from 'https://esm.sh/@tiptap/extension-font-family@2.6.6';\nimport { Color } from 'https://esm.sh/@tiptap/extension-color@2.6.6';\nimport Bold from 'https://esm.sh/@tiptap/extension-bold@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-text-example\")) {\n\n const FontSizeTextStyle = TextStyle.extend({\n addAttributes() {\n return {\n fontSize: {\n default: null,\n parseHTML: element => element.style.fontSize,\n renderHTML: attributes => {\n if (!attributes.fontSize) {\n return {};\n }\n return { style: 'font-size: ' + attributes.fontSize };\n },\n },\n };\n },\n });\n const CustomBold = Bold.extend({\n // Override the renderHTML method\n renderHTML({ HTMLAttributes }) {\n return ['span', { ...HTMLAttributes, style: 'font-weight: bold;' }, 0];\n },\n // Ensure it doesn't exclude other marks\n excludes: '',\n });\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-text-example'),\n extensions: [\n StarterKit.configure({\n textStyle: false,\n bold: false,\n marks: {\n bold: false,\n },\n }),\n // Include the custom Bold extension\n CustomBold,\n Highlight,\n Underline,\n Subscript,\n Superscript,\n TextStyle,\n FontSizeTextStyle,\n Color,\n FontFamily\n ],\n 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.
',\n editorProps: {\n attributes: {\n class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',\n },\n }\n });\n\n // set up custom event listeners for the buttons\n document.getElementById('toggleBoldButton').addEventListener('click', () => editor.chain().focus().toggleBold().run());\n document.getElementById('toggleItalicButton').addEventListener('click', () => editor.chain().focus().toggleItalic().run());\n document.getElementById('toggleUnderlineButton').addEventListener('click', () => editor.chain().focus().toggleUnderline().run());\n document.getElementById('toggleStrikeButton').addEventListener('click', () => editor.chain().focus().toggleStrike().run());\n document.getElementById('toggleSubscriptButton').addEventListener('click', () => editor.chain().focus().toggleSubscript().run());\n document.getElementById('toggleSuperscriptButton').addEventListener('click', () => editor.chain().focus().toggleSuperscript().run());\n document.getElementById('toggleHighlightButton').addEventListener('click', () => {\n const isHighlighted = editor.isActive('highlight');\n // when using toggleHighlight(), judge if is is already highlighted.\n editor.chain().focus().toggleHighlight({\n color: isHighlighted ? undefined : '#ffc078' // if is already highlightedοΌunset the highlight color\n }).run();\n });\n\n document.getElementById('toggleCodeButton').addEventListener('click', () => {\n editor.chain().focus().toggleCode().run();\n });\n\n const textSizeDropdown = FlowbiteInstances.getInstance('Dropdown', 'textSizeDropdown');\n\n // Loop through all elements with the data-text-size attribute\n document.querySelectorAll('[data-text-size]').forEach((button) => {\n button.addEventListener('click', () => {\n const fontSize = button.getAttribute('data-text-size');\n\n // Apply the selected font size via pixels using the TipTap editor chain\n editor.chain().focus().setMark('textStyle', { fontSize }).run();\n\n // Hide the dropdown after selection\n textSizeDropdown.hide();\n });\n });\n\n // Listen for color picker changes\n const colorPicker = document.getElementById('color');\n colorPicker.addEventListener('input', (event) => {\n const selectedColor = event.target.value;\n\n // Apply the selected color to the selected text\n editor.chain().focus().setColor(selectedColor).run();\n })\n\n document.querySelectorAll('[data-hex-color]').forEach((button) => {\n button.addEventListener('click', () => {\n const selectedColor = button.getAttribute('data-hex-color');\n\n // Apply the selected color to the selected text\n editor.chain().focus().setColor(selectedColor).run();\n });\n });\n\n document.getElementById('reset-color').addEventListener('click', () => {\n editor.commands.unsetColor();\n })\n\n const fontFamilyDropdown = FlowbiteInstances.getInstance('Dropdown', 'fontFamilyDropdown');\n\n // Loop through all elements with the data-font-family attribute\n document.querySelectorAll('[data-font-family]').forEach((button) => {\n button.addEventListener('click', () => {\n const fontFamily = button.getAttribute('data-font-family');\n\n // Apply the selected font size via pixels using the TipTap editor chain\n editor.chain().focus().setFontFamily(fontFamily).run();\n\n // Hide the dropdown after selection\n fontFamilyDropdown.hide();\n });\n });\n\n }\n})\n` >}}\n
\n{{< /example >}}\n\n##### Text alignment\n\nEnable text alignment to the left, center, right, and justify for the content inside of the WYSIWYG component.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\nimport Highlight from 'https://esm.sh/@tiptap/extension-highlight@2.6.6';\nimport Underline from 'https://esm.sh/@tiptap/extension-underline@2.6.6';\nimport Link from 'https://esm.sh/@tiptap/extension-link@2.6.6';\nimport TextAlign from 'https://esm.sh/@tiptap/extension-text-align@2.6.6';\nimport Image from 'https://esm.sh/@tiptap/extension-image@2.6.6';\nimport YouTube from 'https://esm.sh/@tiptap/extension-youtube@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-alignment-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-alignment-example'),\n extensions: [\n StarterKit,\n Highlight,\n Underline,\n Link.configure({\n openOnClick: false,\n autolink: true,\n defaultProtocol: 'https',\n }),\n TextAlign.configure({\n types: ['heading', 'paragraph'],\n }),\n Image,\n YouTube\n ],\n 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.
\n{{< /example >}}\n\n##### Typography elements\n\nUse 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.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-typography-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-typography-example'),\n extensions: [\n StarterKit\n ],\n 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.
\n{{< /example >}}\n\n##### Configuring links\n\nUse this example to add and remove anchor links for the content inside of the WYSIWYG text editor.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\nimport Link from 'https://esm.sh/@tiptap/extension-link@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-links-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-links-example'),\n extensions: [\n StarterKit,\n Link.configure({\n openOnClick: false,\n autolink: true,\n defaultProtocol: 'https',\n })\n ],\n 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.
\n{{< /example >}}\n\n##### Using images\n\nUse 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.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\nimport Image from 'https://esm.sh/@tiptap/extension-image@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-images-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-images-example'),\n extensions: [\n StarterKit,\n Image\n ],\n 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.
\n{{< /example >}}\n\n##### Adding videos\n\nUse 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.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\nimport YouTube from 'https://esm.sh/@tiptap/extension-youtube@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-video-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-video-example'),\n extensions: [\n StarterKit,\n YouTube\n ],\n 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.
\n{{< /example >}}\n\n##### Editing tables\n\nUse 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.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\nimport Table from 'https://esm.sh/@tiptap/extension-table@2.6.6';\nimport TableCell from 'https://esm.sh/@tiptap/extension-table-cell@2.6.6';\nimport TableHeader from 'https://esm.sh/@tiptap/extension-table-header@2.6.6';\nimport TableRow from 'https://esm.sh/@tiptap/extension-table-row@2.6.6';\n\nconst TipTapExtensionTableCell = TableCell.extend({\n\taddAttributes() {\n\t\treturn {\n\t\t\t...this.parent?.(),\n\t\t\tbackgroundColor: {\n\t\t\t\tdefault: null,\n\t\t\t\trenderHTML: (attributes) => {\n\t\t\t\t\tif (!attributes.backgroundColor) {\n\t\t\t\t\t\treturn {}\n\t\t\t\t\t}\n\n\t\t\t\t\treturn {\n\t\t\t\t\t\tstyle: 'background-color: ' + attributes.backgroundColor,\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tparseHTML: (element) => {\n\t\t\t\t\treturn element.style.backgroundColor.replace(/['\"]+/g, '')\n\t\t\t\t},\n\t\t\t},\n\t\t}\n\t},\n});\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-tables-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-tables-example'),\n extensions: [\n StarterKit,\n Table.configure({\n resizable: true,\n }),\n TableRow,\n TableHeader,\n TableCell,\n TipTapExtensionTableCell\n ],\n 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.
\n{{< /example >}}\n\n##### Undo and redo\n\nUse the history functionality from the WYSIWYG text editor component to integrate undo and redo actions.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-history-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-history-example'),\n extensions: [\n StarterKit\n ],\n 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.
',\n editorProps: {\n attributes: {\n class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',\n },\n }\n });\n\n // set up custom event listeners for the buttons\n document.getElementById('toggleUndoButton').addEventListener('click', () => {\n editor.chain().focus().undo().run();\n });\n document.getElementById('toggleRedoButton').addEventListener('click', () => {\n editor.chain().focus().redo().run()\n });\n\n}\n})\n` >}}\n
\n
\n
\n
\n \n
\n Undo\n \n
\n \n
\n Redo\n \n
\n
\n
\n
\n
\n \n \n
\n
\n{{< /example >}}\n\n##### Exporting data\n\nUse 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.\n\n{{< 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=`\nimport { Editor } from 'https://esm.sh/@tiptap/core@2.6.6';\nimport StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.6.6';\n\nwindow.addEventListener('load', function() {\n if (document.getElementById(\"wysiwyg-export-example\")) {\n\n // tip tap editor setup\n const editor = new Editor({\n element: document.querySelector('#wysiwyg-export-example'),\n extensions: [\n StarterKit\n ],\n 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.
',\n editorProps: {\n attributes: {\n class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',\n },\n }\n });\n\n const sourceCodeModal = FlowbiteInstances.getInstance('Modal', 'source-code-modal');\n const sourceCodeWrapper = document.getElementById('sourceCode');\n\n // set up custom event listeners for the buttons\n document.getElementById('toggleHTMLButton').addEventListener('click', () => {\n\n // basically just use editor.getHTML(); to get the raw html\n\n sourceCodeWrapper.innerHTML = editor.getHTML()\n .replace(/&/g, \"&\") // Escape & character\n .replace(//g, \">\") // Escape > character\n .replace(/\"/g, \""\") // Escape \" character\n .replace(/'/g, \"'\"); // Escape ' character\n });\n\n document.getElementById('toggleJSONButton').addEventListener('click', () => {\n\n // basically just use editor.getJSON(); to get the raw json\n\n sourceCode.innerHTML = JSON.stringify(editor.getJSON(), null, 2)\n .replace(/&/g, \"&\")\n .replace(//g, \">\");\n });\n}\n})\n` >}}\n
\n
\n
\n
\n \n
\n Get JSON\n \n
\n \n
\n Get HTML\n \n
\n
\n
\n
\n
\n \n \n
\n
\n\n
\n
\n \n
\n \n
\n
\n JSON/HTML data export result\n
\n \n
\n \n
\n
\n
\n
\n
\n
\n{{< /example >}}\n\n##### Javascript behaviour\n\nLearn 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.\n\nAfter you have installed Tip Tap via NPM or CDN you can create a new `Editor` object:\n\n```javascript\nimport { Editor } from '@tiptap/core';\nimport StarterKit from '@tiptap/starter-kit';\n\nnew Editor({\n element: document.getElementById('wysiwyg'),\n extensions: [StarterKit],\n content: '
Welcome to Flowbite!
',\n})\n```\n\nMake sure that you also have an empty `div` element with the appropiate ID:\n\n```html\n\n```\n\nThis 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.\n\n###### Content styling\n\nWe 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:\n\n```javascript\nnew Editor({\n element: document.getElementById('wysiwyg'),\n extensions: [StarterKit],\n content: '
Welcome to Flowbite!
',\n editorProps: {\n attributes: {\n class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',\n },\n }\n})\n```\n\n###### Extensions\n\nTip 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.\n\nHere is one example where we add the link extension:\n\n```javascript\nimport { Editor } from '@tiptap/core';\nimport StarterKit from '@tiptap/starter-kit';\nimport Link from '@tiptap/extension-link';\n\nconst editor = new Editor({\n element: document.querySelector('#wysiwyg-links-example'),\n extensions: [\n StarterKit,\n Link.configure({\n openOnClick: false,\n autolink: true,\n defaultProtocol: 'https',\n })\n ],\n 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.
![\"Flowbite](\"https://flowbite.s3.amazonaws.com/github/logo-github.png\"){kind=logo}
\n ![\"Discord\"](\"https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord\")
![\"Total](\"https://img.shields.io/npm/dt/flowbite.svg\")
![\"Latest](\"https://img.shields.io/npm/v/flowbite.svg\")
![\"License\"](\"https://img.shields.io/badge/license-MIT-blue\"){kind=icon}
![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/alerts.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/badge.jpg\"){kind=icon}
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/buttons.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/button-group.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/cards.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/dropdown.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/forms.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/list-group.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/typography.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/modal.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/tabs.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/navbar.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/pagination.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/timeline.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/progress.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/tables.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/toast.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/tooltips.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/datepicker.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/spinner.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/footer.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/accordion.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/sidebar.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/carousel.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/avatar.jpg\"){kind=avatar}
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/rating.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/input-field.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/file-input.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/search-input.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/select.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/textarea.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/checkbox.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/radio.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/toggle.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/range-slider.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/floating-label.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/mega-menu.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/skeleton.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/kbd.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/drawer.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/popover.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/video.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/heading.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/paragraph.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/blockquote.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/image.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/list.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/link.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/text.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/hr.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/dial.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/stepper.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/indicators.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/bottom-bar.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/banner.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/gallery.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/jumbotron.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/device-mockups.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/charts.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/number-input.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/phone-input.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/chat-bubble.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/clipboard.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/timepicker.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/datatables.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.amazonaws.com/github/wysiwyg.jpg\")
\n ![\"Tailwind](\"https://flowbite.s3.us-east-1.amazonaws.com/github/qrcode.jpg\")
\n ![\"Medium](\"/docs/images/people/profile-picture-4.jpg\")
\n![\"Medium](\"/docs/images/people/profile-picture-3.jpg\")
\n![\"\"](\"/docs/images/people/profile-picture-2.jpg\")
\n ![\"Flowbite](\"https://flowbite.com/docs/images/logo.svg\"){kind=logo}
\n ![\"Jese](\"/docs/images/people/profile-picture-1.jpg\")
\n ![\"Video](\"/docs/images/misc/flowbite-yt-screenshot.png\")
\n ![\"\"](\"/docs/images/blog/image-1.jpg\")
\n ![\"\"](\"/docs/images/blog/image-4.jpg\")
\n ![\"product](\"/docs/images/products/apple-watch.png\")
\n ![\"profile](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png\")
\n ![\"profile](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png\")
\n ![\"profile](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png\")
\n ![\"profile](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png\")
\n ![\"...\"](\"/docs/images/carousel/carousel-1.svg\")
\n ![\"...\"](\"/docs/images/carousel/carousel-2.svg\")
\n ![\"...\"](\"/docs/images/carousel/carousel-3.svg\")
\n ![\"...\"](\"/docs/images/carousel/carousel-4.svg\")
\n ![\"...\"](\"/docs/images/carousel/carousel-5.svg\")
\n ![](\"/docs/images/blog/image-2.jpg\")
\n ![](\"/docs/images/blog/image-3.jpg\")
\n ![](\"https://flowbite.com/docs/images/og-image.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-light.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-1-dark.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-light.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/hero/mockup-2-dark.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/tablet-mockup-image-dark.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/laptop-screen.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/laptop-screen-dark.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac-dark.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/device-mockups/watch-screen-image-dark.png\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg\")
\n ![\"\"](\"https://flowbite.s3.amazonaws.com/docs/gallery/featured/image.jpg\")
\n ![\"Italy](\"/docs/images/popovers/italy.png\")
\n ![\"\"](\"/docs/images/people/profile-picture-5.jpg\")
\n ![\"Apple](\"/docs/images/products/imac.png\")
\n ![\"iPhone](\"/docs/images/products/iphone-12.png\")
\n ![\"Smartphone](\"/docs/images/illustrations/smartphone-application-features.svg\")
\n ![\"Smartphone](\"/docs/images/illustrations/smartphone-application-features-dark.svg\")
\n ![\"profile](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png\")
\n ![\"profile](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png\")
\n ![\"image](\"/docs/images/examples/image-1@2x.jpg\")
\n{{< /example >}}\n\n##### Image caption\n\nThis example can be used to add a caption for the image often used inside articles.\n\n{{< example id=\"image-caption-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n![\"image](\"/docs/images/examples/image-3@2x.jpg\")
\n ![\"image](\"/docs/images/examples/image-4@2x.jpg\")
\n{{< /example >}}\n\n##### Image shadow\n\nThis example can be used to show a shadow effect for the image using the `shadow-{size}` utility class.\n\n{{< example id=\"image-shadow-example\" class=\"flex justify-center pb-8\" github=\"typography/images.md\" show_dark=true >}}\n![\"image](\"/docs/images/examples/image-2@2x.jpg\")
\n{{< /example >}}\n\n##### Retina-ready\n\nUse the `srcset` attribute to set Retina-ready images with double resolution.\n\n{{< example id=\"image-retina-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n![\"image](\"/docs/images/examples/image-1.jpg)
\n{{< /example >}}\n\n##### Image card\n\nUse this example to make the image a card item with a link and a short text description.\n\n{{< example id=\"image-card-example\" class=\"flex justify-center\" github=\"typography/images.md\" show_dark=true >}}\n![\"image](\"https://flowbite.s3.amazonaws.com/blocks/marketing-ui/content/content-gallery-3.png\")
\n