Repository: themesberg/flowbite Branch: main Commit: 69594645a9e0 Files: 254 Total size: 6.6 MB Directory structure: gitextract_502nq9vu/ ├── .eslintignore ├── .eslintrc.js ├── .github/ │ └── ISSUE_TEMPLATE/ │ ├── bug_report.md │ ├── custom.md │ └── feature_request.md ├── .gitignore ├── .npmignore ├── .prettierrc ├── .vscode/ │ └── settings.json ├── BUILD-TOOLS.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── config.yml ├── content/ │ ├── _index.html │ ├── components/ │ │ ├── accordion.md │ │ ├── alerts.md │ │ ├── avatar.md │ │ ├── badge.md │ │ ├── banner.md │ │ ├── bottom-navigation.md │ │ ├── breadcrumb.md │ │ ├── button-group.md │ │ ├── buttons.md │ │ ├── card.md │ │ ├── carousel.md │ │ ├── chat-bubble.md │ │ ├── clipboard.md │ │ ├── datepicker.md │ │ ├── device-mockups.md │ │ ├── drawer.md │ │ ├── dropdowns.md │ │ ├── footer.md │ │ ├── forms.md │ │ ├── gallery.md │ │ ├── indicators.md │ │ ├── jumbotron.md │ │ ├── kbd.md │ │ ├── list-group.md │ │ ├── mega-menu.md │ │ ├── modal.md │ │ ├── navbar.md │ │ ├── pagination.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── qr-code.md │ │ ├── rating.md │ │ ├── sidebar.md │ │ ├── skeleton.md │ │ ├── speed-dial.md │ │ ├── spinner.md │ │ ├── stepper.md │ │ ├── tables.md │ │ ├── tabs.md │ │ ├── timeline.md │ │ ├── toast.md │ │ ├── tooltips.md │ │ ├── typography.md │ │ └── video.md │ ├── customize/ │ │ ├── _index.html │ │ ├── colors.md │ │ ├── configuration.md │ │ ├── dark-mode.md │ │ ├── icons.md │ │ ├── optimization.md │ │ ├── rtl.md │ │ ├── theming.md │ │ └── variables.md │ ├── forms/ │ │ ├── checkbox.md │ │ ├── file-input.md │ │ ├── floating-label.md │ │ ├── input-field.md │ │ ├── number-input.md │ │ ├── phone-input.md │ │ ├── radio.md │ │ ├── range.md │ │ ├── search-input.md │ │ ├── select.md │ │ ├── textarea.md │ │ ├── timepicker.md │ │ └── toggle.md │ ├── getting-started/ │ │ ├── _index.html │ │ ├── angular.md │ │ ├── astro.md │ │ ├── blazor.md │ │ ├── build-tools.md │ │ ├── changelog.md │ │ ├── django.md │ │ ├── flask.md │ │ ├── gatsby.md │ │ ├── hugo.md │ │ ├── introduction.md │ │ ├── javascript.md │ │ ├── laravel.md │ │ ├── license.md │ │ ├── llm.md │ │ ├── mcp-ui.md │ │ ├── mcp.md │ │ ├── meteor-js.md │ │ ├── next-js.md │ │ ├── nuxt-js.md │ │ ├── phoenix.md │ │ ├── quickstart.md │ │ ├── qwik.md │ │ ├── rails.md │ │ ├── react.md │ │ ├── remix.md │ │ ├── solid-js.md │ │ ├── svelte.md │ │ ├── symfony.md │ │ ├── typescript.md │ │ └── vue.md │ ├── plugins/ │ │ ├── charts.md │ │ ├── datatables.md │ │ ├── datepicker.md │ │ └── wysiwyg.md │ └── typography/ │ ├── blockquote.md │ ├── headings.md │ ├── hr.md │ ├── images.md │ ├── links.md │ ├── lists.md │ ├── paragraphs.md │ ├── text-decoration.md │ └── text.md ├── data/ │ ├── colors.yml │ └── sidebar.yml ├── layouts/ │ ├── 404.html │ ├── _markup/ │ │ └── render-heading.html │ ├── _partials/ │ │ ├── analytics.html │ │ ├── favicons.html │ │ ├── footer.html │ │ ├── header.html │ │ ├── navbar.html │ │ ├── redirect.html │ │ ├── scripts.html │ │ ├── sidebar.html │ │ ├── social.html │ │ └── stylesheet.html │ ├── _shortcodes/ │ │ ├── code.html │ │ ├── current_version.html │ │ ├── example.html │ │ ├── markdown.html │ │ ├── param.html │ │ ├── partial.html │ │ ├── placeholder.html │ │ ├── preview.html │ │ ├── requires_angular.html │ │ ├── requires_blazor.html │ │ ├── requires_django.html │ │ ├── requires_flask.html │ │ ├── requires_hugo.html │ │ ├── requires_js.html │ │ ├── requires_laravel.html │ │ ├── requires_nextjs.html │ │ ├── requires_nuxtjs.html │ │ ├── requires_react.html │ │ ├── requires_ruby.html │ │ ├── requires_svelte.html │ │ ├── requires_symfony.html │ │ ├── requires_tw3.html │ │ ├── requires_tw4.html │ │ ├── requires_typescript │ │ └── requires_vue.html │ ├── alias.html │ ├── baseof.html │ ├── dashboard.html │ ├── docs.html │ ├── home.html │ ├── redirect.html │ ├── robots.txt │ └── sitemap.xml ├── llms-full.txt ├── llms.txt ├── package.json ├── plugin-windicss.js ├── plugin.d.ts ├── plugin.js ├── postcss.config.js ├── safelist.txt ├── src/ │ ├── components/ │ │ ├── accordion/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── carousel/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── clipboard/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── collapse/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── datepicker/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── dial/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── dismiss/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── drawer/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── dropdown/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── index.ts │ │ ├── input-counter/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── modal/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── popover/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ ├── tabs/ │ │ │ ├── index.ts │ │ │ ├── interface.ts │ │ │ └── types.ts │ │ └── tooltip/ │ │ ├── index.ts │ │ ├── interface.ts │ │ └── types.ts │ ├── config/ │ │ └── global.ts │ ├── docs.css │ ├── docs.js │ ├── dom/ │ │ ├── events.ts │ │ ├── instances.ts │ │ └── types.ts │ ├── enterprise.css │ ├── flowbite.css │ ├── index.phoenix.ts │ ├── index.ts │ ├── index.turbo.ts │ ├── index.umd.ts │ ├── main.css │ ├── minimal.css │ ├── mono.css │ ├── playful.css │ ├── themes/ │ │ ├── default.css │ │ ├── enterprise.css │ │ ├── minimal.css │ │ ├── mono.css │ │ ├── playful.css │ │ └── themes.css │ └── types/ │ └── declarations.ts ├── static/ │ ├── browserconfig.xml │ ├── manifest.json │ ├── site.webmanifest │ └── sw.js ├── syntax.css ├── tailwind.config.js ├── tsconfig.json └── webpack.config.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintignore ================================================ *.md .gitignore build/ dist/ lib/ ================================================ FILE: .eslintrc.js ================================================ module.exports = { root: true, parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], env: { node: true, browser: true, es6: true, }, extends: [ 'eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended', ], }; ================================================ FILE: .github/ISSUE_TEMPLATE/bug_report.md ================================================ --- name: Bug report about: Create a report to help us improve title: '' labels: '' assignees: '' --- **Describe the bug** A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error **Expected behavior** A clear and concise description of what you expected to happen. **Screenshots** If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - OS: [e.g. iOS] - Browser [e.g. chrome, safari] - Version [e.g. 22] **Smartphone (please complete the following information):** - Device: [e.g. iPhone6] - OS: [e.g. iOS8.1] - Browser [e.g. stock browser, safari] - Version [e.g. 22] **Additional context** Add any other context about the problem here. ================================================ FILE: .github/ISSUE_TEMPLATE/custom.md ================================================ --- name: Custom issue template about: Describe this issue template's purpose here. title: '' labels: '' assignees: '' --- ================================================ FILE: .github/ISSUE_TEMPLATE/feature_request.md ================================================ --- name: Feature request about: Suggest an idea for this project title: '' labels: '' assignees: '' --- **Is your feature request related to a problem? Please describe.** A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] **Describe the solution you'd like** A clear and concise description of what you want to happen. **Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. **Additional context** Add any other context or screenshots about the feature request here. ================================================ FILE: .gitignore ================================================ node_modules/ dist/ lib/ build/ _gh_pages/ static/*.css static/*.js !static/sw.js static/*.map .DS_Store yarn-error.log /.idea .hugo_build.lock ================================================ FILE: .npmignore ================================================ _gh_pages/ assets/ build/ content/ data/ layouts/ node_modules/ resources/ static/ src/docs.js config.yml yarn-error.log syntax.css BUILD-TOOLS.md ================================================ FILE: .prettierrc ================================================ { "singleQuote": true, "eslintIntegration": true, "tabWidth": 4, "plugins": [ "prettier-plugin-tailwindcss" ] } ================================================ FILE: .vscode/settings.json ================================================ { "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" } } ================================================ FILE: BUILD-TOOLS.md ================================================ ## FlowBite Documentation These are the source files for the Flowbite Tailwind CSS components library. ### Getting started 1. Make sure you have Node and NPM installed 2. Run `yarn install` 3. Run `yarn start` to start developing ## Building the docs website Make 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). Run `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. ## Building for NPM registry Make sure that purge is NOT enabled in `tailwind.config.js` (this needs to be fixed with env variables). Run `npm run build:npm` and then `npm publish` to release a new version. Make sure you also change the version. ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing guide ## What do I need to know to help? If 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! If 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. - [Learn JavaScript - Full Course for Beginners](https://www.youtube.com/watch?v=PkZNo7MFNFg) - [Tailwind CSS](https://tailwindcss.com/) ## How do I make a contribution? Never made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown! 1. [Find an issue](https://github.com/themesberg/flowbite/issues) that you are interested in addressing or a feature that you would like to add. 2. 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`. 3. Clone the repository to your local machine using `git clone https://github.com/github-username/repository-name.git`. 4. Create a new branch for your fix using `git checkout -b branch-name-here`. 5. Make the appropriate changes for the issue you are trying to address or the feature that you want to add. 6. 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. 7. 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. 8. Push the changes to the remote repository using `git push origin branch-name-here`. 9. Submit a pull request to the upstream repository. 10. 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"`. 11. 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! 12. Wait for the pull request to be reviewed by a maintainer. 13. Make changes to the pull request if the reviewing maintainer recommends them. 14. Celebrate your success after your pull request is merged! 🎉 🎉 ## Where can I go for help? If you need help, you can ask questions please, [join us at our Discord Community](https://discord.gg/S6J9pUmj2t). ## What does the Code of Conduct mean for me? Our 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. ## Code of conduct For more information [check this file](CODE_OF_CONDUCT.md). ================================================ FILE: LICENSE.md ================================================ MIT License Copyright (c) 2023 Bergside Inc. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================

Flowbite - Tailwind CSS components
Build websites even faster with components on top of Tailwind CSS

Discord Total Downloads Latest Release License

------ ## Table of Contents - [Table of Contents](#table-of-contents) - [Documentation](#documentation) - [Getting started](#getting-started) - [Install using NPM](#install-using-npm) - [Include via CDN](#include-via-cdn) - [Bundled JavaScript](#bundled-javascript) - [Data attributes](#data-attributes) - [Init functions](#init-functions) - [ESM and CJS](#esm-and-cjs) - [TypeScript](#typescript) - [RTL support](#rtl-support) - [JavaScript Frameworks](#javascript-frameworks) - [Back-end Frameworks](#back-end-frameworks) - [Components](#components) - [Figma Design System](#figma-design-system) - [Flowbite Blocks](#flowbite-blocks) - [Flowbite Icons](#flowbite-icons) - [Flowbite GPT](#flowbite-gpt) - [Pro version](#pro-version) - [Hire us](#hire-us) - [Learn Design Concepts](#learn-design-concepts) - [Community](#community) - [Copyright and license](#copyright-and-license) ## Documentation For full documentation, visit [flowbite.com](https://flowbite.com/). ## Getting started Flowbite 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. ### Install using NPM Make sure that you have Node.js and Tailwind CSS installed. This guide works with Tailwind v4. 1. Install Flowbite as a dependency using NPM by running the following command: ``` npm install flowbite ``` 2. Import the default theme variables from Flowbite inside your main `input.css` CSS file: ``` /* choose one of the following */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); @import "flowbite/src/themes/default"; /* MINIMAL THEME @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); @import "flowbite/src/themes/minimal"; */ /* ENTERPRISE THEME @import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap'); @import "flowbite/src/themes/enterprise"; */ /* PLAYFUL THEME @import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap'); @import "flowbite/src/themes/playful"; */ /* MONO THEME @import "flowbite/src/themes/mono"; */ ``` 3. Import the Flowbite plugin file in your CSS: ``` @plugin "flowbite/plugin"; ``` 4. Configure the source files of Flowbite in your CSS: ``` @source "../node_modules/flowbite"; ``` 5. Include the JavaScript code that powers the interactive elements before the end of your `` tag: ``` ``` Learn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/). If you have and old project with Tailwind CSS v3 then [check out this guide](https://flowbite.com/docs/getting-started/quickstart/#tailwind-css-v3-to-v4) to learn how to upgrade to v4. ### Include using CDN The quickest way to get started working with Flowbite is to include the CSS and JS into your project via CDN. Require the following minified stylesheet inside the `head` tag: ```html ``` And include the following JavaScript file before the end of the `body` element: ```html ``` Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes. ### Bundled JavaScript One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box. You can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this: ```javascript import 'flowbite'; ``` This file has access to all of the components and it automatically applies event listeners to the data attributes. ### Data attributes The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy. For example, to set up a modal component all you need to do is use `data-modal-target` and `data-modal-{toggle|show|hide}` to toggle, show, or hide the component by clicking on any trigger element. ```html ``` #### Init functions You can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt: ``` ``` The `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`. You can view more examples by browsing the [components from Flowbite](#components). ### ESM and CJS Flowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks. Here's an example how you can import and create a new Modal component inside JavaScript: ```javascript import { Modal } from 'flowbite' const $modalElement = document.querySelector('#modalEl'); const modalOptions = { placement: 'bottom-right', backdrop: 'dynamic', backdropClasses: 'bg-gray-900/50 dark:bg-gray-900/80 fixed inset-0 z-40', onHide: () => { console.log('modal is hidden'); }, onShow: () => { console.log('modal is shown'); }, onToggle: () => { console.log('modal has been toggled'); } } const modal = new Modal($modalElement, modalOptions); modal.show(); ``` Check out the JavaScript behaviour section of each component's page to learn how you can use this. ### TypeScript Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite. Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`: ```javascript import { Modal } from 'flowbite' import type { ModalOptions, ModalInterface } from 'flowbite' // other code ``` Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you're using the correct types of parameters and methods. When creating a new modal you can set the `ModalInterface` as the main type: ```javascript const modal: ModalInterface = new Modal($modalElement, modalOptions); ``` Flowbite also supports type definitions for the options object so if you want to set the placement of the modal based on types, here's how you would do that: ```javascript const modalOptions: ModalOptions = { placement: 'top-right' } const modal: ModalInterface = new Modal($modalElement, modalOptions); ``` Learn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/). ### RTL support All 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/). ### JavaScript Frameworks The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, Angular and Qwik: - [🌀 Flowbite React Library](https://github.com/themesberg/flowbite-react) - [🍀 Flowbite Vue Library](https://github.com/themesberg/flowbite-vue) - [🎸 Flowbite Svelte Library](https://github.com/themesberg/flowbite-svelte) - [📕 Flowbite Angular Library](https://github.com/themesberg/flowbite-angular) - [👿 Flowbite Qwik Library](https://github.com/qwikerx/flowbite-qwik) We also wrote integration guides for the following front-end frameworks and libraries: - [📝 Flowbite with React guide](https://flowbite.com/docs/getting-started/react/) - [📝 Flowbite with Next.js guide](https://flowbite.com/docs/getting-started/next-js/) - [📝 Flowbite with Remix guide](https://flowbite.com/docs/getting-started/remix/) - [📝 Flowbite with Vue guide](https://flowbite.com/docs/getting-started/vue/) - [📝 Flowbite with Nuxt guide](https://flowbite.com/docs/getting-started/nuxt-js/) - [📝 Flowbite with Svelte guide](https://flowbite.com/docs/getting-started/svelte/) - [📝 Flowbite with Astro guide](https://flowbite.com/docs/getting-started/astro/) - [📝 Flowbite with MeteorJS guide](https://flowbite.com/docs/getting-started/meteor-js/) - [📝 Flowbite with Gatsby guide](https://flowbite.com/docs/getting-started/gatsby/) - [📝 Flowbite with SolidJS guide](https://flowbite.com/docs/getting-started/solid-js/) - [📝 Flowbite with Qwik guide](https://flowbite.com/docs/getting-started/qwik/) ### Back-end Frameworks Flowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript: - [📚 Using Flowbite with Laravel](https://flowbite.com/docs/getting-started/laravel/) - [🎼 Using Flowbite with Symfony](https://flowbite.com/docs/getting-started/symfony/) - [🚊 Using Flowbite with Ruby on Rails 7](https://flowbite.com/docs/getting-started/rails/) - [🐉 Using Flowbite with Phoenix (Elixir)](https://flowbite.com/docs/getting-started/phoenix/) - [🐸 Using Flowbite with Django](https://flowbite.com/docs/getting-started/django/) - [🌶 Using Flowbite with Flask](https://flowbite.com/docs/getting-started/flask/) ## Components Flowbite 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.
Alerts Badge Breadcrumbs
Tailwind CSS Alerts Tailwind CSS Badge Tailwind CSS Breadcrumbs
Buttons Button group Cards
Tailwind CSS Buttons Tailwind CSS Button Group Tailwind CSS Cards
Dropdown Forms List group
Tailwind CSS Dropdown Tailwind CSS Forms Tailwind CSS List group
Typography Modal Tabs
Tailwind CSS Typography Tailwind CSS Modal Tailwind CSS Tabs
Navbar Pagination Timeline
Tailwind CSS Navbar Tailwind CSS Pagination Tailwind CSS Timeline
Progress bar Tables Toast
Tailwind CSS Progress Bar Tailwind CSS Tables Tailwind CSS Toast
Tooltips Datepicker Spinner
Tailwind CSS Tooltips Tailwind CSS Datepicker Tailwind CSS Spinner
Footer Accordion Sidebar
Tailwind CSS Footer Tailwind CSS Accordion Tailwind CSS Sidebar
Carousel Avatar Rating
Tailwind CSS Carousel Tailwind CSS Avatar Tailwind CSS Rating
Input Field File Input Search Input
Tailwind CSS Input Field Tailwind CSS File Input Tailwind CSS Search Input
Select Textarea Checkbox
Tailwind CSS Select Tailwind CSS Textarea Tailwind CSS Checkbox
Radio Toggle Range Slider
Tailwind CSS Radio Tailwind CSS Toggle Tailwind CSS Range Slider
Floating Label Mega Menu Skeleton
Tailwind CSS Floating Label Tailwind CSS Mega Menu Tailwind CSS Skeleton
KBD (keyboard) Drawer (offcanvas) Popover
Tailwind CSS KBD (Keyboard) Tailwind CSS Drawer (offcanvas) Tailwind CSS Popover
Video Heading Paragraph
Tailwind CSS Video Tailwind CSS Heading Tailwind CSS Paragraph
Blockquote Image List
Tailwind CSS Blockquote Tailwind CSS Image Tailwind CSS List
Link Text Horizontal line (HR)
Tailwind CSS Link Tailwind CSS Text Tailwind CSS HR
Speed Dial Stepper Indicators
Tailwind CSS Speed Dial Tailwind CSS Stepper Tailwind CSS Indicators
Bottom Navigation Sticky Banner Gallery (Masonry)
Tailwind CSS Bottom Navigation Bar Tailwind CSS Bottom Sticky Banner Tailwind CSS Image Gallery (Masonry)
Jumbotron Device mockups Charts
Tailwind CSS Jumbotron Tailwind CSS Device Mockups Tailwind CSS Charts
Number Input Phone Input Chat Bubble
Tailwind CSS Number Input Tailwind CSS Phone Input Tailwind CSS Chat Bubble
Copy to Clipboard Timepicker DataTables
Tailwind CSS Clipboard Tailwind CSS Timepicker Tailwind CSS DataTables
WYSIWYG Editor QR Code
Tailwind CSS WYSIWYG Text Editor Tailwind CSS QR Code
## Figma Design System If you need the Figma files for the components you can check out our website for more information: 🎨 [Get access to the Figma design files](https://flowbite.com/figma/) ## Flowbite Blocks Check out Flowbite Blocks to get access to over 400+ website sections coded in Tailwind CSS and Flowbite: 📦 [Check out Flowbite Blocks](https://flowbite.com/blocks/) ## Flowbite Icons Start 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): 🔍 [Check out the icons](https://flowbite.com/icons/) ## Flowbite GPT We've developed a custom trained ChatGPT model that you can use to generate website sections and pages based on the resources from Flowbite and Tailwind CSS. 🤖 [Generate with Flowbite GPT](https://chat.openai.com/g/g-y7yC35HB9-flowbite-gpt) ## Pro version Get access to all premium features including the Figma design system, access to all Flowbite Block sections and a dashboard UI interface: 💎 [Check out Flowbite Pro](https://flowbite.com/pro/) ## Hire us If 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. 🙋‍♂️ [Work with us](https://flowbite.com/work-with-us/) ## Learn Design Concepts If 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! 📖 [Learn with Enhance UI](https://www.enhanceui.com/?ref=flowbite-github) ## Community If you need help or just want to discuss about the library join the community on Github: ⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions) For casual chatting with others using the library: 💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy) Video tutorials and presentations using Flowbite: 🎥 [Subscribe to our YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A) ## Copyright and license The Flowbite name and logos are trademarks of Bergside Inc. - 📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/) - 📀 [Brand guideline and trademark usage agreement](https://flowbite.com/brand/) ================================================ FILE: config.yml ================================================ languageCode: "en" title: "Flowbite" baseURL: "https://flowbite.com/docs/" enableInlineShortcodes: true params: homepage: "https://flowbite.com" current_version: 4.0.1 authors: Flowbite social_image_path: /docs/images/og-image.png markup: goldmark: renderer: unsafe: true highlight: noClasses: false style: colorful tableOfContents: startLevel: 2 endLevel: 6 buildDrafts: true buildFuture: true enableRobotsTXT: true metaDataFormat: "yaml" disableKinds: ["404", "taxonomy", "RSS"] publishDir: "_gh_pages" ================================================ FILE: content/_index.html ================================================ --- layout: redirect sitemap_exclude: true redirect: "/docs/getting-started/introduction/" --- ================================================ FILE: content/components/accordion.md ================================================ --- layout: docs title: Tailwind CSS Accordion - Flowbite description: Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options group: components toc: true requires_js: true previous: RTL (Right-To-Left) previousLink: customize/rtl/ next: Alerts nextLink: components/alerts/ --- The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite. A popular use case would be the "Frequently Asked Questions" section of a website or page when you can show questions and answers for each child element. There are two main options to initialize the accordion component: - `data-accordion="collapse"` show only one active child element - `data-accordion="open"` keep multiple elements open Don't forget to set the `data-accordion-target="{selector}"` data attribute to the header element where the value is the id or class of the accordion body element and the `aria-expanded="{true|false}"` attribute to mark the active or inactive state of the accordion. ## Default accordion Use the `data-accordion="collapse"` to collapse every other child element when expanding a single one. {{< example github="components/accordion.md" show_dark=true >}}

{{< /example >}} ## Separated cards Use this example of an accordion with space delimitation between the accordion items. {{< example github="components/accordion.md" show_dark=true >}}

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

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

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

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

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

{{< /example >}} ## JavaScript behaviour Use the **Accordion** object from Flowbite to create a collection of vertically collapsing heading and content elements using object parameters, options, methods, and callback functions directly from JavaScript. ### Object parameters Create a new Accordion object by passing an array of accordion items and an optional options object to customize the styles and add callback functions.
Parameter Type Required Description
accordionEl Element Required The parent HTML element of the accordion component.
items Array Required Array of accordion items objects including the unique identifier, heading element, content element, and the active state.
options Object Optional Object of options that you can set to customize the style of the accordion items and set callback functions.
instanceOptions Object Optional Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
### Options Use the following options as the second parameter for the Accordion object to customize the behaviour, styles, and to set callback functions.
Option Type Description
alwaysOpen Boolean If set to true then multiple accordion elements can be open at the same time. By default it's false.
activeClasses Array Set an array of Tailwind CSS class names to apply for the active accordion heading element.
inactiveClasses Array Apply an array of Tailwind CSS class names to apply for the inactive accordion heading elements.
onOpen Function Set a callback function when a new accordion item has been opened.
onClose Function Set a callback function when a new accordion item has been closed.
### Methods Use the object methods on the Accordion object to programmatically open, close, or toggle the visibility of a given accordion item.
Method Description
toggle(id) Use this function to toggle an accordion item based on its current state.
open(id) Use this function to open an accordion item based on the id.
close(id) Use this function to close an accordion item based on the id.
updateOnOpen(callback) Use this method to set a callback function when an accordion item has been opened.
updateOnClose(callback) Use this method to set a callback function when an accordion item has been closed.
updateOnToggle(callback) Use this method to set a callback function when an accordion item has been toggled.
### Example Learn more about using the Accordion object from Flowbite in this example in JavaScript. To get started you need to create an array of accordion item objects including a unique identifier (it can be a number as well), a trigger element (eg. a button), a content element (the content body), and the active state. Additionally, you can also set some options to change the default behaviour of the accordion, customize the styles, and set callback functions. {{< code lang="javascript" file="accordion.js" icon="file" >}} const accordionElement = document.getElementById('accordion-example'); // create an array of objects with the id, trigger element (eg. button), and the content element const accordionItems = [ { id: 'accordion-example-heading-1', triggerEl: document.querySelector('#accordion-example-heading-1'), targetEl: document.querySelector('#accordion-example-body-1'), active: true }, { id: 'accordion-example-heading-2', triggerEl: document.querySelector('#accordion-example-heading-2'), targetEl: document.querySelector('#accordion-example-body-2'), active: false }, { id: 'accordion-example-heading-3', triggerEl: document.querySelector('#accordion-example-heading-3'), targetEl: document.querySelector('#accordion-example-body-3'), active: false } ]; // options with default values const options = { alwaysOpen: true, activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white', inactiveClasses: 'text-body', onOpen: (item) => { console.log('accordion item has been shown'); console.log(item); }, onClose: (item) => { console.log('accordion item has been hidden'); console.log(item); }, onToggle: (item) => { console.log('accordion item has been toggled'); console.log(item); }, }; // instance options object const instanceOptions = { id: 'accordion-example', override: true }; {{< /code >}} Create a new Accordion object using the options set above as the parameters. {{< code lang="javascript" file="accordion.js" icon="file" >}} import { Accordion } from 'flowbite'; /* * accordionEl: HTML element (required) * accordionItems: array of accordion item objects (required) * options (optional) * instanceOptions (optional) */ const accordion = new Accordion(accordionElement, accordionItems, options, instanceOptions); {{< /code >}} Now you can access the object methods to programmatically open, close, and toggle the accordion items based on the unique identifier. {{< code lang="javascript" file="accordion.js" icon="file" >}} // open accordion item based on id accordion.open('accordion-example-heading-2'); // close accordion item based on id accordion.close('accordion-example-heading-2'); // toggle visibility of item based on id accordion.toggle('accordion-example-heading-3'); {{< /code >}} ### HTML Markup Use the following HTML markup example for the JavaScript script above. {{< code lang="html" file="accordion.html" icon="file" >}}

{{< /code >}} ### TypeScript If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Accordion object, parameters and its options. Here's an example that applies the types from Flowbite to the code above: {{< code lang="typescript" file="accordion.ts" icon="file" >}} import { Accordion } from "flowbite"; import type { AccordionOptions, AccordionItem, AccordionInterface } from "flowbite"; import type { InstanceOptions } from 'flowbite'; const accordionEl = document.querySelector('#accordion-example'); // create an array of objects with the id, trigger element (eg. button), and the content element const accordionItems: AccordionItem[] = [ { id: 'accordion-example-heading-1', triggerEl: document.querySelector('#accordion-example-heading-1'), targetEl: document.querySelector('#accordion-example-body-1'), active: true }, { id: 'accordion-example-heading-2', triggerEl: document.querySelector('#accordion-example-heading-2'), targetEl: document.querySelector('#accordion-example-body-2'), active: false }, { id: 'accordion-example-heading-3', triggerEl: document.querySelector('#accordion-example-heading-3'), targetEl: document.querySelector('#accordion-example-body-3'), active: false } ]; // options with default values const options: AccordionOptions = { alwaysOpen: true, activeClasses: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white', inactiveClasses: 'text-body', onOpen: (item) => { console.log('accordion item has been shown'); console.log(item); }, onClose: (item) => { console.log('accordion item has been hidden'); console.log(item); }, onToggle: (item) => { console.log('accordion item has been toggled'); console.log(item); }, }; // instance options object const instanceOptions: InstanceOptions = { id: 'accordion-example', override: true }; /* * accordionEl: HTML element (required) * accordionItems: array of accordion item objects (required) * options (optional) * instanceOptions (optional) */ const accordion: AccordionInterface = new Accordion(accordionEl, accordionItems, options, instanceOptions); // open accordion item based on id accordion.open('accordion-example-heading-2'); // destroy accordion accordion.destroy(); // re-initialize accordion accordion.init(); {{< /code >}} ================================================ FILE: content/components/alerts.md ================================================ --- layout: docs title: Tailwind CSS Alerts - Flowbite description: Show contextual information to your users using alert elements based on Tailwind CSS group: components toc: true previous: Accordion previousLink: components/accordion/ next: Avatar nextLink: components/avatar/ --- The alert component can be used to provide information to your users such as success or error messages, but also highlighted information complementing the normal flow of paragraphs and headers on a page. Flowbite also includes dismissible alerts which can be hidden by the users by clicking on the close icon. ## Default alert Use the following examples of alert components to show messages as feedback to your users. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}} ## Alerts with icon You can also include a descriptive icon to complement the message inside the alert component with the following example. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}} ## Bordered alerts Use this example to add a border accent to the alert component instead of just a plain background. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}} ## Alerts with list Use this example to show a list and a description inside an alert component. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}}
{{< requires_js >}}
## Dismissing Use the following alert elements that are also dismissible. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}} ## Border accent Use this example to add a border accent on top of the alert component for further visual distinction. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}} ## Additional content The following alert components can be used if you wish to disclose more information inside the element. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}} ## Announcement alerts Use this alert component to make announcements with a CTA link. {{< example github="components/alerts.md" show_dark=true >}} {{< /example >}} ## JavaScript behaviour The **Dismiss** class from Flowbite can be used to create an object that will hide a target element or elements based on the parameters, options, and methods that you provide. ### Object parameters The parameters for the Dismiss object can be used to programmatically initialize and manipulate the behaviour of the dismissal of the target element.
Parameter Type Required Description
targetEl Element Required Pass the element object that will be dismissed.
triggerEl Element Optional Pass the element object that will trigger the targetEl dismission on click.
options Object Optional Pass the options object to set the trigger element, transition, duration, timing classes of the dismiss animation and callback functions.
instanceOptions Object Optional Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
### Options Use these optional options for the Dismiss object to set the transition, duration, and timing function types based on the utility classes from Tailwind CSS.
Option Type Description
transition String Use one of the Transition Property utility classes from Tailwind CSS to set transition type for the main element. The default value is transition-opacity.
duration Integer Set the duration of the dismissing animation. The default value is 300 (300 milliseconds).
timing String Set the transition timing function utility class from Tailwind CSS. The default value is ease-out.
onHide Function Set a callback function when the item has been dismissed.
### Methods Use the following methods on the Dismiss object to programmatically manipulate the behaviour.
Method Description
hide() Use this method on the Dismiss object to hide the target element.
updateOnHide(callback) Use this method to set the callback function when the item has been dismissed.
### Example Check out the following JavaScript example to learn how to initialize, set the options, and use the methods for the Dismiss object. First of all, you should set the required target element and optionally set a trigger element which will dismiss the target element when clicked and other options to customize the animation. {{< code lang="javascript" file="dismiss.js" icon="file" >}} // target element that will be dismissed const $targetEl = document.getElementById('targetElement'); // optional trigger element const $triggerEl = document.getElementById('triggerElement'); // options object const options = { transition: 'transition-opacity', duration: 1000, timing: 'ease-out', // callback functions onHide: (context, targetEl) => { console.log('element has been dismissed') console.log(targetEl) } }; // instance options object const instanceOptions = { id: 'targetElement', override: true }; {{< /code >}} Create a new Dismiss object based on the options set above. {{< code lang="javascript" file="dismiss.js" icon="file" >}} import { Dismiss } from 'flowbite'; /* * $targetEl (required) * $triggerEl (optional) * options (optional) * instanceOptions (optional) */ const dismiss = new Dismiss($targetEl, $triggerEl, options, instanceOptions); {{< /code >}} You can now use the methods on the Dismiss object. {{< code lang="javascript" >}} // hide the target element dismiss.hide(); {{< /code >}} ### HTML Markup Use this HTML code for the JavaScript code example above. {{< code lang="html" file="dismiss.html" icon="file" >}} {{< /code >}} ### TypeScript If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Dismiss class, parameters and its options. Here's an example that applies the types from Flowbite to the code above: {{< code lang="typescript" file="dismiss.ts" icon="file" >}} import { Dismiss } from "flowbite"; import type { DismissOptions, DismissInterface } from "flowbite"; import type { InstanceOptions } from 'flowbite'; // target element that will be dismissed const $targetEl: HTMLElement = document.getElementById('targetElement'); // optional trigger element const $triggerEl: HTMLElement = document.getElementById('triggerElement'); // options object const options: DismissOptions = { transition: 'transition-opacity', duration: 1000, timing: 'ease-out', // callback functions onHide: (context, targetEl) => { console.log('element has been dismissed') console.log(targetEl) } }; // instance options object const instanceOptions: InstanceOptions = { id: 'targetElement', override: true }; /* * $targetEl (required) * $triggerEl (optional) * options (optional) * instanceOptions (optional) */ const dismiss: DismissInterface = new Dismiss($targetEl, $triggerEl, options, instanceOptions); // programmatically hide it dismiss.hide(); {{< /code >}} ================================================ FILE: content/components/avatar.md ================================================ --- layout: docs title: Tailwind CSS Avatar - Flowbite description: 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 group: components toc: true previous: Alerts previousLink: components/alerts/ next: Badge nextLink: components/badge/ --- The avatar component can be used as a visual identifier for a user profile on your website and you can use the examples from Flowbite to modify the styles and sizes of these components using the utility classes from Tailwind CSS. ## Default avatar Use this example to create a circle and rounded avatar on an image element. {{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}} Rounded avatar Default avatar {{< /example >}} ## Bordered Apply a border around the avatar component you can use the `ring-{color}` class from Tailwind CSS. {{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}} Bordered avatar {{< /example >}} ## Placeholder icon Use this example as a placeholder icon for the user profile when there is no custom image available. {{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
{{< /example >}} ## Placeholder initials This example can be used to show the initials of the user's first and last name as a placeholder when no profile picture is available. {{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
JL
{{< /example >}} ## Avatar tooltip Use this example to show a tooltip when hovering over the avatar. {{< example class="flex items-center justify-center pt-8 gap-4" github="components/avatar.md" show_dark=true >}}
Medium avatar
Medium avatar
Medium avatar
{{< /example >}} ## Dot indicator Use a dot element relative to the avatar component as an indicator for the user (eg. online or offline status). {{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true >}}
{{< /example >}} ## Stacked Use this example if you want to stack a group of users by overlapping the avatar components. {{< example class="flex justify-center gap-4 rtl:gap-8" github="components/avatar.md" show_dark=true >}}
+99
{{< /example >}} ## Avatar text This example can be used if you want to show additional information in the form of text elements such as the user's name and join date. {{< example class="flex justify-center" github="components/avatar.md" show_dark=true >}}
Jese Leos
Joined in August 2014
{{< /example >}} ## User dropdown Use this example if you want to show a dropdown menu when clicking on the avatar component. {{< example class="flex justify-center gap-4" github="components/avatar.md" show_dark=true iframeHeight="360" >}} User dropdown {{< /example >}} ## Sizes Choose from multiple sizing options for the avatar component from this example. {{< example class="flex flex-wrap items-center justify-center gap-6" github="components/avatar.md" show_dark=true >}} Extra small avatar Small avatar Base avatar Large avatar xl avatar 2xl avatar {{< /example >}} ================================================ FILE: content/components/badge.md ================================================ --- layout: docs title: Tailwind CSS Badges - Flowbite description: Use Tailwind CSS badges as elements to show counts or labels separately or inside other components group: components toc: true previous: Avatar previousLink: components/avatar/ next: Banner nextLink: components/banner/ --- The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made. Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a `span` element. ## Default badges Use the following badge elements to indicate counts or labels inside or outside components. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Bordered badges This example can be used to add a border accent to the badge component. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Large badges Use the `text-sm` utility class and increase the paddings to create a larger variant of the badges. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Large bordered badges Use these examples to create large and bordered styled badges. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Pill badges Use this example to make the corners even more rounded like pills for the badge component. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Pill bordered badges Use this example to create a more rounded styles pill badge with borders. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Badges as links You can also use badges as anchor elements to link to another page. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Badges with icon You can also use [SVG icons](https://flowbite.com/icons/) inside the badge elements. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins agong {{< /example >}} ## Large badges with icon Use these large badges with SVG icons for an enhanced representation. {{< example class="flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}} 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins agong {{< /example >}} ## Badges with only icon Alternatively, you can also use badges which indicate only a SVG icon. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} {{< /example >}} ## Large badges with only icon Use these large badge components with only an icon inside of them. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} {{< /example >}} ## Badges with dot Use these badges with a dot for an alternative style of showing content. {{< example class="flex justify-center gap-4" github="components/badge.md" show_dark=true >}} 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins agong {{< /example >}} ## Badges with SVG loader Use this example to show an animated SVG loader inside the badge component. {{< example class="flex flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}} 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins ago 2 mins ago {{< /example >}} ## Dismissible badges (chips) Use the `data-dismiss-target` data attribute to dismiss the current badge where the value is the id of the target element using a transition animation. These can be used as tags inside an input component. {{< example class="flex flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}} Brand Alternative Gray Danger Success Warning {{< /example >}} ## Chips with avatar These components can be used to show avatar images inside of dismissible badges. {{< example class="flex flex-wrap justify-center gap-4" github="components/badge.md" show_dark=true >}} Rounded avatar Brand Rounded avatar Alternative Rounded avatar Gray Rounded avatar Danger Rounded avatar Success Rounded avatar Warning {{< /example >}} ## Notification badge Use the following example to show a badge inside of a button component. {{< example class="flex justify-center" github="components/badge.md" show_dark=true >}} {{< /example >}} ## Button with badge Use this example to add a badge inside a button component for a count indicator. {{< example class="flex justify-center" github="components/badge.md" show_dark=true >}} {{< /example >}} ================================================ FILE: content/components/banner.md ================================================ --- layout: docs title: Tailwind CSS Sticky Banner - Flowbite description: 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 group: components toc: true requires_js: true previous: Badge previousLink: components/badge/ next: Bottom Navigation nextLink: components/bottom-navigation/ --- Get started with the sticky banner component coded with Tailwind CSS and Flowbite to show marketing, informational and CTA messages to your website visitors fixed to the top or bottom part of the page as the user scroll down the main content area. Explore the following examples based on various styles, sizes, and positionings to leverage the sticky banner component and increase marketing conversions with a responsive element supporting dark mode. ## Default sticky banner Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. {{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

Bullhorn New brand identity has been launched for the Flowbite Library

{{< /example >}} ## Bottom banner position This example can be used to position the sticky banner to the bottom side of the page instead of the top side. {{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

Discount Get 5% commission per sale Become a partner

{{< /example >}} ## Marketing CTA banner Use this free example to show a text message for announcement with a CTA link, an icon element and a close button to dismiss the banner. Set a different width by using the `max-w-{*}` utility classes from Tailwind CSS. {{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
Flowbite Logo Flowbite

Build websites even faster with components on top of Tailwind

{{< /example >}} ## Newsletter sign-up banner This example can be used to encourage your website visitors to sign up to your email newsletter by showing an inline form inside the sticky banner on the top side of your page. {{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
{{< /example >}} ## Informational banner This example can be used to share important information with your website visitors by showing a heading and a paragraph inside the sticky banner and two CTA buttons with links. {{< example class="p-0" github="components/banner.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}

Integration is the key

You can integrate Flowbite with many tools to make your work even more efficient and lightning fast based on Tailwind.

{{< /example >}} ## More examples For more sticky banner examples you can check [banner sections](https://flowbite.com/blocks/marketing/banner/) from Flowbite Blocks. ================================================ FILE: content/components/bottom-navigation.md ================================================ --- layout: docs title: Tailwind CSS Bottom Navigation - Flowbite description: 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 group: components toc: true previous: Banner previousLink: components/banner/ next: Breadcrumbs nextLink: components/breadcrumb/ --- The bottom bar component can be used to allow menu items and certain control actions to be performed by the user through the usage of a fixed bar positioning to the bottom side of your page. Check out multiple examples of the bottom navigation component based on various styles, controls, sizes, content and leverage the utility classes from Tailwind CSS to integrate into your own project. ## Default bottom navigation Use the default bottom navigation bar example to show a list of menu items as buttons to allow the user to navigate through your website based on a fixed position. You can also use anchor tags instead of buttons. {{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
{{< /example >}} ## Menu items with border This example can be used to show a border between the menu items inside the bottom navbar. {{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
{{< /example >}} ## Application bar example Use this example to show a CTA button in the center of the navigation component to create new items. {{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
{{< /example >}} ## Example with pagination This example be used to paginate multiple pages on a single view alongside other menu items. {{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
1 of 34
{{< /example >}} ## Button group bottom bar {{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true show_dark=true >}}
{{< /example >}} ## Card with bottom bar This example can be used to position a bottom navigation bar inside of a card element with scroll enabled on the Y axis to allow changing the content inside of the card, enable certain actions or show a list of menu items. You can even use the other bottom navbar examples to exchange the default one presented here. {{< example class="flex items-center justify-center p-4" github="components/bottom-navigation.md" show_dark=true >}}
{{< /example >}} ## Online meeting control bar Use this component to show a list of options for online video meetings by showing a list of options such as muting the microphone, hiding the camera, adjusting the volume and more. {{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true disable_init_js=true show_dark=true >}}
{{< /example >}} ## Video player bar Use this component to show control buttons for a video or audio that is playing in the browser to control the volume, navigate between videos, pause or start the video, and more. {{< example class="p-0" github="components/bottom-navigation.md" iframeHeight="480" iframeMaxHeight="480" disable_init_js=true skeletonPlaceholders=true show_dark=true >}}
3:45
5:00
{{< /example >}} ================================================ FILE: content/components/breadcrumb.md ================================================ --- layout: docs title: Tailwind CSS Breadcrumbs - Flowbite description: Show the location of the current page in a hierarchical structure using the Tailwind CSS breadcrumb components group: components toc: true previous: Bottom Navigation previousLink: components/bottom-navigation/ next: Buttons nextLink: components/buttons/ --- The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages. Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors. ## Default breadcrumb Use the following breadcrumb example to show the hierarchical structure of pages. {{< example class="flex justify-center" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ## Solid background You can alternatively also use the breadcrumb components with a solid background. {{< example class="flex justify-center" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ## Header breadcrumb Use this example to show a list of items such as the branches from GitHub and a dropdown component. {{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ## Breadcrumb with dropdown Use this example to show dropdown components inside the breadcrumbs. {{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ## Breadcrumb with button Use a button with dropdown as the current page in a breadcrumb component. {{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ## Breadcrumb with navigation Use this example to navigate between pages with a button group component next to the breadcrumbs. {{< example class="flex justify-center pb-48" github="components/breadcrumb.md" show_dark=true >}} {{< /example >}} ================================================ FILE: content/components/button-group.md ================================================ --- layout: docs title: Tailwind CSS Button Group - Flowbite description: Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line group: components toc: true previous: Buttons previousLink: components/buttons/ next: Cards nextLink: components/card/ --- The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element. ## Default example Use the following code to stack together buttons into a single group. {{< example class="flex justify-center" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group info Use this example to stack a button with an icon with another informational button. {{< example class="flex justify-center" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group icon action Use this component to show a button with text and another button with an icon. {{< example class="flex justify-center" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group icons Use this example to stack together multiple option buttons into one group. {{< example class="flex justify-center items-center h-full" iframeHeight="240" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group dropdown Use this example to show three buttons stacked together where the third one opens a dropdown menu. {{< example class="flex justify-center" iframeHeight="260" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group badge Use this component to add a badge inside of the button group and a dropdown menu. {{< example class="flex justify-center" iframeHeight="260" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## QR code button group Use this component to show a QR code button group for authentication or other purposes. {{< example class="flex justify-center" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Pagination button group This example can be used to create pagination components using button groups. {{< example class="flex justify-center items-center h-full flex-col gap-8" iframeHeight="240" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Vertical button groups Use these examples to stack button groups vertically. {{< example class="flex justify-center space-x-4" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group with colors Choose from any colors to style the button group components. {{< example class="flex justify-center space-x-4" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group as links You can also use the button group component as links. {{< example class="flex justify-center" github="components/button-group.md" show_dark=true >}}
Profile Settings Messages
{{< /example >}} ## Group buttons with icons You can also use [SVG icons](https://flowbite.com/icons/) inside the grouped buttons. {{< example class="flex justify-center" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ## Button group outline Use these examples as an alternative style with an outline. {{< example class="flex justify-center items-center flex-col gap-8 h-full" iframeHeight="240" github="components/button-group.md" show_dark=true >}}
{{< /example >}} ================================================ FILE: content/components/buttons.md ================================================ --- layout: docs title: Tailwind CSS Buttons - Flowbite # description: Use the Tailwind CSS button component inside forms, as links, and more with support for multiple colors, sizes, and variations description: Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows group: components toc: true previous: Breadcrumbs previousLink: components/breadcrumb/ next: Button group nextLink: components/button-group/ --- The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages. Flowbite provides a large variety of styles and sizes for the button component including outlined buttons, multiple colors, sizes, buttons with icons, and more. ## Default button Use these default button styles with multiple colors to indicate an action or link within your website. {{< example class="space-x-2 space-y-2" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Button pills The button pills can be used as an alternative style by using fully rounded edges. {{< example class="space-x-2 space-y-2" github="components/buttons.md" show_dark=true >}} {{< /example >}}
{{< requires_tw3 >}}
## Gradient monochrome These beautifully colored buttons built with the gradient color stops utility classes from Tailwind CSS can be used as a creative alternative to the default button styles. {{< example class="flex flex-wrap gap-2.5" github="components/buttons.md" show_dark=true >}} {{< /example >}}
{{< requires_tw3 >}}
## Gradient duotone These buttons use a style that includes two contrasted colors creating an impressive mesh gradient effect. {{< example class="flex flex-wrap gap-2.5" github="components/buttons.md" show_dark=true >}} {{< /example >}}
{{< requires_tw3 >}}
## Gradient outline This is a special button style that incorporates a gradient color for the outline that can be used as a secondary style to the fully colored gradient buttons. {{< example class="flex flex-wrap gap-2.5" github="components/buttons.md" show_dark=true >}} {{< /example >}}
{{< requires_tw3 >}}
## Colored shadows These beautiful button elements with color shadows can be used since the release of Tailwind v3.0. {{< example class="flex flex-wrap gap-2.5" github="components/buttons.md" show_dark=true >}} {{< /example >}}
{{< requires_tw3 >}}
## Social buttons Use these button styles when building social media login forms using Facebook, Twitter, GitHub, Google, and Apple. These buttons use the new `bg-[#hex]` utility classes from Tailwind CSS v3.0. {{< example class="space-x-2 space-y-2" github="components/buttons.md" show_dark=true >}} {{< /example >}}
{{< requires_tw3 >}}
## Payment buttons Use these payment buttons for your product checkout or NFT minting landing page including MetaMask, Opera, Bitcoin, Ethereum, Paypal, Visa, Mastercard, and American Express. {{< example class="inline-flex flex-wrap gap-2.5" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Outline buttons Use the following button styles to show the colors only for the border of the element. {{< example class="flex flex-wrap gap-2.5" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Button sizes Use these examples if you want to use smaller or larger buttons. {{< example class="space-x-2 space-y-2" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Outline button sizes Use these examples if you want to use smaller or larger buttons with outline style. {{< example class="space-x-2 space-y-2" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Button sizes with icon Use these examples if you want to use smaller or larger buttons with icons. {{< example class="space-x-2 space-y-2" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Buttons with icon Use the following examples to add a [SVG icon](https://flowbite.com/icons/) inside the button either on the left or right side. {{< example class="flex items-center space-x-2" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Button with label This example can be used to show a notification count or helper text inside a button using the badge element. {{< example class="flex" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Icon buttons Sometimes you need a button to indicate an action using only an icon. {{< example class="space-x-2" github="components/buttons.md" show_dark=true >}} {{< /example >}} ## Loader Use the following }}">spinner components from Flowbite to indicate a loader animation inside buttons: {{< example github="components/buttons.md" class="space-x-2" show_dark=true >}} {{< /example >}} ## Disabled Use the following styles to indicate a disabled button. This can be often used inside form elements to disable the submit button before all the form elements have been completed and validated. {{< example github="components/buttons.md" show_dark=true >}} {{< /example >}} ================================================ FILE: content/components/card.md ================================================ --- layout: docs title: Tailwind CSS Cards - Flowbite description: Get started with a large variety of Tailwind CSS card examples for your web project group: components toc: true previous: Button group previousLink: components/button-group/ next: Carousel nextLink: components/carousel/ --- Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more. ## Default card Use the following simple card component with a title and description. {{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
Noteworthy technology acquisitions 2021

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

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

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

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

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

See our guideline
{{< /example >}} ## Card with image You can use the following example of a card element with an image for blog posts, user cards, and many more. {{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
Trending
Streamlining your design process today.
 Read more
{{< /example >}} ## Card with description Use this alternative styled card with an image for features, blog posts, and more. {{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
Streamlining your design process today.

In today’s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.

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

In today’s fast-paced digital landscape, fostering seamless collaboration among Developers and IT Operations.

 {{< /example >}} ## User profile card Use this user profile card example if you want to show a dropdown menu and buttons to enable multiple actions from your user. {{< example class="flex flex-wrap justify-center" github="components/card.md" show_dark=true >}}
Bonnie image
Bonnie Green
Visual Designer
{{< /example >}} ## Card with form inputs Use this card example where you can add form input elements that can be used for authentication actions or any other context where you need to receive information from your users. {{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
Sign in to our platform
Lost Password?
Not registered? Create account
{{< /example >}} ## E-commerce card Use this card for your e-commerce websites and show information about the products and enable actions such as adding a review and adding the product to the cart. {{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
product image
4.8 out of 5
Apple Watch Series 7 GPS, Aluminium Case, Starlight
$599
{{< /example >}} ## Call to action card Use this CTA card example to encourage your users to visit a certain page such as downloading the iOS or Android application for your project. {{< example github="components/card.md" show_dark=true >}}
Work fast from anywhere

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

Download on the
Mac App Store
Get in on
Google Play
{{< /example >}} ## Card with nav tabs Use this example of a card component with navigation tabs that can change the content inside the card based on which one is currently active. {{< example github="components/card.md" show_dark=true >}}
{{< /example >}} ## Card full width tabs Use this example of a card component to show tabs that span the full width of the element and change the content area clicking on each one. {{< example github="components/card.md" show_dark=true >}}
{{< /example >}} ## Card with list Use this card example if you want to show a list of data: {{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
Latest Customers
View all
{{< /example >}} ## Pricing card Show detailed information to potential customers about your product's pricing plan, list of features, and a purchase button. {{< example class="flex justify-center" github="components/card.md" show_dark=true >}}
Standard plan
$49 /month
{{< /example >}} ## Testimonial card Use this example to split cards into multiple sections such as for testimonials or reviews. {{< example github="components/card.md" show_dark=true >}}

Very easy this was to integrate

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

profile picture
Bonnie Green
Developer at Open AI

Solid foundation for any project

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

profile picture
Roberta Casas
Lead designer at Dropbox

Mindblowing workflow

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

profile picture
Jese Leos
Software Engineer at Facebook

Efficient Collaborating

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

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

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

Why do I need to connect my wallet?
{{< /example >}} ================================================ FILE: content/components/carousel.md ================================================ --- layout: docs title: Tailwind CSS Carousel - Flowbite description: Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options group: components toc: true requires_js: true previous: Card previousLink: components/card/ next: Chat bubble nextLink: components/chat-bubble/ --- The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators based on the JavaScript object from Flowbite. ## Default slider The carousel component can be initialized by using the `data-carousel={static|slide}` data attribute and by applying a unique `id` attribute to the parent element. - `data-carousel="static"` to prevent the carousel sliding by default - `data-carousel="slide"` to infinitely cycle through the items You can add as many carousel items as you want, but make sure that you add the `data-carousel-item` data attribute to each of them and set a single item to active by applying the `active` value to the data attribute. Use the `duration-*` and the animation classes from Tailwind CSS to apply custom effects to the carousel items and don't forget to set the `hidden` class by default to prevent flickering. {{< example github="components/carousel.md" show_dark=true >}} {{< /example >}} ## Controls Use the `data-carousel-prev` and `data-carousel-next` data attribute to listen to click events which will trigger the slide event from the carousel component to each direction. You can customize the control elements with the classes from Tailwind CSS anyhow you want. {{< example github="components/carousel.md" show_dark=true >}} {{< /example >}} ## Indicators Show the carousel indicators by adding the `data-carousel-slide-to={position}` to any number or style of indicator elements where the value equals the position of the slider element. {{< example github="components/carousel.md" show_dark=true >}} {{< /example >}} ## Animation You can easily customize the duration and animation style of the carousel component by using the `duration-*` and `ease-*` utility classes from Tailwind CSS. {{< example github="components/carousel.md" show_dark=true >}} {{< /example >}} ## JavaScript behaviour Use the **Carousel** class from Flowbite to create an object that you can use to apply custom styles, change the active slide item, set callback functions directly from JavaScript. ### Object parameters Pass the object parameters for the Carousel object to set the carousel items and options.
Parameter Type Required Description
carouselElement Element Required Parent HTML element of the carousel component.
items Array Required Pass an array of carousel item objects including the position and the element.
options Object Optional Pass an object of options to set the interval, indicators, and callback functions.
instanceOptions Object Optional Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
### Options Use these options for the Carousel object to set the default position, interval, indicators, custom styles, and callback functions.
Option Type Description
defaultPosition Integer Set the default active slider item based on its position (starts from [0-x]).
interval Integer Set the interval duration in milliseconds when the carousel is cycling.
indicators Array An optional object of indicator elements and custom classes.
onNext Function Set a callback function when the next carousel item has been shown.
onPrev Function Set a callback function when the previous carousel item has been shown.
onChange Function Set a callback function when the position of the carousel item has been changed.
### Methods Use the following methods on the Carousel object to programmatically manipulate the behaviour.
Method Description
next() Use this method to go to the next slide of the carousel component.
prev() Use this method to go to the previous slide of the carousel component.
slideTo(position) Use this method to go the carousel with the position that you set as a parameter.
cycle() Use this method to start cycling the carousel component based on the default interval duration.
pause() Use this method to stop the automatic cycling of the carousel component.
getItem(position) Get the carousel item based on the position number that you set as a parameter.
getActiveItem() Get the current active carousel item.
updateOnNext(callback) Set a callback function when the next carousel item has been shown.
updateOnPrev(callback) Set a callback function when the previous carousel item has been shown.
updateOnChange(callback) Set a callback function when the the slide item inside the carousel has been changed.
### Example Check out the following example to learn how to programmatically create a new Carousel object by passing the parameters, using the methods, and the callback functions. {{< code lang="javascript" file="carousel.js" icon="file" >}} const carouselElement = document.getElementById('carousel-example'); const items = [ { position: 0, el: document.getElementById('carousel-item-1'), }, { position: 1, el: document.getElementById('carousel-item-2'), }, { position: 2, el: document.getElementById('carousel-item-3'), }, { position: 3, el: document.getElementById('carousel-item-4'), }, ]; // options with default values const options = { defaultPosition: 1, interval: 3000, indicators: { activeClasses: 'bg-white dark:bg-gray-800', inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800', items: [ { position: 0, el: document.getElementById('carousel-indicator-1'), }, { position: 1, el: document.getElementById('carousel-indicator-2'), }, { position: 2, el: document.getElementById('carousel-indicator-3'), }, { position: 3, el: document.getElementById('carousel-indicator-4'), }, ], }, // callback functions onNext: () => { console.log('next slider item is shown'); }, onPrev: () => { console.log('previous slider item is shown'); }, onChange: () => { console.log('new slider item has been shown'); }, }; // instance options object const instanceOptions = { id: 'carousel-example', override: true }; {{< /code >}} Create a new carousel object using the options set above. {{< code lang="javascript" file="carousel.js" icon="file" >}} import { Carousel } from 'flowbite'; const carousel = new Carousel(carouselElement, items, options, instanceOptions); {{< /code >}} Use the `next()` and `prev()` public methods on the carousel object to jump to the left or right carousel slide item based on the position of the current active item. {{< code lang="javascript" file="carousel.js" icon="file" >}} // goes to the next (right) slide carousel.next(); // goes to the previous (left) slide carousel.prev(); {{< /code >}} Use the `slideTo(position)` public method to jump to the carousel slide item with the specified position. {{< code lang="javascript" file="carousel.js" icon="file" >}} // jumps to the 3rd position (position starts from 0) carousel.slideTo(2); {{< /code >}} Use the `cycle()` method to start an automated cycling where the duration is the milliseconds of time between each slide and the `pause()` method to clear the cycle event. {{< code lang="javascript" file="carousel.js" icon="file" >}} // starts or resumes the carousel cycling (automated sliding) carousel.cycle(); // pauses the cycling (automated sliding) carousel.pause(); {{< /code >}} ### HTML Markup Here is an example of the HTML markup that you can use for the JavaScript example above. Please note that you should use the `hidden` class from Tailwind CSS to hide the carousel items by default. {{< code lang="html" file="carousel.html" icon="file" >}} {{< /code >}} If you want to set trigger the next or previous slide item for the any button, just add some event listeners and call the `next()` and `prev()` methods on the Carousel object. {{< code lang="javascript" file="carousel.js" icon="file" >}} const $prevButton = document.getElementById('data-carousel-prev'); const $nextButton = document.getElementById('data-carousel-next'); $prevButton.addEventListener('click', () => { carousel.prev(); }); $nextButton.addEventListener('click', () => { carousel.next(); }); {{< /code >}} ### TypeScript If you're using the }}">TypeScript configuration from Flowbite then you can import the types for the Carousel class, parameters and its options. Here's an example that applies the types from Flowbite to the code above: {{< code lang="typescript" file="carousel.ts" icon="file" >}} import { Carousel } from 'flowbite'; import type { CarouselItem, CarouselOptions, CarouselInterface, } from 'flowbite'; import type { InstanceOptions } from 'flowbite'; const carouselElement: HTMLElement = document.getElementById('carousel-example'); const items: CarouselItem[] = [ { position: 0, el: document.getElementById('carousel-item-1'), }, { position: 1, el: document.getElementById('carousel-item-2'), }, { position: 2, el: document.getElementById('carousel-item-3'), }, { position: 3, el: document.getElementById('carousel-item-4'), }, ]; // object options with default values const options: CarouselOptions = { defaultPosition: 1, interval: 3000, indicators: { activeClasses: 'bg-white dark:bg-gray-800', inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800', items: [ { position: 0, el: document.getElementById('carousel-indicator-1'), }, { position: 1, el: document.getElementById('carousel-indicator-2'), }, { position: 2, el: document.getElementById('carousel-indicator-3'), }, { position: 3, el: document.getElementById('carousel-indicator-4'), }, ], }, // callback functions onNext: () => { console.log('next slider item is shown'); }, onPrev: () => { console.log('previous slider item is shown'); }, onChange: () => { console.log('new slider item has been shown'); }, }; // instance options object const instanceOptions: InstanceOptions = { id: 'carousel-example', override: true }; const carousel: CarouselInterface = new Carousel(carouselElement, items, options, instanceOptions); carousel.cycle(); // set event listeners for prev and next buttons const $prevButton = document.getElementById('data-carousel-prev'); const $nextButton = document.getElementById('data-carousel-next'); $prevButton.addEventListener('click', () => { carousel.prev(); }); $nextButton.addEventListener('click', () => { carousel.next(); }); {{< /code >}} ================================================ FILE: content/components/chat-bubble.md ================================================ --- layout: docs title: Tailwind CSS Chat Bubble - Flowbite description: 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 group: components toc: true requires_js: true previous: Carousel previousLink: components/carousel/ next: Clipboard nextLink: components/clipboard/ --- The chat bubble component is the building block for creating chat interfaces where users can send messages to each other by text, voice notes, images, galleries and other attachments. These components are usually used in chat applications and social media platforms such as Facebook, Twitter/X, WhatsApp, and more. The examples below provide multiple variations of default, outline, and clean styles coded with the utility classes from Tailwind CSS. Some of the components may require you to include the Flowbite JavaScript to enable the dropdowns and tooltips functionality. ## Default chat bubble Use this example to show a simple chat bubble with a text message, user profile and a timestamp. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}
Jese image
Bonnie Green 11:46

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

Delivered
{{< /example >}} ## Voice note message This example can be used to show a voice note message with control buttons and a dropdown menu. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}
Jese image
Bonnie Green 11:46
3:42
Delivered
{{< /example >}} ## File attachment Use this example to send a file attachment inside a chat bubble with the ability to download the file. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}
Bonnie Green image
Bonnie Green 11:46
Flowbite Terms & Conditions 12 Pages 18 MB PDF
Delivered
{{< /example >}} ## Image attachment This example can be used to show an image attachment with a download button when hovering over. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="480" >}}
Bonnie Green image
Bonnie Green 11:46

This is the new office <3

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

This is the new office <3

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

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

https://github.com/themesberg/flowbite

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

github.com

 Delivered
{{< /example >}} ## Outline chat bubble Use this example to show a text message with the user profile and timestamp outside the chat bubble. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="370" >}}
Jese image
Bonnie Green 11:46

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

Delivered
{{< /example >}} ## Outline voice note This example can be used to show a voice note with the user profile and timestamp outside the chat bubble. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="370" >}}
Jese image
Bonnie Green 11:46
3:42
Delivered
{{< /example >}} ## Outline file attachment Use this example to show a file attachment with the user profile and timestamp outside the chat bubble. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}
Jese image
Bonnie Green 11:46
Flowbite Terms & Conditions 12 Pages 18 MB PDF
Delivered
{{< /example >}} ## Outline image attachment This example can be used to send an image attachment with the user profile outside the chat bubble. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="460" >}}
Jese image
Bonnie Green 11:46

I'm working from home today! 😅

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

I'm working from home today! 😅

Delivered
{{< /example >}} ## Outline URL preview sharing Use this example to show a URL preview with the user profile and timestamp outside the chat bubble. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="520" >}}
Jese image
Bonnie Green 11:46

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

https://github.com/themesberg/flowbite

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

github.com
Delivered
{{< /example >}} ## Clean chat bubble Use this example to show a text message with the user profile and timestamp with a transparent background. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="180" >}}
Jese image
Bonnie Green 11:46

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

Delivered
{{< /example >}} ## Clean voice note This example can be used to show a voice note with a transparent background. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="180" >}}
Jese image
Bonnie Green 11:46
3:42
Delivered
{{< /example >}} ## Clean file attachment Use this example to show a file attachment and a download button with a transparent background. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="200" >}}
Jese image
Bonnie Green 11:46
Flowbite Terms & Conditions 12 Pages 18 MB PDF
Delivered
{{< /example >}} ## Clean image attachment This example can be used to show an image and a download button with a transparent background. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="380" >}}
Jese image
Bonnie Green 11:46

This is the new office <3

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

This is the new office <3

Delivered
{{< /example >}} ## Clean URL preview sharing This example can be used to show a URL preview with a transparent background. {{< example class="flex justify-center" github="components/chat-bubble.md" show_dark=true iframeHeight="450" >}}
Jese image
Bonnie Green 11:46

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

https://github.com/themesberg/flowbite

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

github.com

 Delivered
{{< /example >}} ================================================ FILE: content/components/clipboard.md ================================================ --- layout: docs title: Tailwind CSS Copy to Clipboard - Flowbite description: 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 group: components toc: true requires_js: true previous: Chat Bubble previousLink: components/chat-bubble/ next: Datepicker nextLink: components/datepicker/ --- The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element. Use cases for websites can be found in the examples below and they include copying code installation commands, API keys, URLs, addresses, contact details, sharing course URLs inside a modal and more. These components are built with Tailwind CSS and Flowbite and can be found on the internet on websites such as Bitly, Cloudflare, Amazon AWS and almost all open-source projects and documentations. ## Default copy to clipboard Make sure that you add the `data-copy-to-clipboard-target="elementID"` data attribute to the trigger element (ie. the button) to initialize the JS behavior where the `elementID` is the ID of the element where the source text can be found (such as input field). Use this example to copy the content of an input text field by clicking on a button and update the button text by applying the JavaScript code from the tab below based on the `updateOnCopyCallback()` function callback from the Flowbite JS API. {{< example class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function() { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install'); const $defaultMessage = document.getElementById('default-message'); const $successMessage = document.getElementById('success-message'); clipboard.updateOnCopyCallback((clipboard) => { $defaultMessage.classList.add('hidden'); $successMessage.classList.remove('hidden'); // reset to default state setTimeout(() => { $defaultMessage.classList.remove('hidden'); $successMessage.classList.add('hidden'); }, 2000); }); }) ` >}}
{{< /example >}} ## Input with copy button This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied. If you also want to update the text inside the tooltip and the icon, then you need to apply the JavaScript code based on the `updateOnCopyCallback()` function callback from the Flowbite JS API. {{< example class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function () { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button'); const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button'); const $defaultIcon = document.getElementById('default-icon'); const $successIcon = document.getElementById('success-icon'); const $defaultTooltipMessage = document.getElementById('default-tooltip-message'); const $successTooltipMessage = document.getElementById('success-tooltip-message'); clipboard.updateOnCopyCallback((clipboard) => { showSuccess(); // reset to default state setTimeout(() => { resetToDefault(); }, 2000); }) const showSuccess = () => { $defaultIcon.classList.add('hidden'); $successIcon.classList.remove('hidden'); $defaultTooltipMessage.classList.add('hidden'); $successTooltipMessage.classList.remove('hidden'); tooltip.show(); } const resetToDefault = () => { $defaultIcon.classList.remove('hidden'); $successIcon.classList.add('hidden'); $defaultTooltipMessage.classList.remove('hidden'); $successTooltipMessage.classList.add('hidden'); tooltip.hide(); } }) ` >}}
{{< /example >}} ## Copy button with text Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied. Make sure that you also apply the custom JavaScript code below to enable the success and default message states. {{< example class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function () { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-text'); const $defaultMessage = document.getElementById('default-message'); const $successMessage = document.getElementById('success-message'); clipboard.updateOnCopyCallback((clipboard) => { showSuccess(); // reset to default state setTimeout(() => { resetToDefault(); }, 2000); }) const showSuccess = () => { $defaultMessage.classList.add('hidden'); $successMessage.classList.remove('hidden'); } const resetToDefault = () => { $defaultMessage.classList.remove('hidden'); $successMessage.classList.add('hidden'); } }) ` >}}
{{< /example >}} ## Input group with copy This example can be used to show a copy to clipboard button inside an input group which has a label positioned inside the input field. The icon inside the button will switch to a success state if you also apply the custom JavaScript code below. {{< example class="flex justify-center items-center h-full" github="components/clipboard.md" show_dark=true iframeHeight="280" javascript=` window.addEventListener('load', function () { const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'website-url'); const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-website-url'); const $defaultIcon = document.getElementById('default-icon'); const $successIcon = document.getElementById('success-icon'); const $defaultTooltipMessage = document.getElementById('default-tooltip-message'); const $successTooltipMessage = document.getElementById('success-tooltip-message'); clipboard.updateOnCopyCallback((clipboard) => { showSuccess(); // reset to default state setTimeout(() => { resetToDefault(); }, 2000); }) const showSuccess = () => { $defaultIcon.classList.add('hidden'); $successIcon.classList.remove('hidden'); $defaultTooltipMessage.classList.add('hidden'); $successTooltipMessage.classList.remove('hidden'); tooltip.show(); } const resetToDefault = () => { $defaultIcon.classList.remove('hidden'); $successIcon.classList.add('hidden'); $defaultTooltipMessage.classList.remove('hidden'); $successTooltipMessage.classList.add('hidden'); tooltip.hide(); } }) ` >}}
URL

Security certificate is required for approval

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

Make sure that your URL is valid

{{< /example >}} ## Copy source code block This example can be used to copy and paste code inside a `
` and `` block by clicking on a button with an icon position inside the block and also show a tooltip with a message when the text has been copied.

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

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

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

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

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

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

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

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


    

        
Card example with CTA button:

    

    

        

            
'use client';

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

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


        

    

        
    

    

    
Configure Tailwind CSS and Flowbite before copying the code



{{< /example >}}

## Card with API keys

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

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

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

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

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

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

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

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

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


    
Create a role with read only in-line policies

    
To give Flowbite read access, please create an IAM Role following trust relationship and inline policy.

    
    

        
        
        
    

    
    

        
        
        
    

    
    

        
        
        
    

    

        
        
    



{{< /example >}}

## Copy contact details

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

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

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

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

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

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

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

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

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


    
Contact details

    

        
        

            Bonnie Green 

            name@flowbite.com 

            + 12 345 67890
        

        
        
    



{{< /example >}}

## Copy button with modal

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

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

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

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

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

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

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

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




{{< /example >}}

## JavaScript behaviour

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

### Object parameters

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



  

      
          

              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          

      
      
          

              
                  triggerEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the trigger element (ie. a button or text) that will trigger the copy to clipboard event when being clicked.
              
          

          

              
                  targetEl
              
              
                  Element
              
              
                  Required
              
              
                  Set the target element where the text that will be copied to the clipboard is located (ie. an input field, code block, address tag).
              
          

          

              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Set these options to set the the content type, HTML decoder and callback function for the copy to clipboard event.
              
          

          

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

      
  




### Options

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



  

      
          

              
                  Option
              
              
                  Type
              
              
                  Description
              
          

      
      
          

              
                  contentType
              
              
                  String
              
              
                  Set the source of the text that will be copied: input (default), innerHTML or textContent.
              
          

          

              
                  htmlEntities
              
              
                  String
              
              
                  Set this option to true if you want to decode the HTML entities for code blocks. Default is false.
              
          

          

              
                  onCopy
              
              
                  Function
              
              
                  Set a callback function when the text has been copied to the clipboard.
              
          

      
  




### Methods

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



  

      
          

              
                  Method
              
              
                  Description
              
          

      
      
            

              
                  getTargetValue()
              
              
                 Get the value of the target element (ie. input field, code block, address tag).
              
          

        

              
                  copy()
              
              
                 Use this method to copy the text from the target element to the clipboard.
              
          

          

              
                  decodeHTML()
              
              
                  Use this method to decode the HTML entities from the target element.
              
          

          

              
                  updateOnCopyCallback(callback)
              
              
                  Use this method to update the callback function that is called when the text has been copied to the clipboard.
              
          

      
  




### Example

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

{{< code lang="javascript" file="clipboard.js" icon="file" >}}
// set the trigger element such as a button or text field
const $triggerEl = document.getElementById('copy-clipboard-button');

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

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

const instanceOptions = {
  id: 'copy-clipboard-example',
  override: true
};
{{< /code >}}

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

{{< code lang="javascript" file="clipboard.js" icon="file" >}}
import { CopyClipboard } from 'flowbite';

/*
 * $triggerEl: required
 * $targetEl: required
 * options: optional
 * instanceOptions: optional
 */
const clipboard = new CopyClipboard($triggerEl, $targetEl, options, instanceOptions);
{{< /code >}}

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

{{< code lang="javascript" file="clipboard.js" icon="file" >}}
$triggerEl.addEventListener('click', () => {
    clipboard.copy();
});
{{< /code >}}

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

{{< code lang="javascript" file="clipboard.js" icon="file" >}}
// get the value, inner HTML or text content of the target element
clipboard.getTargetValue();

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

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

### HTML Markup

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

{{< code lang="html" file="clipboard.html" icon="file" >}}


    
    
    


{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="clipboard.ts" icon="file" >}}
import { CopyClipboard } from 'flowbite';
import type { CopyClipboardOptions, CopyClipboardInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

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

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

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

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

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

// copy the value of the target element
clipboard.copy();
{{< /code >}}

================================================
FILE: content/components/datepicker.md
================================================
---
layout: docs
title: Tailwind CSS Datepicker - Flowbite
description: Start receiving date and time data from your users using this free datepicker element based on Tailwind utility-classes and vanilla JavaScript
group: components
toc: true
requires_js: true

previous: Clipboard
previousLink: components/clipboard/
next: Device mockups
nextLink: components/device-mockups/
---

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

## Getting started

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

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

{{< code lang="html" file="index.html" icon="file" >}}

{{< /code >}}

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

{{< code lang="html" file="index.html" icon="file" >}}

{{< /code >}}

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

{{< code lang="css" file="style.css" icon="file" >}}
@import "tailwindcss";

@source "../node_modules/flowbite-datepicker";
{{< /code >}}

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

## Datepicker example

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true iframeHeight="500" initDatepicker=true >}}


  

    
  

  


{{< /example >}}

## Inline datepicker

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true initDatepicker=true >}}


{{< /example >}}

## Date range picker

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

{{< example class="flex justify-center " github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}


  

    

        
    

    
  

  to
  

    

        
    

    




{{< /example >}}

## Options

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

### Autohide

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}


  

        
  

  


{{< /example >}}

### Action buttons

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

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

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true iframeHeight="530" initDatepicker=true >}}


  

        
  

  


{{< /example >}}

### Date format

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}


  

        
  

  


{{< /example >}}

### Max and min dates

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}


  

        
  

  


{{< /example >}}

### Orientation

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true iframeHeight="480" initDatepicker=true >}}


  

        
  

  


{{< /example >}}

### Title

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

{{< example class="flex justify-center bg-neutral-primary" github="components/datepicker.md" show_dark=true iframeHeight="530" initDatepicker=true >}}


  

        
  

  


{{< /example >}}

### Custom colors

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

### Language (i18n)

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

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

## Timepicker

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

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


    
    

        

            
        

        
    



{{< /example >}}

## Dark mode

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

## JavaScript Behaviour

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

### Object parameters

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



  

      
          

              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          

      
      
          

              
                  datepickerEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the main HTML element that will be rendered for the datepicker. It can be an input element or a `div` for inline rendering.
              
          

          

              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Use the options parameter to set custom datepicker options such as the default date, minimum and maximum values, action buttons and callback functions.
              
          

          

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

      
  




### Options

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



  

      
          

              
                  Option
              
              
                  Type
              
              
                  Description
              
          

      
      
          

              
                  rangePicker
              
              
                  Boolean
              
              
                  If set to true then the datepicker will be converted to a date range picker. By default it's false.
              
          

          

              
                  format
              
              
                  String
              
              
                  Use this option to set a custom format for the datepicker. By default it's `mm/dd/yyyy`.
              
          

          

              
                  maxDate
              
              
                  String
              
              
                 Use this option to set the maximum selectable date of the datepicker component.
              
          

          

              
                  minDate
              
              
                  String
              
              
                 Use this option to set the minimum selectable date of the datepicker component.
              
          

          

              
                  orientation
              
              
                  String
              
              
                 Set the orientation of the datepicker component when it's not inline. It can be top, bottom, left, or right.
              
          

          

              
                  buttons
              
              
                  Boolean
              
              
                 If set to true then the "today" and "clear" action buttons will be shown that lets you select today's date or clear selections.
              
          

          

              
                  autoSelectToday
              
              
                  Integer
              
              
                 If set to 1 then it will automatically have today's date preselected.
              
          

          

              
                  title
              
              
                  String
              
              
                 Set a custom title for the datepicker component. By default it's null.
              
          

          
      
  




### Methods

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



  

      
          

              
                  Method
              
              
                  Description
              
          

      
      
        

              
                  getDate()
              
              
                  Use this method to get the currenctly select date from the datepicker.
              
          

          

              
                  setDate()
              
              
                  Use this method to set the date value of the datepicker component.
              
          

          

              
                  show()
              
              
                  Use this function to programatically show the datepicker component.
              
          

          

              
                  hide()
              
              
                  Use this function to programatically hide the datepicker component.
              
          

          

              
                  getDatepickerInstance()
              
              
                  Use this method to get the parent datepicker instance with the extended collection of methods and options.
              
          

          

              
                  updateOnShow(callback)
              
              
                  Use this method to set a callback function whenever the datepicker component has been shown.
              
          

          

              
                  updateOnHide(callback)
              
              
                  Use this method to set a callback function whenever the datepicker component has been hidden.
              
          

      
  




### Example

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

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

{{< code lang="javascript" file="datepicker.js" icon="file" >}}
// set the target element of the input field
const $datepickerEl = document.getElementById('datepicker-custom');

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

const instanceOptions = {
  id: 'datepicker-custom-example',
  override: true
};
{{< /code >}}

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

{{< code lang="javascript" file="datepicker.js" icon="file" >}}
import { Datepicker } from 'flowbite';

/*
 * $datepickerEl: required
 * options: optional
 */
const datepicker = new Datepicker($datepickerEl, options, instanceOptions);
{{< /code >}}

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

{{< code lang="javascript" file="datepicker.js" icon="file" >}}
// get the currently selected date (undefined if not selected)
datepicker.getDate();

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

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

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

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

### HTML Markup

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

{{< code lang="html" file="datepicker.html" icon="file" >}}


  

    
  

  


{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="datepicker.ts" icon="file" >}}
import { Datepicker } from 'flowbite';
import type { DatepickerOptions, DatepickerInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

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

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

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

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

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

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

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

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

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

### Parent library

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

{{< code lang="bash" >}}
npm install flowbite-datepicker --save
{{< /code >}}

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

{{< code lang="javascript" file="datepicker.js" icon="file" >}}
import Datepicker from 'flowbite-datepicker';
{{< /code >}}

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

{{< code lang="javascript" file="datepicker.js" icon="file" >}}
const datepickerEl = document.getElementById('datepickerId');
new Datepicker(datepickerEl, {
    // options
}); 
{{< /code >}}

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

{{< code lang="javascript" file="datepicker.js" icon="file" >}}
import DateRangePicker from 'flowbite-datepicker';
{{< /code >}}

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

{{< code lang="javascript" file="datepicker.js" icon="file" >}}
const dateRangePickerEl = document.getElementById('dateRangePickerId');
new DateRangePicker(dateRangePickerEl, {
    // options
}); 
{{< /code >}}

### React support

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

### Turbo load support 

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

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

{{< code lang="ruby" file="Gemfile" icon="file" >}}
pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.turbo.min.js"
{{< /code >}}

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

{{< code lang="javascript" file="application.js" icon="file" >}}
import "flowbite/dist/flowbite.turbo.js";
{{< /code >}}


================================================
FILE: content/components/device-mockups.md
================================================
---
layout: docs
title: Tailwind CSS Device Mockups - Flowbite
description: 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
group: components
toc: true

previous: Datepicker
previousLink: components/datepicker/
next: Drawer
nextLink: components/drawer/
---

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

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

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

## Default mockup

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

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


    

    

    

    

    

        
        
    



{{< /example >}}

## iPhone 12 mockup (iOS)

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

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


    

    

    

    

    

        
        
    



{{< /example >}}

## Google Pixel (Android)

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

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


    

    

    

    

    

    

        
        
    



{{< /example >}}

## Tablet mockup

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

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


    

    

    

    

    

        
        
    



{{< /example >}}

## Laptop mockup

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

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


    

        
        
    





    



{{< /example >}}

## Desktop mockup

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

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


    

        
        
    







{{< /example >}}

## Smartwatch mockup

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

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




    

    

    

        
        
    





{{< /example >}}

## Mockup colors

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

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


    

    

    

    

    

        
        
    



{{< /example >}}

================================================
FILE: content/components/drawer.md
================================================
---
layout: docs
title: Tailwind CSS Drawer (offcanvas) - Flowbite
description: 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
group: components
requires_js: true
toc: true

previous: Device mockups
previousLink: components/device-mockups/
next: Dropdowns
nextLink: components/dropdowns/
---

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

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

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

## Default drawer

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

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

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

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

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

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




   






   

      

         
         Drawer heading
      

      
   

   
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.

   
Recommended for professional developers and companies building enterprise-level.

   

      
      
   



{{< /example >}}

## Drawer navigation

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

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




   






   

      
         Flowbite Logo
         Flowbite
      
      
   

  

      
   



{{< /example >}}

## Contact form

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

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




   






   

      

         
         Contact Us
      

      
   

   

      
      

         

            
         

         
      

      
      

         

            
         

         
      

      
      
      
   

   

      info@company.com
   

   

      212-456-7890
   



{{< /example >}}

## Form elements

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

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




   






   

      

         New event
      

      
   

   

        

            
            
        

      
      
      

         

            
         

         
      

      

         
         

            
            
         

      

      

         
         
         
         
      

      
   



{{< /example >}}

## Placement

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

### Left drawer

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

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

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




   






   

      

         
         Left drawer
      

      
   

   
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.

   
Recommended for professional developers and companies building enterprise-level.

   

      
      
   



{{< /example >}}

### Right drawer

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

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

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




   






   

      

         
         Right drawer
      

      
   

   
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.

   
Recommended for professional developers and companies building enterprise-level.

   

      
      
   



{{< /example >}}

### Top drawer

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

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




   






   

      

         
         Top drawer
      

      
   

   
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.

   
Recommended for professional developers and companies building enterprise-level.

   

      
      
   



{{< /example >}}

### Bottom drawer

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

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



   






   

      

         
         Top drawer
      

      
   

   
Upgrade your Figma toolkit with a design system built on top Flowbite CSS featuring variants, style guide and auto layout.

   
Recommended for professional developers and companies building enterprise-level.

   

      
      
   



{{< /example >}}

## Body scrolling

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

### Disabled (default)

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

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




   






  

      
         Flowbite Logo
         Flowbite
      
      
   

  

      
   



{{< /example >}}

### Enabled

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

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




   






    

      
         Flowbite Logo
         Flowbite
      
      
   

  

      
   



{{< /example >}}

## Backdrop

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

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

### Enabled (default)

Use this example to enable the backdrop element by default.

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




   






    

      
         Flowbite Logo
         Flowbite
      
      
   

  

      
   



{{< /example >}}

### Disabled

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

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




   






    

      
         Flowbite Logo
         Flowbite
      
      
   

  

      
   



{{< /example >}}

## Swipeable edge

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

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

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

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




   






   

      
      

         
         Add widget
      

   

   

      

         

            
         

         
Chart

      

      

         

            
         

         
Table

      

      
      

         

            
         

         
List

      

      

         

            
         

         
Price

      

      

         

            
         

         
Users

      

      
      

         

            
         

         
Custom

      

   



{{< /example >}}

## More examples

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

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

## JavaScript behaviour

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

### Object parameters

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



    

        
            

                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            

        
        
            

                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Set the main drawer element as a JavaScript object.
                
            

            

                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the default state of the drawer, placement, and other options.
                
            

            

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

        
    




### Options

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



    

        
            

                
                    Option
                
                
                    Type
                
                
                    Description
                
            

        
        
            

                
                    placement
                
                
                    String
                
                
                    Set the position of the drawer component relative to the document body by choosing one of the values from {top|right|bottom|left}.
                
            

            

                
                    backdrop
                
                
                    Boolean
                
                
                  Enable or disable the backdrop element. Values can be true or false.
                
            

            

                
                    bodyScrolling
                
                
                    Boolean
                
                
                    Enable or disable body scrolling behaviour when the drawer is active. Values can be true or false.
                
            

            

                
                    edge
                
                
                    Boolean
                
                
                    Enable or disable the edge functionality by showing a small part of the drawer component even when inactive. Values can be true or false.
                
            

            

                
                    edgeOffset
                
                
                    String
                
                
                    Set the offset height that should be shown when the drawer is inactive. Default value is bottom-[60px]
                
            

            

                
                    backdropClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS utility classes to override the custom backdrop classes.
                
            

            

                
                    onShow()
                
                
                    Function
                
                
                    Set a callback function when the drawer has been shown.
                
            

            

                
                    onHide()
                
                
                    Function
                
                
                    Set a callback function when the drawer has been hidden.
                
            

            

                
                    onToggle()
                
                
                    Function
                
                
                    Set a callback function when the drawer visibility has been toggled.
                
            

        
    




### Methods

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



    

        
            

                
                    Method
                
                
                    Description
                
            

        
        
            

                
                    show()
                
                
                    Use the show function to show the drawer element.
                
            

            

                
                    hide()
                
                
                    Use the hide function to hide the drawer element.
                
            

            

                
                    toggle()
                
                
                    Use the toggle function to toggle the drawer element's visibility.
                
            

            

                
                    isVisible()
                
                
                    Use the isVisible function to check whether the element is visible or not.
                
            

            

                
                    updateOnShow(callback)
                
                
                    Set a callback function when the drawer has been shown.
                
            

            

                
                    updateOnHide(callback)
                
                
                    Set a callback function when the drawer has been hidden.
                
            

            

                
                    updateOnToggle(callback)
                
                
                    Set a callback function when the drawer visibility has been toggled.
                
            

        
    




### Example

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

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

{{< code lang="javascript" file="drawer.js" icon="file" >}}
// set the drawer menu element
const $targetEl = document.getElementById('drawer-js-example');

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

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

Initialize the Drawer positioning by creating a new object:

{{< code lang="javascript" file="drawer.js" icon="file" >}}
import { Drawer } from 'flowbite';

/*
 * $targetEl (required)
 * options (optional)
 * instanceOptions (optional)
 */
const drawer = new Drawer($targetEl, options, instanceOptions);
{{< /code >}}

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

{{< code lang="javascript" file="drawer.js" icon="file" >}}
// show the drawer
drawer.show();

// hide the drawer
drawer.hide();
{{< /code >}}

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

{{< code lang="javascript" file="drawer.js" icon="file" >}}
// toggle the drawer
drawer.toggle();
{{< /code >}}

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

{{< code lang="javascript" file="drawer.js" icon="file" >}}
// true or false
drawer.isVisible();
{{< /code >}}

### HTML Markup

Use the following HTML code for the JavaScript example above.

{{< code lang="html" file="drawer.html" icon="file" >}}



    

      
         Flowbite Logo
         Flowbite
      
      
   

  

      
   



{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="drawer.ts" icon="file" >}}
import { Drawer } from 'flowbite';
import type { DrawerOptions, DrawerInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

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

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

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

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

// show the drawer
drawer.show();
{{< /code >}}


================================================
FILE: content/components/dropdowns.md
================================================
---
layout: docs
title: Tailwind CSS Dropdown - Flowbite
description: 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
group: components
toc: true
requires_js: true

previous: Drawer
previousLink: components/drawer/
next: Footer
nextLink: components/footer/
---

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

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

## Dropdown example

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

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

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




{{< /example >}}

## Dropdown hover

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

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

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




{{< /example >}}

### Delay duration

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

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




{{< /example >}}

## Dropdown divider

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

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




{{< /example >}}

## Dropdown header

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

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



{{< /example >}}

## Multi-level dropdown

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

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




{{< /example >}}

## Dropdown with checkbox

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

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



{{< /example >}}

### Background hover

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

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




{{< /example >}}

### Helper text

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

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



{{< /example >}}

## Dropdown with radio

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

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




{{< /example >}}

### Background hover

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

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




{{< /example >}}

### Helper text

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

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





{{< /example >}}

## Dropdown with toggle switch

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

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





{{< /example >}}

## Dropdown with scrolling

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

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




{{< /example >}}

## Scrollable checkboxes

Use this example to show multiple dropdown items in a scrollable container with checkboxes.

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




{{< /example >}}

## Dropdown with search

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

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




{{< /example >}}

## Menu icon

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

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









{{< /example >}}

## Notification bell

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

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





{{< /example >}}

## User avatar

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

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




{{< /example >}}

### Avatar with name

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

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




{{< /example >}}

## Dropdown navbar

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

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


{{< /example >}}

## Dropdown datepicker

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

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



{{< /example >}}

## Sizes

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

{{< example github="components/dropdowns.md" class="space-x-2 space-y-2" show_dark=true iframeHeight="380" >}}









{{< /example >}}

## Placement

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

{{< example class="flex flex-wrap space-x-4 justify-center py-48" github="components/dropdowns.md" show_dark=true >}}



















{{< /example >}}

### Double placement

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

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









{{< /example >}}

## Dropdown offset

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

### Distance

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

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




{{< /example >}}

### Skidding

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

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




{{< /example >}}

## More examples

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

## JavaScript behaviour

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

### Object parameters

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



  

      
          

              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          

      
      
          

              
                  targetElement
              
              
                  Element
              
              
                  Required
              
              
                  Apply the main dropdown menu element as the first parameter of the Dropdown object.
              
          

          

              
                  triggerElement
              
              
                  Element
              
              
                  Required
              
              
                  Apply the trigger element, such as a button, which is required to position the dropdown menu and set a click event.
              
          

          

              
                  options
              
              
                  Object
              
              
                  Optional
              
              
                  Use the options parameter to set the positioning of the dropdown menu.
              
          

          

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

      
  




### Options

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



  

      
          

              
                  Option
              
              
                  Type
              
              
                  Description
              
          

      
      
          

              
                  placement
              
              
                  String
              
              
                  Set the position of the dropdown menu relative to the trigger element choosing from top|right|bottom|left.
              
          

          

              
                  triggerType
              
              
                  String
              
              
                  Set the event type that will trigger the dropdown menu choosing between hover|click|none.
              
          

          

              
                  offsetDistance
              
              
                  String
              
              
                  Set the amount of pixels the dropdown menu should be offset relative to the trigger element on the X horizontal axis.
              
          

          

              
                  offsetSkidding
              
              
                  String
              
              
                  Set the number of pixels the dropdown menu should be offset relative to the trigger element on the Y horizontal axis.
              
          

          

              
                  delay
              
              
                  Number
              
              
                  Set the milliseconds for which the showing or hiding of the dropdown will be delayed for when using the hover trigger type.
              
          

          

              
                  ignoreClickOutsideClass
              
              
                  String
              
              
                  Set a class for one or more elements that when they are clicked should ignore closing the dropdown (ie. offcanvas datepicker).
              
          

          

              
                  onHide
              
              
                  Function
              
              
                  Set a callback function when the dropdown has been hidden.
              
          

          

              
                  onShow
              
              
                  Function
              
              
                  Set a callback function when the dropdown has been shown.
              
          

          

              
                  onToggle
              
              
                  Function
              
              
                  Set a callback function when the dropdown visibility has been toggled.
              
          

      
  




### Methods

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



  

      
          

              
                  Method
              
              
                  Description
              
          

      
      
          

              
                  show()
              
              
                  Use this method on the Dropdown object to show the dropdown menu.
              
          

          

              
                  hide()
              
              
                  Use this method on the Dropdown object to hide the dropdown menu.
              
          

          

              
                  toggle()
              
              
                  Use this method on the Dropdown object to toggle the visibility of the dropdown menu.
              
          

          

              
                  isVisible()
              
              
                  Returns true or false based on the visibility of the dropdown.
              
          

          

              
                  updateOnShow(callback)
              
              
                  Use this method to set a callback function when the dropdown has been shown.
              
          

          

              
                  updateOnHide(callback)
              
              
                  Use this method to set a callback function when the dropdown has been hidden.
              
          

          

              
                  updateOnToggle(callback)
              
              
                  Use this method to set a callback function when the dropdown visibility has been changed.
              
          

      
  




### Example

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

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

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

{{< code lang="javascript" file="dropdown.js" icon="file" >}}
// set the dropdown menu element
const $targetEl = document.getElementById('dropdownMenu');

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

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

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

Create a new Dropdown object based on the options above.

{{< code lang="javascript" file="dropdown.js" icon="file" >}}
import { Dropdown } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 * instanceOptions: optional
 */
const dropdown = new Dropdown($targetEl, $triggerEl, options, instanceOptions);
{{< /code >}}

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

{{< code lang="javascript" file="dropdown.js" icon="file" >}}
// show the dropdown menu
dropdown.show();

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

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

// check if dropdown is visible/open
dropdown.isVisible();
{{< /code >}}

### HTML Markup

Use the following HTML code for the JavaScript example above.

{{< code lang="html" file="dropdown.html" icon="file" >}}




{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="dropdown.ts" icon="file" >}}
import { Dropdown } from 'flowbite';
import type { DropdownOptions, DropdownInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

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

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

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

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

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

// show the dropdown
dropdown.show();
{{< /code >}}


================================================
FILE: content/components/footer.md
================================================
---
layout: docs
title: Tailwind CSS Footer - Flowbite
description: 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
group: components
toc: true

previous: Dropdowns
previousLink: components/dropdowns/
next: Forms
nextLink: components/forms/
---

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

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

## Default footer

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

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


{{< /example >}}

## Footer with logo

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

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



{{< /example >}}

## Social media icons

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

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


{{< /example >}}

## Sitemap links

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

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


{{< /example >}}

## Sticky footer

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

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


{{< /example >}}

## More examples

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

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


================================================
FILE: content/components/forms.md
================================================
---
layout: docs
title: Tailwind CSS Forms - Flowbite
description: Use the Tailwind CSS form and input elements such as checkboxes, radios, textarea, text inputs to collect information from users with Flowbite
group: components
toc: true
requires_js: true

previous: Footer
previousLink: components/footer/
next: Gallery
nextLink: components/gallery/
---

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

## Default form

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

{{< example github="components/forms.md" show_dark=true >}}


  

    
    
  

  

    
    
  

  
  


{{< /example >}}



  {{< requires_tw3 >}}



## Floating labels

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

{{< example github="components/forms.md" show_dark=true >}}



  

      
      
  

  

      
      
  

  

      
      
  

  

    

        
        
    

    

        
        
    

  

  

    

        
        
    

    

        
        
    

  

  


{{< /example >}}

## Input Sizes

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

{{< example github="components/forms.md" show_dark=true >}}


    

        
        
    

    

        
        
    

    

        
        
    

    

        
        
    



{{< /example >}}

## Disabled inputs

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

{{< example github="components/forms.md" show_dark=true >}}


  
  


{{< /example >}}

## Shadow inputs

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

{{< example github="components/forms.md" show_dark=true >}}



  

    
    
  

  

    
    
  

  

    
  

  



{{< /example >}}

## Helper text

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

{{< example github="components/forms.md" show_dark=true >}}

 
  
  

  
Read our Privacy Policy.



{{< /example >}}

## Input element with icon

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

{{< example github="components/forms.md" show_dark=true >}}


  
  

    

      
    

    
  



{{< /example >}}

## Input element with addon

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

{{< example github="components/forms.md" show_dark=true >}}


  
  

    
      
    
    
  



{{< /example >}}

## Form validation

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

{{< example github="components/forms.md" show_dark=true >}}


  

    
    
    
Well done! Some success message.

  

  

    
    
    
Oh, snapp! Some error message.

  



{{< /example >}}

## Textarea

Use the following code to create a textarea form element.

{{< example github="components/forms.md" show_dark=true >}}


  
  


{{< /example >}}

## Select input

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

{{< example github="components/forms.md" show_dark=true >}}


  
  


{{< /example >}}

## Checkbox

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

{{< example github="components/forms.md" show_dark=true >}}



  Checkbox variants

  

      
      
  


  

      
      
  


  

      
      
  

  
  

      

          
      

      

          
          
For orders shipped from $25 in books or $29 in other categories

      

  


  

      
      
  



{{< /example >}}

## Radio buttons

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

{{< example github="components/forms.md" show_dark=true >}}



  Countries

  

    
    
  


  

    
    
  


  

    
    
  


  

    
    
  


  

    
    
  



{{< /example >}}



  {{< requires_js >}}



## File upload

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

{{< example github="components/forms.md" show_dark=true >}}


  
  


{{< /example >}}

## Toggle Switch

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

{{< example class="flex flex-col flex-wrap space-y-4" github="components/forms.md" show_dark=true >}}



{{< /example >}}

## More examples

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

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


================================================
FILE: content/components/gallery.md
================================================
---
layout: docs
title: Tailwind CSS Gallery (Masonry) - Flowbite
description: 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
group: components
toc: true

previous: Forms
previousLink: components/forms/
next: Indicators
nextLink: components/indicators/
---

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

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

## Default gallery

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

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



    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    



{{< /example >}}

## Masonry grid

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

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



    

        

            
        

        

            
        

        

            
        

    

    

        

            
        

        

            
        

        

            
        

    

    

        

            
        

        

            
        

        

            
        

    

    

        

            
        

        

            
        

        

            
        

    



{{< /example >}}

## Featured image

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

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



    

        
    

    

        

            
        

        

            
        

        

            
        

        

            
        

        

            
        

    



{{< /example >}}

## Quad gallery

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

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



        

            
        

        

            
        

        

            
        

        

            
        

    

{{< /example >}}



  {{< requires_js >}}



## Gallery with slider

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

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


{{< /example >}}



  {{< requires_js >}}



## Custom slider controls

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

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


{{< /example >}}

## Gallery with tag filters

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

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



    
    
    
    
    




    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    

    

        
    



{{< /example >}}


================================================
FILE: content/components/indicators.md
================================================
---
layout: docs
title: Tailwind CSS Indicators - Flowbite
description: 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
group: components
toc: true

previous: Gallery
previousLink: components/gallery/
next: Jumbotron
nextLink: components/jumbotron/
---

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

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

## Default indicator

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

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









{{< /example >}}

## Legend indicator

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

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

## Indicator count

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

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

{{< /example >}}

## Status indicator

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

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



    profile image
    




    profile image
    


{{< /example >}}

## Badge indicator

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

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


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


{{< /example >}}

## Stepper indicator

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

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


    
    
  1. 
        
    
            
    
                
            
    
            
    
        
    
        
    
            
    Step 1
    
        
    
    
    2. 
    
  2. 
        
    
            
    
                
            
    
            
    
        
    
        
    
            
    Step 2
    
        
    
    
    3. 
    
  3. 
        
    
            
    
                
            
    
            
    
        
    
        
    
            
    Step 2
    
        
    
    
    4. 
    
  4. 
        
    
            
    
                
            
    
        
    
        
    
            
    Step 3
    
        
    
    
    5. 



    
    
  1. 
        
    
            
    
                
            
    
            
    
        
    
        
    
            
    Step 1
    
        
    
    
    2. 
    
  2. 
        
    
            
    
                
            
    
            
    
        
    
        
    
            
    Step 2
    
        
    
    
    3. 
    
  3. 
        
    
            
    
                
            
    
            
    
        
    
        
    
            
    Step 2
    
        
    
    
    4. 
    
  4. 
        
    
            
    
                
            
    
        
    
        
    
            
    Step 3
    
        
    
    
    5. 


{{< /example >}}

## Loading indicator

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

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



    
loading...



{{< /example >}}

## Spinner indicator

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

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



    

        
        Loading...
    



{{< /example >}}

## Indicator position

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

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



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


{{< /example >}}


================================================
FILE: content/components/jumbotron.md
================================================
---
layout: docs
title: Tailwind CSS Jumbotron - Flowbite
description: 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
group: components
toc: true

previous: Indicators
previousLink: components/indicators/
next: KBD (Keyboard)
nextLink: components/kbd/
---

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

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

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

## Default jumbotron

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

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



    

        
We invest in the world’s potential

        
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

        

            
            
        

    



{{< /example >}}

## Background image

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

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



    

        
We invest in the world’s potential

        
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

        

            
            
        

    



{{< /example >}}

## Featured video

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

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



    

        

            
We invest in the world’s potential

            
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

            

                
                
            

        

        

            
        

    



{{< /example >}}

## Authentication form

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

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



    

        

            
We invest in the world’s potential

            
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

            Read more about our app 
            
            
        

        

            

                

                    
Sign in to our platform

                    

                        
                        
                    

                    

                        
                        
                    

                    

                        

                            
                            
                        

                        Lost Password?
                    

                    
                    
Not registered? Create account

                

            

        

    



{{< /example >}}

## Gradient background

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

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



    

        
        
We invest in the world’s potential

        
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

        
   
            
            

                

                    
                

                
                
            

        

    

    



{{< /example >}}

## Jumbotron with cards

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

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



    

        

            
                
                Tutorial
            
            
How to quickly deploy 
a static website

            
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence web designers.

            
        

        

            

                
                    
                    Design
                
                
Start with Flowbite Design System

                
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers.

                Read more
                    
                
            

            

                
                    
                    Code
                
                
Best react libraries around the web

                
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers.

                Read more
                    
                
            

        

    



{{< /example >}}

## More examples

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


================================================
FILE: content/components/kbd.md
================================================
---
layout: docs
title: Tailwind CSS KBD (Keyboard) - Flowbite
description: Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components
group: components
toc: true

previous: Jumbotron
previousLink: components/jumbotron/
next: List group
nextLink: components/list-group/
---

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

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

## Default KBD

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

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

## KBD inside text

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

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



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


{{< /example >}}

## KBD inside table

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

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



    

        
            

                
                    Key
                
                
                    Description
                
            

        
        
            

                
                    Shift
                        or
                    Tab
                
                
                    Navigate to interactive elements
                
            

            

                
                    Enter
                    or
                    Spacebar
                
                
                    Ensure elements with ARIA role="button" can be activated with both key commands.
                
            

            

                
                    
                        
                        Arrow key up
                    
                    
                        
                        Arrow key down
                    
                    or
                    
                        
                        Arrow key left
                    
                    
                        
                        Arrow key right
                    
                
                
                    Choose and activate previous/next tab.
                
            

        
    



{{< /example >}}

## Arrow keys

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

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


Arrow key up



Arrow key down



Arrow key left



Arrow key right

{{< /example >}}

## Letter keys

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

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

## Number keys

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

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

## Function keys

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

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


================================================
FILE: content/components/list-group.md
================================================
---
layout: docs
title: Tailwind CSS List Group - Flowbite
description: Use the list group component to display a series of items, buttons or links inside a single element
group: components
toc: true

previous: KBD (Keyboard)
previousLink: components/kbd/
next: Mega menu
nextLink: components/mega-menu/
---

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

## Default list group

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

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


    
    
  • Profile
    • 
    
  • Settings
    • 
    
  • Messages
    • 
    
  • Download
    • 


{{< /example >}}

## List group with links

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

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



    
        Profile
    
    
        Settings
    
    
        Messages
    
    
        Download
    


{{< /example >}}

## List group with buttons

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

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



    
    
    
    
    


{{< /example >}}

## List group with icons

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

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



    
        
        Profile
    
    
        
        Settings
    
    
        
        Messages
    
    
        
        Download
    


{{< /example >}}


## Features list group

Use this example to show a list of features with icons in a card component.

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



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



{{< /example >}}

## Statistic list with divider

This example can be used to show a list of statistical data in a card component.

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



    
    
        
  • 
            
    
                
                Electronics
            
    
            $5B
        
    • 
        
  • 
            
    
                
                Fashion
            
    
            $2.78B
        
    • 
        
  • 
            
    
                
                Home Furnishings
            
    
            $1.8B
        
    • 
        
  • 
            
    
                
                Auto & Moto
            
    
            $1.1B
        
    • 
        
  • 
            
    
                
                Food and Beverage
            
    
            $987
        
    • 
        
  • 
            
    
                
                Toys
            
    
            $705
        
    • 
        
  • 
            
    
                
                Books & Music
            
    
            $688
        
    • 
        
  • 
            
    
                
                Office Equipment
            
    
            $534
        
    • 
        
  • 
            
    
                
                Audio & Video Equipment
            
    
            $502
        
    • 
        
  • 
            
    
                
                Other Categories
            
    
            $95M
        
    • 
    



{{< /example >}}

## List with avatars and CTA

Use this component to show a list of users with avatars and CTA buttons.

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



    
Latest users

    

        
    
            
  • 
                
    
                    
    
                        Neil image
                    
    
                    
    
                        
    
                            Neil Sims
                        
    
                        
    
                            neil@windster.com
                        
    
                    
    
                    
    
                        
                        
                        
                    
    
                
    
            
    • 
            
  • 
                
    
                    
    
                        Bonnie image
                    
    
                    
    
                        
    
                            Bonnie Green
                        
    
                        
    
                            bonnie@flowbite.com
                        
    
                    
    
                    
    
                        
                        
                        
                    
    
                
    
            
    • 
            
  • 
                
    
                    
    
                        Michael image
                    
    
                    
    
                        
    
                            Michael Gough
                        
    
                        
    
                            michael@themesberg.com
                        
    
                    
    
                    
    
                        
                        
                        
                    
    
                
    
            
    • 
            
  • 
                
    
                    
    
                        Lana image
                    
    
                    
    
                        
    
                            Lana Byrd
                        
    
                        
    
                            lana@apple.com
                        
    
                    
    
                    
    
                        
                        
                        
                    
    
                
    
            
    • 
            
  • 
                
    
                    
    
                        Thomas image
                    
    
                    
    
                        
    
                            Thomas Lean
                        
    
                        
    
                            thomas@google.com
                        
    
                    
    
                    
    
                        
                        
                        
                    
    
                
    
            
    • 
        

    




{{< /example >}}


================================================
FILE: content/components/mega-menu.md
================================================
---
layout: docs
title: Tailwind CSS Mega Menu - Flowbite
description: 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.
group: components
toc: true
requires_js: true

previous: List group
previousLink: components/list-group/
next: Modal
nextLink: components/modal/
---

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

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

## Default mega menu

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

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


{{< /example >}}

## Mega menu with icons

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

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


{{< /example >}}

## Full width dropdown

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

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


{{< /example >}}

## Full width with CTA

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

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


{{< /example >}}

## Full width with image

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

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


{{< /example >}}

## More examples

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


================================================
FILE: content/components/modal.md
================================================
---
layout: docs
title: Tailwind CSS Modal - Flowbite
description: Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles
group: components
toc: true
requires_js: true

previous: Mega menu
previousLink: components/mega-menu/
next: Navbar
nextLink: components/navbar/
---

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

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

## Default modal

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

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

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

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






{{< /example >}}

## Static modal

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

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






{{< /example >}}

## Pop-up modal

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

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



{{< /example >}}

## Form element

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

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





 
{{< /example >}}

## Modal with CRUD

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

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





 
{{< /example >}}

## Modal with radio inputs

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

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





 
{{< /example >}}

## Modal with timeline

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

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





 
{{< /example >}}

## Modal with progress bar

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

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





 
{{< /example >}}


## Crypto wallet

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

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




{{< /example >}}

## Sizes

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

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



    
    
    
    
    














{{< /example >}}

## Placement

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

The default position is the center of the page.

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



    
    
    
    
    














{{< /example >}}

## More examples

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

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

## JavaScript behaviour

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

### Object parameters

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



    

        
            

                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            

        
        
            

                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Set the main modal element as a JavaScript object.
                
            

            

                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the default state of the modal, placement, and animations.
                
            

            

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

        
    




### Options

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



    

        
            

                
                    Option
                
                
                    Type
                
                
                    Description
                
            

        
        
            

                
                    placement
                
                
                    String
                
                
                    Set the position of the modal element relative to the document body by choosing one of the values from {top|center|right}-{left|center|right}. (eg. top-left or bottom-right)
                
            

            

                
                    backdrop
                
                
                    String
                
                
                    Choose between static or dynamic to prevent closing the modal when clicking outside.
                
            

            

                
                    backdropClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS classes for the backdrop element (eg. 'bg-blue-500 dark:bg-blue-400'.
                
            

            

                
                    closable
                
                
                    Boolean
                
                
                    Set to false to disable closing the modal on hitting ESC or clicking on the backdrop.
                
            

            

                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the modal has been hidden.
                
            

            

                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the modal has been shown.
                
            

            

                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the modal visibility has been toggled.
                
            

        
    




### Methods

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



    

        
            

                
                    Method
                
                
                    Description
                
            

        
        
            

                
                    toggle()
                
                
                    Use the toggle function on the Modal object to toggle the modal element's visibility.
                
            

            

                
                    show()
                
                
                    Use the show function on the Modal object to show the modal element.
                
            

            

                
                    hide()
                
                
                    Use the hide function on the Modal object to hide the modal element.
                
            

            

                
                    isHidden()
                
                
                    Use this function to check if the modal is hidden.
                
            

            

                
                    isVisible()
                
                
                    Use this function to check if the modal is visible.
                
            

            

                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function when the modal has been shown.
                
            

            

                
                    updateOnHide(callback)
                
                
                    Use this method to set a custom callback function when the modal has been closed.
                
            

            

                
                    updateOnToggle(callback)
                
                
                    Use this method to set a custom callback function when the modal visibility has been toggled.
                
            

        
    




### Example

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

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

{{< code lang="javascript" file="modal.js" icon="file" >}}
// set the modal menu element
const $targetEl = document.getElementById('modalEl');

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

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

Create a new Modal object based on the options above.

{{< code lang="javascript" file="modal.js" icon="file" >}}
import { Modal } from 'flowbite';

/*
 * $targetEl: required
 * options: optional
 */
const modal = new Modal($targetEl, options, instanceOptions);
{{< /code >}}

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

{{< code lang="javascript" file="modal.js" icon="file" >}}
// show the modal
modal.show();

// hide the modal
modal.hide();
{{< /code >}}

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

{{< code lang="javascript" file="modal.js" icon="file" >}}
// toggle the modal
modal.toggle();
{{< /code >}}

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

{{< code lang="javascript" file="modal.js" icon="file" >}}
// true if hidden
modal.isHidden();

// true if visible
modal.isVisible();
{{< /code >}}

### HTML Markup

Use the following HTML code for the JavaScript example above.

{{< code lang="html" file="modal.html" icon="file" >}}

{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="modal.ts" icon="file" >}}
import { Modal } from 'flowbite';
import type { ModalOptions, ModalInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

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

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

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

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

modal.show();
{{< /code >}}


================================================
FILE: content/components/navbar.md
================================================
---
layout: docs
title: Tailwind CSS Navbar - Flowbite
description: 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
group: components
toc: true
requires_js: true

previous: Modal
previousLink: components/modal/
next: Pagination
nextLink: components/pagination/
---

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

## Default navbar

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}

{{< /example >}}

## Navbar with dropdown

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}

{{< /example >}}

## Multi-level dropdown

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}

{{< /example >}}

## Sticky navbar

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}


{{< /example >}}

## Navbar with submenu

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}


  
  


{{< /example >}}

## Navbar with search

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="480" iframeMaxHeight="480" skeletonPlaceholders=true >}}


{{< /example >}}

## Navbar with CTA button

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="300" skeletonPlaceholders=true >}}


{{< /example >}}

## Language dropdown

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="320" skeletonPlaceholders=true >}}


{{< /example >}}

## User menu dropdown

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

{{< example github="components/navbar.md" show_dark=true skeletonPlaceholders=true iframeHeight="380" >}}


{{< /example >}}

## Mega menu navbar

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

{{< example github="components/navbar.md" show_dark=true skeletonPlaceholders=true iframeHeight="340" >}}

{{< /example >}}

## Solid background

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="320" skeletonPlaceholders=true >}}

{{< /example >}}

## Hamburger menu

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

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

{{< example github="components/navbar.md" show_dark=true iframeHeight="320" skeletonPlaceholders=true >}}


{{< /example >}}

## More examples

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

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

## JavaScript behaviour

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

### Object parameters

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



  

      
          

              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          

      
      
          

              
                  targetEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the target element object that will be expanded or collapsed.
              
          

          

              
                  triggerEl
              
              
                  Element
              
              
                  Optional
              
              
                  Pass the trigger element that will expand or collapse the target element based on click event. 
              
          

          

              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Set these options to override the default transition, duration, and timing function of the collapse animation.
              
          

          

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

      
  




### Options

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



  

      
          

              
                  Option
              
              
                  Type
              
              
                  Description
              
          

      
      
          

              
                  onCollapse
              
              
                  Function
              
              
                  Set a callback function when the item has been collapsed.
              
          

          

              
                  onExpand
              
              
                  Function
              
              
                  Set a callback function when the item has been expanded.
              
          

          

              
                  onToggle
              
              
                  Function
              
              
                  Set a callback function when the item has either been expanded or collapsed.
              
          

      
  




### Methods

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



  

      
          

              
                  Method
              
              
                  Description
              
          

      
      
          

              
                  collapse()
              
              
                  Use this method on the Collapse object to hide the target element.
              
          

          

              
                  expand()
              
              
                  Use this method on the Collapse object to show the target element.
              
          

          

              
                  toggle()
              
              
                  Use this method on the Collapse object toggle the current visibility of the target element.
              
          

          

              
                  updateOnCollapse(callback)
              
              
                  Use this method to set a callback function when the item has been collapsed.
              
          

          

              
                  updateOnExpand(callback)
              
              
                  Use this method to set a callback function when the item has been expanded.
              
          

          

              
                  updateOnToggle(callback)
              
              
                  Use this method to set a callback function when the item has been toggled.
              
          

      
  




### Example

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

First of all, you need to set the object parameters where the target element is required and the other two are optional.

{{< code lang="javascript" file="navbar.js" icon="file" >}}
// set the target element that will be collapsed or expanded (eg. navbar menu)
const $targetEl = document.getElementById('targetEl');

// optionally set a trigger element (eg. a button, hamburger icon)
const $triggerEl = document.getElementById('triggerEl');

// optional options with default values and callback functions
const options = {
    onCollapse: () => {
        console.log('element has been collapsed');
    },
    onExpand: () => {
        console.log('element has been expanded');
    },
    onToggle: () => {
        console.log('element has been toggled');
    },
};

const instanceOptions = {
  id: 'targetEl',
  override: true
};

{{< /code >}}

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

{{< code lang="javascript" file="navbar.js" icon="file" >}}
import { Collapse } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: optional
 * options: optional
 */
const collapse = new Collapse($targetEl, $triggerEl, options, instanceOptions);
{{< /code >}}

Now you can programmatically expand or collapse the target element using the methods of the Collapse object.

{{< code lang="javascript" file="navbar.js" icon="file" >}}
// show the target element
collapse.expand();

// hide the target element
collapse.collapse();

// toggle the visibility of the target element
collapse.toggle();
{{< /code >}}

### HTML Markup

Here is an example of the HTML markup that you can use for the JavaScript example above. Please note that you should use the `hidden` class from Tailwind CSS to hide the target element by default.

{{< code lang="html" file="navbar.html" icon="file" >}}




{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="navbar.ts" icon="file" >}}
import { Collapse } from 'flowbite';
import type { CollapseOptions, CollapseInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the target element that will be collapsed or expanded (eg. navbar menu)
const $targetEl: HTMLElement = document.getElementById('targetEl');

// optionally set a trigger element (eg. a button, hamburger icon)
const $triggerEl: HTMLElement = document.getElementById('triggerEl');

// optional options with default values and callback functions
const options: CollapseOptions = {
    onCollapse: () => {
        console.log('element has been collapsed');
    },
    onExpand: () => {
        console.log('element has been expanded');
    },
    onToggle: () => {
        console.log('element has been toggled');
    },
};

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

/*
 * $targetEl: required
 * $triggerEl: optional
 * options: optional
 * instanceOptions: optional
 */
const collapse: CollapseInterface = new Collapse(
    $targetEl,
    $triggerEl,
    options,
    instanceOptions
);

// show the target element
collapse.expand();
{{< /code >}}


================================================
FILE: content/components/pagination.md
================================================
---
layout: docs
title: Tailwind CSS Pagination - Flowbite
description: Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes
group: components
toc: true

previous: Navbar
previousLink: components/navbar/
next: Popover
nextLink: components/popover/
---

The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.

## Default pagination

Use the following list of pagination items based on two sizes powered by Tailwind CSS utility classes to indicate a series of content for your website.

{{< example class="flex flex-col space-y-6 items-center" github="components/pagination.md" show_dark=true >}}





{{< /example >}}

## Pagination with icons

The following pagination component example shows how you can use [SVG icons](https://flowbite.com/icons/) instead of text to show the previous and next pages.

{{< example class="flex flex-col space-y-6 items-center" github="components/pagination.md" show_dark=true >}}




{{< /example >}}

## Previous and next

Use the following markup to show simple previous and next elements.

{{< example class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}



  
  
    Previous
  

  
  
    Next
  





  
  
    Previous
  

  
  
    Next
  


{{< /example >}}

## Previous and next with icons

Use the following code to show simple previous and next elements with icons.

{{< example class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}


  
  
    
    Previous
  

  
  
    Next
    
  





  
  
    
    Previous
  

  
  
    Next
    
  


{{< /example >}}

## Table data pagination

You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.

{{< example class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}



  
  
      Showing 1 to 10 of 100 Entries
  
  
  

    
    
    
    
  





  
  
      Showing 1 to 10 of 100 Entries
  
  
  

    
    
    
    
  



{{< /example >}}

## Table pagination with icons

You can use the following code to show the number of data shown inside a table element and also the previous and next action buttons coupled with icons.

{{< example class="flex flex-col space-y-4 items-center justify-center" github="components/pagination.md" show_dark=true >}}



  
  
      Showing 1 to 10 of 100 Entries
  
  
  

    
    
    
    
  





  
  
      Showing 1 to 10 of 100 Entries
  
  
  

    
    
    
    
  



{{< /example >}}

## Pagination with dropdown

Use this example of a pagination component with a dropdown to select the number of items per page.

{{< example class="flex flex-col space-y-6 items-center" github="components/pagination.md" show_dark=true >}}



{{< /example >}}

## Pagination with input

Use this pagination component with an input field to navigate through pages directly.

{{< example class="flex flex-col space-y-6 items-center" github="components/pagination.md" show_dark=true >}}



{{< /example >}}

## Input field and button

This example can be used to introduce the page number inside the input field and navigate by clicking on a button.

{{< example class="flex flex-col space-y-6 items-center" github="components/pagination.md" show_dark=true >}}



{{< /example >}}

## Select input and buttons

This example can be used to select the number of pages and navigate using the left and right arrows.

{{< example class="flex flex-col space-y-6 py-8 items-center" github="components/pagination.md" show_dark=true >}}



{{< /example >}}

## Single pagination

This example can be used to show an interval of items per page and navigate using the left and right arrows.

{{< example class="flex flex-col space-y-6 py-8 items-center" github="components/pagination.md" show_dark=true >}}



{{< /example >}}

================================================
FILE: content/components/popover.md
================================================
---
layout: docs
title: Tailwind CSS Popover - Flowbite
description: 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
group: components
toc: true
requires_js: true

previous: Pagination
previousLink: components/pagination/

next: Progress bar
nextLink: components/progress/
---

Get started with the popover component to show any type of content inside a pop-up box when hovering or clicking over a trigger element. There are multiple examples that you can choose from, such as showing more information about a user profile, company profile, password strength, and more.

Make sure that you have the Flowbite JavaScript included in your project to enable the popover interactivity by following the }}">quickstart guide.

## Default popover

Initialize a new popover by adding the `data-popover-target="{elementId}"` data attribute to the trigger element where `elementId` is the id of the popover component.

{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}



{{< /example >}}

## User profile

Use this example to show more information about a user profile when hovering over the trigger component.

{{< example class="flex justify-center pt-60" github="components/popover.md" show_dark=true >}}



{{< /example >}}

## Company profile

This example can be used to show more information about a company profile.

{{< example class="flex justify-center pt-80" github="components/popover.md" disable_init_js=true show_dark=true >}}



{{< /example >}}

## Image popover

Use this example to trigger a popover component with detailed information and an image when hovering over a portion of highlighted text inspired by Wikipedia and other large news outlets.

{{< example class="flex justify-center pt-72" github="components/popover.md" show_dark=true >}}


Due to its central geographic location in Southern Europe, Italy has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy


{{< /example >}}

## Description popover

Show helpful information inside a popover when hovering over a question mark button.

{{< example class="pb-96" github="components/popover.md" show_dark=true >}}


This is just some informational text 


{{< /example >}}

## Progress popover

Show a progress bar with details inside a popover when hovering over a settings button.

{{< example class="flex justify-center pt-52" github="components/popover.md" show_dark=true >}}



{{< /example >}}

## Password strength

Dynamically show the password strength progress when creating a new password positioned relative to the input element.

{{< example github="components/popover.md" iframeHeight="480" show_dark=true >}}



    

        
        
    

    

        
        
        
    

    

        

        
        

        
    

    


{{< /example >}}

## Placement

Set the position of the popover component relative to the trigger element by using the `data-popover-placement="{top|right|bottom|left}"` data attribute and its values.

{{< example class="flex flex-wrap justify-center py-24 space-x-4" github="components/popover.md" show_dark=true >}}









{{< /example >}}

## Triggering

Manually set the trigger event by adding the `data-popover-trigger="{hover|click}"` data attribute to the trigger element choosing between a hover or click event. By default it is set to `hover`.

{{< example class="flex justify-center space-x-4 pt-32" github="components/popover.md" show_dark=true >}}







{{< /example >}}

## Offset

Increase or decrease the default offset by adding the `data-popover-offset="{offset}"` data attribute where the value is an integer.

{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}



{{< /example >}}

## Animation

Customize the animation of the popover component by using the utility classes from Tailwind CSS such as `transition-opacity` and `duration-{x}`.

{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}



{{< /example >}}

## Disable arrow

You can also disable the popover arrow by not including the `data-popper-arrow` element.

{{< example class="flex justify-center pt-32" github="components/popover.md" show_dark=true >}}



{{< /example >}}

## JavaScript behaviour

The Popover API from Flowbite can be used to create an object that will show a pop-up box relative to the main trigger element based on the parameters, options, and methods that you provide.

### Object parameters

Create a new Popover object with the object parameters like the trigger element, the popover content element, and extra options to set the placement and offset.



    

        
            

                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            

        
        
            

                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Set the popover component as the target element.
                
            

            

                
                    triggerEl
                
                
                    Element
                
                
                    Required
                
                
                    Set an element to trigger the popover when clicking or hovering (ie. a button, text).
                
            

            

                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the positioning of the popover element, trigger type, offset, and more.
                
            

            

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

        
    




### Options

Use the following options as the third parameter for the Popover object to set the positioning, offset, and the trigger type (hover or click).



    

        
            

                
                    Option
                
                
                    Type
                
                
                    Description
                
            

        
        
            

                
                    placement
                
                
                    String
                
                
                    Set the position of the popover element relative to the trigger element choosing from top|right|bottom|left.
                
            

            

                
                    triggerType
                
                
                    String
                
                
                    Set the event type that will trigger the popover content choosing between hover|click|none.
                
            

            

                
                    offset
                
                
                    Integer
                
                
                    Set the offset distance between the popover and the trigger element.
                
            

            

                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the popover is hidden.
                
            

            

                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the popover is shown.
                
            

            

                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the popover visibility has been toggled.
                
            

        
    




### Methods

Use the methods from the Popover object to programmatically show or hide the popover from directly JavaScript.



    

        
            

                
                    Method
                
                
                    Description
                
            

        
        
            

                
                    show()
                
                
                    Use this method on the Popover object to show the popover content.
                
            

            

                
                    hide()
                
                
                    Use this method on the Popover object to hide the popover content.
                
            

            

                
                    toggle()
                
                
                    Use this method on the Popover object to toggle the visibility of the popover content.
                
            

            

                
                    isVisible()
                
                
                    Use this function to check if the popover is visible or not.
                
            

            

                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function when the popover has been shown.
                
            

            

                
                    updateOnHide(callback)
                
                
                    Use this method to set a custom callback function when the popover has been hidden.
                
            

            

                
                    updateOnToggle(callback)
                
                
                    Use this method to set a custom callback function when the popover has been toggled.
                
            

        
    




### Example

Use following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Popover object.

First of all, set the target element as the popover itself and the trigger element which can be a button or text element.

After that you can also set the options object to change the placement and trigger type of the popover, alongside with the callback functions.

{{< code lang="javascript" file="popover.js" icon="file" >}}
// set the popover content element
const $targetEl = document.getElementById('popoverContent');

// set the element that trigger the popover using hover or click
const $triggerEl = document.getElementById('popoverButton');

// options with default values
const options = {
    placement: 'bottom',
    triggerType: 'hover',
    offset: 10,
    onHide: () => {
        console.log('popover is shown');
    },
    onShow: () => {
        console.log('popover is hidden');
    },
    onToggle: () => {
        console.log('popover is toggled');
    },
};

// instance options object
const instanceOptions = {
  id: 'popoverContent',
  override: true
};
{{< /code >}}

Create a new Popover object based on the options above.

{{< code lang="javascript" file="popover.js" icon="file" >}}
import { Popover } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 */
const popover = new Popover($targetEl, $triggerEl, options, instanceOptions);
{{< /code >}}

Use the `show` and `hide` methods on the Popover object to programmatically show and hide the popover element using JavaScript.

{{< code lang="javascript" file="popover.js" icon="file" >}}
// show the popover
popover.show();

// hide the popover
popover.hide();

// toggle the popover
popover.toggle();

// check if popover is visible
popover.isVisible();

// destroy popover object (removes event listeners and off-canvas Popper.js)
tooltip.destroy();

// re-initialize popover object
tooltip.init();
{{< /code >}}

### HTML Markup

Use the following HTML code for the JavaScript example above.

{{< code lang="html" file="popover.html" icon="file" >}}


{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="popover.ts" icon="file" >}}
import { Popover } from 'flowbite';
import type { PopoverOptions, PopoverInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the popover content element
const $targetEl: HTMLElement = document.getElementById('popoverContent');

// set the element that trigger the popover using hover or click
const $triggerEl: HTMLElement = document.getElementById('popoverButton');

// options with default values
const options: PopoverOptions = {
    placement: 'top',
    triggerType: 'hover',
    offset: 10,
    onHide: () => {
        console.log('popover is shown');
    },
    onShow: () => {
        console.log('popover is hidden');
    },
    onToggle: () => {
        console.log('popover is toggled');
    },
};

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

if ($targetEl) {
    /*
     * targetEl: required
     * triggerEl: required
     * options: optional
     * instanceOptions: optional
     */
    const popover: PopoverInterface = new Popover(
        $targetEl,
        $triggerEl,
        options,
        instanceOptions
    );

    popover.show();
}
{{< /code >}}


================================================
FILE: content/components/progress.md
================================================
---
layout: docs
title: Tailwind CSS Progress Bar - Flowbite
description: Use the progress bar component to show the completion rate of a data indicator or use it as a loader element
group: components
toc: true

previous: Popover
previousLink: components/popover/
next: Rating
nextLink: components/rating/
---

The progress bar component can be used as an indicator to show the completion rate of data sets or it can be used as an animated loader component. There are multiple sizes, colors, and styles available.

## Default progress bar

Use the following example of a progress bar element to show a completion rate of 45% by using an inline style and the utility classes from Tailwind CSS.

{{< example github="components/progress.md" show_dark=true >}}


  



{{< /example >}}

## Sizes

You can also use different sizes by using various sizing utility classes from Flowbite and Tailwind CSS.

{{< example class="space-y-4" github="components/progress.md" show_dark=true >}}

Small



  




Default



  




Large



  



{{< /example >}}

## With label inside

Here is an example of using a progress bar with the label inside the bar.

{{< example github="components/progress.md" show_dark=true >}}
  

    
 45%

  

{{< /example >}}

## With label outside

And this is an example of using a progress bar outside the bar.

{{< example github="components/progress.md" show_dark=true >}}


  Flowbite
  45%




  



{{< /example >}}

## Colors

You can also apply any color using the `bg-{color}` utility classes from Tailwind CSS and Flowbite.

{{< example class="space-y-4" github="components/progress.md" show_dark=true >}}

Dark



  




Brand



  




Success



  




Danger



  




Danger



  




{{< /example >}}


================================================
FILE: content/components/qr-code.md
================================================
---
layout: docs
title: Tailwind CSS QR Code Generator - Flowbite
description: 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
group: components
toc: true

previous: Typography
previousLink: components/typography/
next: Video
nextLink: components/video/
---



  

    
Generate QR codes from text or URLs.

    
    
    
    
  

    
    
    
    
    
    
    
    
  

  

  

    

      

    

    

      
      
    

  




QR 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.

Use this free QR code generator and customize the parameters to see the live preview.

The 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.

## Default QR code

Use this example as a simple QR code with SVG embedded directly in the HTML.

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


  


{{< /example >}}

## QR code with input

Use this example to show a QR code with SVG and a copy to clipboard input element below.

{{< example github="components/alerts.md" class="flex justify-center" show_dark=true javascript=`

window.addEventListener('load', function () {
    const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'npm-install-copy-button');
    const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-copy-npm-install-copy-button');

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

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

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

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

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

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


  

    
  


  

      

          
          
          
          
      

  



{{< /example >}}

## QR code with card

This example can be used to show a QR code inside a card element with a title and description.

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


    
        

          

            
          

        

    
    
        
Start listening instantly

    
    
Use your phone’s camera to scan the QR code and instantly open our app and explore trending tracks.

    
        What's a QR code?
    


{{< /example >}}

## Share profile with QR

Use this example to share profile information using a QR code with profile details.

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


    

      Rounded avatar
      Jese Leos
    

    
        

          
        

    
    
Share your QR code and make it easy for others to follow you.



{{< /example >}}

## Loading state

This example can be used to show a loading state right after the QR code was scanned with the camera.

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


  

    

        
        Loading...
    

  

  

    
  



{{< /example >}}

## Success state

Use this component to show a success state after the QR code was scanned and the data was processed.

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


  

    
    Scanned
  

  

    
  



{{< /example >}}

## Expired state

You can use this component to show that the QR code has expired and allow the user to refresh the code.

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


  

    
    QR code expired
    
  

  

    
  



{{< /example >}}

================================================
FILE: content/components/rating.md
================================================
---
layout: docs
title: Tailwind CSS Rating - Flowbite
description: Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes
group: components
toc: true

previous: Progress bar
previousLink: components/progress/
next: Sidebar
nextLink: components/sidebar/
---

Get started with the rating component to show an aggregate of reviews and scores in the forms of stars or numbers using the utility classes from Tailwind CSS and components from Flowbite.

You can find multiple examples on this page including different styles, sizes, and variants of the rating component and other associated elements such as a comment or card.

## Default rating

Use this simple example of a star rating component for showing review results.

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



    
    
    
    
    


{{< /example >}}

## Rating with text

If you also want to show a text near the stars you can use this example as a reference.

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



    

        
        
        
        
        
    

    
4.95 out of 5



{{< /example >}}

## Rating count

Aggregate more results by using this example to show the amount of reviews and the average score.

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



    
    
4.95

    
    73 reviews


{{< /example >}}

## Star sizes

Check out the different sizing options for the star review component from small, medium, and large.

{{< example class="flex flex-col items-center space-y-4" github="components/rating.md" show_dark=true >}}


    
    
    
    
    




    
    
    
    
    




    
    
    
    
    


{{< /example >}}

## Advanced rating

This advanced rating component can be used to also show how many reviews have been posted for each star rating (eg. 4% for the 2 star ratings, 17% for 4 star rating etc).

{{< example github="components/rating.md" show_dark=true >}}



    

        
        
        
        
        
    

    
4.95 out of 5




1,745 global ratings



    5 star
    

        

    

    70%




    4 star
    

        

    

    17%




    3 star
    

        

    

    8%




    2 star
    

        

    

    4%




    1 star
    

        

    

    1%


{{< /example >}}

## Score rating

This component can be used to break up a general rating score into multiple categories using progress bars.

{{< example github="components/rating.md" show_dark=true >}}



    
8.7

    
Excellent

    
    
376 reviews

    Read all reviews




    

        

            
Staff

            

                

                    

                

                8.8
            

        

        

            
Comfort

            

                

                    

                

                8.9
            

        

        

            
Free WiFi

            

                

                    

                

                8.8
            

        

        

            
Facilities

            

                

                    

                

                5.4
            

        

    

    

        

            
Value for money

            

                

                    

                

                8.9
            

        

        

            
Cleanliness

            

                

                    

                

                7.0
            

        

        

            
Location

            

                

                    

                

                8.9
            

        

    



{{< /example >}}

## Rating comment

Use this component to show a single rating comment and its score alongside other components such as the user profile avatar, name, post date, and more.

{{< example github="components/rating.md" show_dark=true >}}



    

        
        

            
Jese Leos 

        

    

    

        
        
        
        
        
        
Thinking to buy another one!

    

    
Reviewed in the United Kingdom on 

    
This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived yesterday and the first thing I did was set the time, popped on an identical strap from another Invicta and went in the shower with it to test the waterproofing.... No problems.

    
It is obviously not the same build quality as those very expensive watches. But that is like comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.

    Read more
    


{{< /example >}}

## Review content

Use this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.

{{< example github="components/rating.md" show_dark=true >}}



    

        

            
            

                
Jese Leos

                

                    
                    United States
                

            

        

        
    
            
  • 
                
                Apartament with city view
            
    • 
            
  • 
                
                3 nights December 2021
            
    • 
            
  • 
                
                Family
            
    • 
        

    

    

        

            

                

                    
Reviewed: 

                

                
Spotless, good appliances, excellent layout, host was genuinely nice and helpful.

            

            
8.7

        

        
The flat was spotless, very comfortable, and the host was amazing. I highly recommend this accommodation for anyone visiting New York city centre. It's quite a while since we are no longer using hotel facilities but self contained places. And the main reason is poor cleanliness and staff not being trained properly. This place exceeded our expectation and will return for sure.

        
It is obviously not the same build quality as those very expensive watches. But that is like comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.

        
    



{{< /example >}}


================================================
FILE: content/components/sidebar.md
================================================
---
layout: docs
title: Tailwind CSS Sidebar - Flowbite
description: 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
group: components
toc: true

previous: Rating
previousLink: components/rating/
next: Skeleton
nextLink: components/skeleton/
---

The sidebar component can be used as a complementary element relative to the navbar shown on either the left or right side of the page used for the navigation on your web application, including menu items, multi-level menu items, call to actions elements, and more.

## Default sidebar

Use this example to show a responsive list of menu items inside the sidebar with icons and labels.

{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="600" iframeMaxHeight="640" show_dark=true >}}






   

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

   



{{< /example >}}



  {{< requires_js >}}



## Multi-level menu

Use this sidebar example to create multi-level menu items by applying the `data-collapse-toggle="id"` data attribute from Flowbite and toggle the second-level menu item.

{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}






   

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

   



{{< /example >}}

## Content separator

Separate the content inside the sidebar component by applying a border separator between the two menus.

{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}






   

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

   



{{< /example >}}

## CTA button

Use this example to add a CTA button inside the sidebar component and encourage your users to visit the dedicated page.

{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}







   

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

   



{{< /example >}}

## Logo branding

Show the logo of your brand and link back to the homepage from the top part of the sidebar.

{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}






   

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

   



{{< /example >}}

## Sidebar with navbar

Use this example to show a navbar together with a sidebar layout for your web application.

{{< example github="components/sidebar.md" bodyClass="!p-0" iframeHeight="640" iframeMaxHeight="640" show_dark=true >}}







   

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

      

         

               
         

      

      

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

         

            

               
            

         

      

   



{{< /example >}}

## Off-canvas sidebar

Use this example to show the navigation as an off-canvas drawer component when clicking on an element.

{{< example github="components/sidebar.md" show_dark=true iframeHeight="640" iframeMaxHeight="640" skeletonPlaceholders=true >}}




   






  

      
         Flowbite Logo
         Flowbite
      
      
   

  

      
   



{{< /example >}}

## More examples

You can check out more [sidenav component](https://flowbite.com/blocks/application/sidenav/) examples and [application shell layouts](https://flowbite.com/blocks/application/shells/) from Flowbite Blocks.

## Dashboard Layout

These sidebar examples can be viewed in action and used by checking out the [Flowbite Admin Dashboard](https://github.com/themesberg/flowbite-admin-dashboard) template and use it as a solid starting point for you web application.


================================================
FILE: content/components/skeleton.md
================================================
---
layout: docs
title: Tailwind CSS Skeleton - Flowbite
description: 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
group: components
toc: true

previous: Sidebar
previousLink: components/sidebar/
next: Speed Dial
nextLink: components/speed-dial/
---

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

You can set the width and height of these skeleton components based on the size of the content and element that it is being loaded in, such as a card or an article page.

You can also animate the skeleton component by using the `.animate-pulse` utility class from Tailwind CSS.

## Default skeleton

Use this example to show a placeholder when loading text content.

{{< example github="components/skeleton.md" show_dark=true >}}


    

    

    

    

    

    

    Loading...



{{< /example >}}

## Image placeholder

This example can be used to show a placeholder when loading an image and text content.

{{< example github="components/skeleton.md" show_dark=true >}}


    

        
    

    

        

        

        

        

        

        

    

    Loading...



{{< /example >}}

## Video placeholder

Use this example to show a skeleton placeholder when loading video content.

{{< example github="components/skeleton.md" show_dark=true >}}



    
    Loading...


{{< /example >}}

## Text placeholder

Use this example to show a placeholder when loading longer pagraphs and headings.

{{< example github="components/skeleton.md" show_dark=true >}}


    

        

        

        

    

    

        

                

        

    

    

        

        

        

    

    

        

                

        

    

    

        

        

        

    

    

        

        

        

    

    Loading...


{{< /example >}}

## Card placeholder

Use this example to show a placeholder when loading content inside a card.

{{< example github="components/skeleton.md" show_dark=true >}}


    

        
        Loading...
    

    

    

    

    

    

        
        

            

            

        

    

    Loading...


{{< /example >}}

## Widget placeholder

This example can be used to show a placeholder of skeleton when fetching data for widgets and cards inside an application.

{{< example github="components/skeleton.md" show_dark=true >}}


    

    

    

        

        

        

        

        

        

        

    

    Loading...


{{< /example >}}

## List placeholder

Use this example to show a placeholder when loading a list of items.

{{< example github="components/skeleton.md" show_dark=true >}}


    

        

            

            

        

        

    

    

        

            

            

        

        

    

    

        

            

            

        

        

    

    

        

            

            

        

        

    

    

        

            

            

        

        

    

    Loading...


{{< /example >}}

## Testimonial placeholder

This example can be used to show a skeleton placeholder when loading data for a testimonial section.

{{< example github="components/skeleton.md" show_dark=true >}}


    

    

    

        
        

        

    

    Loading...


{{< /example >}}

## Accessibility

Use the `role="status"` attribute on the `
` wrapper element to notify Assistive Technologies when content is about to be updated and show the "Loading..." text inside a `` tag with the `.sr-only` class to make it visible only to screen readers.


================================================
FILE: content/components/speed-dial.md
================================================
---
layout: docs
title: Tailwind CSS Speed Dial - Flowbite
description: 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.
group: components
toc: true
requires_js: true

previous: Skeleton
previousLink: components/skeleton/

next: Spinner
nextLink: components/spinner/
---

Get started with the speed dial component to show a list of buttons or menu items positioned relative to the body in either corner as a quick way to allow certains actions to be made by your users.

This component can be easily customized by changing the colors, text, icons, sizes, alignment, and even positioning using our examples built with Tailwind CSS and making use of Flowbite's JavaScript API.

Make sure that you have the Flowbite JS file included in your application by following our }}">quickstart guide.

## Default speed dial

To initialize a speed dial component you need to wrap the trigger element and the list of items inside an element and use the `data-dial-init` data attribute on it.

Furthermore, make sure that the trigger button element has the `data-dial-toggle="{targetElementId}"` where the value is the ID of the target element.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    


{{< /example >}}

## Square speed dial

Use this example to make the trigger button's style square instead of a full circle using the `rounded-lg` utility class.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    


{{< /example >}}

## Text inside button

This example can be used to show the descriptive text inside the button instead of a tooltip.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    





    
    


{{< /example >}}

## Text outside button

Use this example to show the text of each button outside of the speed dial as an alternative style.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    





    
    


{{< /example >}}

## Dropdown menu

This example can be used to show a list of menu items instead of buttons when activating the speed dial.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    





    
    


{{< /example >}}

## Alternative menu

This example can be used to show an alternative style when showing a list of menu items.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    





    
    


{{< /example >}}

## Positioning

The positioning of the speed dial component relative to the body element can be easily done by using the positioning utility classes from Tailwind CSS.

### Top right

Use the `top-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the top right side of the document body.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    


{{< /example >}}

### Bottom right

Use the `bottom-{*}` and `right-{*}` utility classes to set the position of the speed dial component to the bottom right side of the document body.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
    


{{< /example >}}

### Bottom left

Use the `bottom-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the bottom left side of the document body.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
    


{{< /example >}}

### Top left

Use the `top-{*}` and `left-{*}` utility classes to set the position of the speed dial component to the top left side of the document body.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
    


{{< /example >}}

## Alignment

The alignment of the speed dial menu items and buttons can be set using the flexbox utility classes from Tailwind CSS.

### Vertical

The default alignment of the menu items of the speed dial is vertical using the `flex-col` utility class.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
    


{{< /example >}}

### Horizontal

Horizontally align the speed dial menu items by using the flexbox utility classes from Tailwind CSS.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    


{{< /example >}}

## Triggering

Use the `data-dial-trigger="{click|hover}"` data attributes on the trigger element inside of the speed dial component to set which type of action should activate the speed dial: click or hover.

### Hover

The default trigger type is hover for each speed dial component.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}


    
    


{{< /example >}}

### Click

If you want the speed dial component to activate when clicking instead of hovering over the trigger element then you need to set the `click` value inside of the `data-dial-toggle="click"` data attribute on the trigger element.

{{< example class="flex justify-center pt-24 h-80" github="components/speed-dial.md" show_dark=true >}}



    
    


{{< /example >}}

## JavaScript behaviour

The Speed Dial API from Flowbite can be used to create an object in JavaScript to set up the options, methods, and behaviour of a speed dial component manually.

### Object parameters

Create a new Speed Diual object with the object parameters like the trigger element, the target element, and the other options such as the trigger type.



    

        
            

                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            

        
        
            

                
                    parentEl
                
                
                    Element
                
                
                    Required
                
                
                    This is the parent and main wrapping element of the speed dial component.
                
            

            

                
                    triggerEl
                
                
                    Element
                
                
                    Required
                
                
                    Set a button as the trigger element for the speed dial.
                
            

            

                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    This is the element that is the list of menu items or buttons that will be toggled.
                
            

            

                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the trigger type and other options of the speed dial.
                
            

            

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

        
    




### Options

Use the following options as the third parameter for the Speed Dial object to set the trigger type (hover or click).



    

        
            

                
                    Option
                
                
                    Type
                
                
                    Description
                
            

        
        
            

                
                    triggerType
                
                
                    String
                
                
                    Set the event type that will trigger the speed dial choosing between hover|click|none.
                
            

            

                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the speed dial is hidden.
                
            

            

                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the speed dial is shown.
                
            

            

                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the speed dial is toggled.
                
            

        
    




### Methods

Use the methods from the Speed Dial object to programmatically show or hide the component from directly JavaScript.



    

        
            

                
                    Method
                
                
                    Description
                
            

        
        
            

                
                    show()
                
                
                    Use this method on the Speed Dial object to show the list of menu items or buttons.
                
            

            

                
                    hide()
                
                
                    Use this method on the Speed Dial object to hide the list of menu items or buttons.
                
            

            

                
                    toggle()
                
                
                    Use this method on the Speed Dial object to toggle the visibility of the list of menu items or buttons.
                
            

            

                
                    updateOnShow(callback)
                
                
                    Use this method to set a callback function when the dial has been shown.
                
            

            

                
                    updateOnHide(callback)
                
                
                    Use this method to set a callback function when the dial has been hidden.
                
            

            

                
                    updateOnToggle(callback)
                
                
                    Use this method to set a callback function when the dial visibility has been changed.
                
            

        
    




### Example

Use following JavaScript as an example to learn how to initialize, set the options, and use the methods for the Speed Dial object.

Three arguments are required for the Speed Dial component, namely the parent element, trigger element, and the target element.

Furthermore, you can also pass an object of options to set the trigger type and set the callback functions.

{{< code lang="javascript" file="speed-dial.js" icon="file" >}}
// parent element wrapping the speed dial
const $parentEl = document.getElementById('dialParent');

// the trigger element that can be clicked or hovered
const $triggerEl = document.getElementById('dialButton');

// the content wrapping element of menu items or buttons
const $targetEl = document.getElementById('dialContent');

// options with default values
const options = {
    triggerType: 'click',
    onHide: () => {
        console.log('speed dial is shown');
    },
    onShow: () => {
        console.log('speed dial is hidden');
    },
    onToggle: () => {
        console.log('speed dial is toggled');
    },
};

// instance options with default values
const instanceOptions = {
  id: 'dialContent',
  override: true
};
{{< /code >}}

Create a new Speed Dial object based on the options above.

{{< code lang="javascript" file="speed-dial.js" icon="file" >}}
import { Dial } from 'flowbite';

/*
 * $parentEl: required
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 * instanceOptions: optional
 */
const dial = new Dial($parentEl, $triggerEl, $targetEl, options, instanceOptions);
{{< /code >}}

Use the `show`, `hide`, or `toggle` methods on the Speed Dial object to programmatically show and hide the speed dial component using JavaScript.

{{< code lang="javascript" file="speed-dial.js" icon="file" >}}
// show the speed dial
dial.show();

// hide the speed dial
dial.hide();

// toggle the visibility of the speed dial
dial.toggle();
{{< /code >}}

### HTML Markup

Use the following HTML code for the JavaScript example above.

{{< code lang="html" file="speed-dial.html" icon="file" >}}


    
    


{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="speed-dial.ts" icon="file" >}}
import { Dial } from 'flowbite';
import type { DialOptions, DialInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// parent element wrapping the speed dial
const $parentEl: HTMLElement = document.getElementById('dialParent');

// the trigger element that can be clicked or hovered
const $triggerEl: HTMLElement = document.getElementById('dialButton');

// the content wrapping element of menu items or buttons
const $targetEl: HTMLElement = document.getElementById('dialContent');

// options with default values
const options: DialOptions = {
    triggerType: 'hover',
    onHide: () => {
        console.log('speed dial is shown');
    },
    onShow: () => {
        console.log('speed dial is hidden');
    },
    onToggle: () => {
        console.log('speed dial is toggled');
    },
};

// instance options with default values
const instanceOptions: InstanceOptions = {
  id: 'dialContent',
  override: true
};

/*
 * $parentEl: required
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 */
const dial: DialInterface = new Dial($parentEl, $triggerEl, $targetEl, options);

// show the speed dial
dial.show();
{{< /code >}}


================================================
FILE: content/components/spinner.md
================================================
---
layout: docs
title: Tailwind CSS Spinner - Flowbite
description: 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
group: components
toc: true

previous: Speed Dial
previousLink: components/speed-dial/
next: Stepper
nextLink: components/stepper/
---

The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.

## Default spinner

Use the following SVG element with the `animate-spin` animation class to show a loading animation:

{{< example github="components/spinner.md" show_dark=true >}}


    
    Loading...


{{< /example >}}

## Colors

You can change the colors of the spinner element using the fill and color utility classes from Tailwind CSS:

-   use `fill-{*}` to change the main colors
-   use `text-{*}` to change the background

{{< example github="components/spinner.md" class="flex items-center space-x-2 rtl:space-x-reverse" show_dark=true >}}


    
    Loading...




    
    Loading...




    
    Loading...




    
    Loading...




    
    Loading...




    
    Loading...




    
    Loading...


{{< /example >}}

## Sizes

Change the size of the spinner component using the `h-{*}` and `w-{*}` utility classes from Tailwind CSS:

{{< example github="components/spinner.md" class="flex items-center space-x-2 rtl:space-x-reverse" show_dark=true >}}



    
    Loading...




    
    Loading...




    
    Loading...




    
    Loading...


{{< /example >}}

## Alignment

Because the spinner component is an inline HTML element it can easily be aligned on the left, center, or right side using the `text-{left|center|right}` utility classes:

{{< example github="components/spinner.md" show_dark=true >}}



    

        
        Loading...
    





    

        
        Loading...
    





    

        
        Loading...
    



{{< /example >}}

## Spinner with card

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

{{< example github="components/spinner.md" show_dark=true >}}



    
Noteworthy technology acquisitions 2021

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

    

        
        Loading...
    



{{< /example >}}

## Progress spinner

Use this animated spinner component inside a list of steppers elements.

{{< example github="components/spinner.md" show_dark=true >}}


Converting your image:


    
    
  • 
        
        Upload your file to our website
    
    • 
    
  • 
        
        Choose your file format
    
    • 
    
  • 
        
    
            
            Loading...
        
    
        Preparing your file
    
    • 


{{< /example >}}

## Buttons

The spinner component can also be used inside elements such as buttons when submitting form data:

{{< example github="components/spinner.md" show_dark=true >}}



{{< /example >}}

## Accessibillity

Use the `aria-hidden="true"` attribute to hide the SVG spinner icon from the accessibility API and screen readers while showing a loading text element visible only to screen readers using the `.sr-only` class.

The `role="status"` attribute on the main `
` wrapper is used to indicate a status message to assistive technologies such as screen readers.


================================================
FILE: content/components/stepper.md
================================================
---
layout: docs
title: Tailwind CSS Stepper - Flowbite
description: Use the stepper component to show the number of steps required to complete a form inside your application based on Tailwind CSS
group: components
toc: true

previous: Spinner
previousLink: components/spinner/
next: Tables
nextLink: components/tables/
---

The stepper component can be used to show a numbered list of steps next to a form component to indicate the progress and number of steps that are required to complete and submit the form data.

There are multiple examples that you can use including horizontal or vertical aligned stepper components, different sizes, styles, and showing icons or numbers all coded with the utility classes from Tailwind CSS.

## Default stepper

Use this example to show a list of form steps with a number and title of the step in a horizontal alignment.

{{< example github="components/stepper.md" show_dark=true >}}


    
    
  1. 
        
            
            Personal 
        
    
    2. 
    
  2. 
        
            2
            Account 
        
    
    3. 
    
  3. 
        3
        Confirmation
    
    4. 


{{< /example >}}

## Progress stepper

This example can be used to show the progress of the stepper component based only on icons and showing a checkmark when the step has been finished.

{{< example github="components/stepper.md" show_dark=true >}}


    
    
  1. 
        
            
        
    
    2. 
    
  2. 
        
            
        
    
    3. 
    
  3. 
        
            
        
    
    4. 


{{< /example >}}

## Detailed stepper

Use this example to show an extra subtitle next to the number and the title of the steppper component based on an ordered list element.

{{< example github="components/stepper.md" show_dark=true >}}

    
    
  1. 
        
            
        
        
            
    User info
    
            
    Step details here
    
            
    
    2. 
    
  2. 
        
            
        
        
            
    Company info
    
            
    Step details here
    
            
    
    3. 
    
  3. 
        
            
        
        
            
    Payment info
    
            
    Step details here
    
            
    
    4. 



{{< /example >}}

## Vertical stepper

This example can be used to show a list of steps aligned vertically where you can indicate the completed, currently active, and the unexplored steps.

{{< example github="components/stepper.md" show_dark=true >}}

    
    
  1. 
        
    
    2. 
    
  2. 
        
    
    3. 
    
  3. 
        
    
    4. 
    
  4. 
        
    
    5. 
    
  5. 
        
    
    6. 


{{< /example >}}

## Breadcrumb stepper

This example can be used to show the number of steps similar to how a breadcrumb component looks like by using double chevron icons between the items.

{{< example github="components/stepper.md" show_dark=true >}}

    
    
  1. 
        
            1
        
        Personal 
        
    
    2. 
    
  2. 
        
            2
        
        Account 
        
    
    3. 
    
  3. 
        
            3
        
        Review
    
    4. 



{{< /example >}}

## Timeline stepper

Use this example to show the number of steps inside a timeline component using icons, title, and subtitle for each step.

{{< example github="components/stepper.md" class="p-4" show_dark=true >}}


                      
    
  1.             
        
            
        
        
    Personal Info
    
        
    Step details here
    
    
    2. 
    
  2. 
        
            
        
        
    Account Info
    
        
    Step details here
    
    
    3. 
    
  3. 
        
            
        
        
    Review
    
        
    Step details here
    
    
    4. 
    
  4. 
        
            
        
        
    Confirmation
    
        
    Step details here
    
    
    5. 


{{< /example >}}

## Stepper with form

Use this example to show the stepper component next to a form layout and change the content based on which currently step your are completing.

{{< example github="components/stepper.md" show_dark=true >}}


    
    
  1. 
        
            
        
    
    2. 
    
  2. 
        
            
        
    
    3. 
    
  3. 
        
            
        
    
    4. 





    
Sign In details

  

    
    
  

  

    
    
  

  

    

      
    

    
  

  



{{< /example >}}


================================================
FILE: content/components/tables.md
================================================
---
layout: docs
title: Tailwind CSS Table - Flowbite
description: 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
group: components
toc: true

previous: Stepper
previousLink: components/stepper/
next: Tabs
nextLink: components/tabs/
---

The table component represents a set of structured elements made up of rows and columns as table cells that can be used to show data sets to your website users.

Get started with multiple variants and styles of these table components built with the utility classes from Tailwind CSS and components from Flowbite.

## Default table

Use the following example of a responsive table component to show multiple rows and columns of text data.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Stock
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    231
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    423
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    121
                
            

        
    



{{< /example >}}

## Highlight

Accentuate certain elements inside the table such as the rows, columns or data cells based on your needs.

### Striped rows

Use this example to increase the readability of the data sets by alternating the background color of every second table row.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            

            

                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            

        
    



{{< /example >}}

### Striped columns

Use this example to increase the readability of the table cells by alternating the background color of every second table column.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
            

            

                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
            

            

                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
            

        
    



{{< /example >}}

### Hover state

Use the `hover:{bg-*}` utility class from Tailwind CSS to change the background color of a data row when hovering over the element with the cursor.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Edit
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

        
    



{{< /example >}}

## Table layout

Use the following examples of table layouts to show the head, foot or caption of the table.

### Table head (sortable)

This example can be used to show the head of the table component with sortable icons.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    

                        Color
                        
                            
                        
                    

                		
                
                    

                        Category
                        
                            
                        
                    

                		
                
                    

                        Price
                        
                            
                        
                    

                		
                
                    Edit
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

        
    



{{< /example >}}

### Table foot

Use this example where the `` HTML element can be used in conjunction with the head and caption of the table component.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Qty
                
                
                    Price
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    1
                
                
                    $2999
                
            

            

                
                    Microsoft Surface Pro
                
                
                    1
                
                
                    $1999
                
            

            

                
                    Magic Mouse 2
                
                
                   1
                
                
                    $99
                
            

        
        
            

                Total
                3
                21,000
            

        
    



{{< /example >}}

### Table caption

Improve accessibility by using a caption inside the table as a heading to better describe what the table is about for screen readers.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            Our products
            
Browse a list of Flowbite products designed to help you work and play, stay organized, get answers, keep in touch, grow your business, and more.

        
        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Edit
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

        
    



{{< /example >}}

## Table styles

Get started with the following table styles and choose the one that best fits your application.

### Without border

Use this example of a table component without any border between the table cells.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
            

        
    



{{< /example >}}

### Table with shadow

Use this example to apply a shadow-sm border to the table component.

{{< example github="components/tables.md" class="pb-4 overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

        
    



{{< /example >}}

## Overflow scrolling

Use this example where we apply `overflow-x-auto` to enable horizontal scrolling if the content inside the table overflows that maximum width.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    

                        
                        
                    

                		
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Accessories
                
                
                    Available
                
                
                    Price
                
                
                    Weight
                
                
                    Action
                
            

        
        
            

                
                    

                        
                        
                    

                		
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    Yes
                
                
                    Yes
                
                
                    $2999
                
                
                    3.0 lb.
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    No
                
                
                    Yes
                
                
                    $1999
                
                
                    1.0 lb.
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    Yes
                
                
                    No
                
                
                    $99
                
                
                    0.2 lb.
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple Watch
                
                
                    Black
                
                
                    Watches
                
                
                    Yes
                
                
                    No
                
                
                    $199
                
                
                    0.12 lb.
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple iMac
                
                
                    Silver
                
                
                    PC
                
                
                    Yes
                
                
                    Yes
                
                
                    $2999
                
                
                    7.0 lb.
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple AirPods
                
                
                    White
                
                
                    Accessories
                
                
                    No
                
                
                    Yes
                
                
                    $399
                
                
                    38 g
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    iPad Pro
                
                
                    Gold
                
                
                    Tablet
                
                
                    No
                
                
                    Yes
                
                
                    $699
                
                
                    1.3 lb.
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    Magic Keyboard
                
                
                    Black
                
                
                    Accessories
                
                
                    Yes
                
                
                    Yes
                
                
                    $99
                
                
                    453 g
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple TV 4K
                
                
                    Black
                
                
                    TV
                
                
                    Yes
                
                
                    No
                
                
                    $179
                
                
                    1.78 lb.
                
                
                    Edit
                    Remove
                
            

            

                
                    

                        
                        
                    

                		
                
                    AirTag
                
                
                    Silver
                
                
                    Accessories
                
                
                    Yes
                
                
                    No
                
                
                    $29
                
                
                    53 g
                
                
                    Edit
                    Remove
                
            

        
    



{{< /example >}}

## Table search

Use this example to show a search bar that can be used to query through data inside the table component.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
        

            

                
            

            
        

    

    

        
            

                
                    

                        
                        
                    

                		
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    

                        
                        
                    

                		
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple Watch
                
                
                    Silver
                
                
                    Accessories
                
                
                    $179
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    iPad
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            

            

                
                     

                        
                        
                    

                		
                
                    Apple iMac 27"
                
                
                    Silver
                
                
                    PC Desktop
                
                
                    $3999
                
                
                    Edit
                
            

        
    



{{< /example >}}



  {{< requires_js >}}



## Table filter

Use this example with a filter bar to select certain data sets inside the table based on the options that you've selected.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
        

            

                
            

            
        

        
        
        
    

    

        
            

                
                    

                        
                        
                    

                		
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    

                        
                        
                    

                		
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple Watch
                
                
                    Silver
                
                
                    Accessories
                
                
                    $179
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    iPad
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple iMac 27"
                
                
                    Silver
                
                
                    PC Desktop
                
                
                    $3999
                
                
                    Edit
                
            

        
    



{{< /example >}}

## Table pagination

Paginate the table data when using larger data sets based on any given amount of results per page.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    

                        
                        
                    

                		
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    

                        
                        
                    

                		
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple Watch
                
                
                    Black
                
                
                    Watches
                
                
                    $199
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple iMac
                
                
                    Silver
                
                
                    PC
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple AirPods
                
                
                    White
                
                
                    Accessories
                
                
                    $399
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    iPad Pro
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Magic Keyboard
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Smart Folio iPad Air
                
                
                    Blue
                
                
                    Accessories
                
                
                    $79
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    AirTag
                
                
                    Silver
                
                
                    Accessories
                
                
                    $29
                
                
                    Edit
                
            

        
    

    


{{< /example >}}

## Checkbox selection

Checkboxes can be used inside table data rows to select multiple data sets and apply a bulk action.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    

                        
                        
                    

                		
                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    

                        
                        
                    

                		
                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple Watch
                
                
                    Silver
                
                
                    Accessories
                
                
                    $179
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    iPad
                
                
                    Gold
                
                
                    Tablet
                
                
                    $699
                
                
                    Edit
                
            

            

                
                    

                        
                        
                    

                		
                
                    Apple iMac 27"
                
                
                    Silver
                
                
                    PC Desktop
                
                
                    $3999
                
                
                    Edit
                
            

        
    



{{< /example >}}



  {{< requires_js >}}



## Table with users

Use this example of a table where we show a data set of users and showing a profile picture, name, email, online status, and more.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
        
        

            

                
            

            
        

    

    

        
            

                
                    

                        
                        
                    

                		
                
                    Name
                
                
                    Position
                
                
                    Status
                
                
                    Action
                
            

        
        
            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Neil Sims

                        
neil.sims@flowbite.com

                    
  
                		
                
                    React Developer
                
                
                    

                        
 Online
                    

                		
                
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Bonnie Green

                        
bonnie@flowbite.com

                    

                		
                
                    Designer
                
                
                    

                        
 Online
                    

                		
                
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Jese Leos

                        
jese@flowbite.com

                    

                		
                
                    Vue JS Developer
                
                
                    

                        
 Online
                    

                		
                
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Thomas Lean

                        
thames@flowbite.com

                    

                		
                
                    UI/UX Engineer
                
                
                    

                        
 Online
                    

                		
                
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Leslie Livingston

                        
leslie@flowbite.com

                    

                		
                
                    SEO Specialist
                
                
                    

                        
 Offline
                    

                		
                
                    Edit user
                
            

        
    



{{< /example >}}

## Table with products

Get started with this example to show a list of products inside the table and show a preview image, product name, quantity selector, price and actions tab.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Image
                
                
                    Product
                
                
                    Qty
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    Apple Watch
                
                
                    Apple Watch
                
                
                    

                        
                        

                            
                            
                            
                        

                    

                		
                
                    $599
                
                
                    Remove
                
            

            

                
                    Apple iMac
                
                
                    iMac 27"
                
                
                    

                        
                        

                            
                            
                            
                        

                    

                		
                
                    $2499
                
                
                    Remove
                
            

            

                
                    iPhone 12
                
                
                    IPhone 12 
                
                
                    

                        
                        

                            
                            
                            
                        

                    

                		
                
                    $999
                
                
                    Remove
                
            

        
    



{{< /example >}}



  {{< requires_js >}}



## Table with modal

Use this example to show a modal with a form where you can edit table data by clicking on one of the rows.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true iframeHeight="640" >}}


    

        
        
        

            

                
            

            
        

    

    

        
            

                
                    

                        
                        
                    

                		
                
                    Name
                
                
                    Position
                
                
                    Status
                
                
                    Action
                
            

        
        
            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Neil Sims

                        
neil.sims@flowbite.com

                    
  
                		
                
                    React Developer
                
                
                    

                        
 Online
                    

                		
                
                    
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Bonnie Green

                        
bonnie@flowbite.com

                    

                		
                
                    Designer
                
                
                    

                        
 Online
                    

                		
                
                    
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Jese Leos

                        
jese@flowbite.com

                    

                		
                
                    Vue JS Developer
                
                
                    

                        
 Online
                    

                		
                
                    
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Thomas Lean

                        
thomas@flowbite.com

                    

                		
                
                    UI/UX Engineer
                
                
                    

                        
 Online
                    

                		
                
                    
                    Edit user
                
            

            

                
                    

                        
                        
                    

                		
                
                    Jese image
                    

                        
Leslie Livingston

                        
leslie@flowbite.com

                    

                		
                
                    SEO Specialist
                
                
                    

                        
 Offline
                    

                		
                
                    
                    Edit user
                
            

        
    

    
 


{{< /example >}}

## Table colors

Apply any color to the table element by using the `bg-{color}` and `text-{color}` color class variants from Tailwind CSS.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            

            

                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            

        
    



{{< /example >}}

### Striped rows color

Use this example to apply a different color to every second row inside the table.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            

            

                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            

        
    



{{< /example >}}

### Striped columns color

Use this example to apply a different color to every second column inside a colored table.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            

            

                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            

        
    



{{< /example >}}

### Hover state

Use this example to apply a different color to every second row inside the table with a colored background.

{{< example github="components/tables.md" class="overflow-hidden" show_dark=true >}}



    

        
            

                
                    Product name
                
                
                    Color
                
                
                    Category
                
                
                    Price
                
                
                    Action
                
            

        
        
            

                
                    Apple MacBook Pro 17"
                
                
                    Silver
                
                
                    Laptop
                
                
                    $2999
                
                
                    Edit
                
            

            

                
                    Microsoft Surface Pro
                
                
                    White
                
                
                    Laptop PC
                
                
                    $1999
                
                
                    Edit
                
            

            

                
                    Magic Mouse 2
                
                
                    Black
                
                
                    Accessories
                
                
                    $99
                
                
                    Edit
                
            

            

                
                    Google Pixel Phone
                
                
                    Gray
                
                
                    Phone
                
                
                    $799
                
                
                    Edit
                
            

            

                
                    Apple Watch 5
                
                
                    Red
                
                
                    Wearables
                
                
                    $999
                
                
                    Edit
                
            

        
    



{{< /example >}}

## More examples

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

-   [Advanced tables](https://flowbite.com/blocks/application/advanced-tables/)
-   [Table headers](https://flowbite.com/blocks/application/table-headers/)
-   [Table footers](https://flowbite.com/blocks/application/table-footers/)
-   [Pricing tables](https://flowbite.com/blocks/marketing/pricing/)


================================================
FILE: content/components/tabs.md
================================================
---
layout: docs
title: Tailwind CSS Tabs - Flowbite
description: Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
group: components
toc: true

previous: Tables
previousLink: components/tables/
next: Timeline
nextLink: components/timeline/
---

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

## Default tabs

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

{{< example github="components/tabs.md" show_dark=true >}}


{{< /example >}}

## Tabs with underline

Use this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.

{{< example github="components/tabs.md" show_dark=true >}}



    


{{< /example >}}

## Tabs with icons

This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs.

{{< example github="components/tabs.md" show_dark=true >}}



    


{{< /example >}}

## Pills tabs

If you want to use pills as a style for the tabs component you can do so by using this example.

{{< example github="components/tabs.md" show_dark=true >}}


{{< /example >}}

## Vertical tabs

Use this example to show a vertically aligned set of tabs on the left side of the page.

{{< example github="components/tabs.md" show_dark=true >}}



    
    

        
Profile Tab

        
This is some placeholder content the Profile tab's associated content, clicking another tab will toggle the visibility of this one for the next.

        
The tab JavaScript swaps classes to control the content visibility and styling.
 
    




{{< /example >}}


## Full width tabs

If you want to show the tabs on the full width relative to the parent element you can do so by using the full width tabs component example.

{{< example github="components/tabs.md" show_dark=true >}}



    
    



{{< /example >}}

## Tabs with icons

This example can be used to show a list of tabs with icons from our [SVG icons](https://flowbite.com/icons/).

{{< example github="components/tabs.md" show_dark=true >}}



    
    



{{< /example >}}



  {{< requires_js >}}



## Interactive tabs

Use the dynamic tabs component to interactively show and hide the content below the tabs based on the currently active tab item. Make sure that you initialize the component by using the `data-tabs-toggle="{parentTabContentSelector}"` and also apply an `id` attribute to the same element.

Each tab toggle button requires a `role="tab"` attribute and a `data-tabs-target="{tabContentSelector}"` to target the tab content element that will be shown when clicked.

Use the `aria-selected="true"` data attribute so that Flowbite can target the currently active tab component and hide it when another is shown. If not set, it will show the first tab as active.

Apply the `role="tabpanel"` data attribute to every tab content element and set the `id` attribute which will be equal to the `data-tabs-target={tabContentSelector}` from the tabs toggles.

You can use multiple tab components on a single page but make sure that the id's are different.

{{< example github="components/tabs.md" show_dark=true >}}



    
    
        
        
        
        
  • 
            
        
    • 
    





    
    
    
    


{{< /example >}}

## Active tab style

Use the `data-tabs-active-classes` and the `data-tabs-inactive-classes` to set the active and inactive tab Tailwind CSS classes. In this example we set the active classes to the purple color instead of blue.

{{< example github="components/tabs.md" show_dark=true >}}



    
    
        
        
        
        
  • 
            
        
    • 
    





    
    
    
    


{{< /example >}}

## JavaScript behaviour

The **Tabs** class from Flowbite can be used to create an object that will enable the interactive navigation between tabs and its content based on the parameters, options, methods, and callback functions that you apply.

### Object parameters

Create a new Tabs object with parameters such as an array of the tab and content elements.



    

        
            

                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            

        
        
            

                
                    tabsElement
                
                
                    Element
                
                
                    Required
                
                
                    Parent HTML element of the tabs component.
                
            

            

                
                    items
                
                
                    Array
                
                
                    Required
                
                
                    Array of the tab objects including the id, trigger element, and the content element.
                
            

            

                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    An object of options for the appearances of the tabs and to use callback functions.
                
            

            

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

        
    




### Options

Use the following options as the second parameter for the Tabs object to set the appearance of the active tab elements and use callback functions.



    

        
            

                
                    Option
                
                
                    Type
                
                
                    Description
                
            

        
        
            

                
                    defaultTabId
                
                
                    String
                
                
                    Set the currently active tab element based on the ID.
                
            

            

                
                    activeClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS class names to apply to the active tab element.
                
            

            

                
                    inactiveClasses
                
                
                    String
                
                
                    Set a string of Tailwind CSS class names to apply to the inactive tab elements.
                
            

            

                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the a new tab has been shown.
                
            

        
    




### Methods

Use the methods from the Tabs object to programmatically change the current active tab using JavaScript.



    

        
            

                
                    Method
                
                
                    Description
                
            

        
        
            

                
                    show(id)
                
                
                    Use the show function on the Tab object to change the current active tab element.
                
            

            

                
                    getTab(id)
                
                
                    Return the tab element based on the ID.
                
            

            

                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function whenever a tab has been shown.
                
            

        
    




### Example

Check out the following example to learn how to initialize and manipulate a Tabs object in JavaScript.

First of all, create an array of objects that contains the id, trigger element, and content element of each tab, set the active tab based on the id, and optionally set a callback function after a new tab has been shown.

{{< code lang="javascript" file="tabs.js" icon="file" >}}
const tabsElement = document.getElementById('tabs-example');

// create an array of objects with the id, trigger element (eg. button), and the content element
const tabElements = [
    {
        id: 'profile',
        triggerEl: document.querySelector('#profile-tab-example'),
        targetEl: document.querySelector('#profile-example'),
    },
    {
        id: 'dashboard',
        triggerEl: document.querySelector('#dashboard-tab-example'),
        targetEl: document.querySelector('#dashboard-example'),
    },
    {
        id: 'settings',
        triggerEl: document.querySelector('#settings-tab-example'),
        targetEl: document.querySelector('#settings-example'),
    },
    {
        id: 'contacts',
        triggerEl: document.querySelector('#contacts-tab-example'),
        targetEl: document.querySelector('#contacts-example'),
    },
];

// options with default values
const options = {
    defaultTabId: 'settings',
    activeClasses:
        'text-fg-brand hover:text-fg-brand border-brand',
    inactiveClasses:
        'text-body hover:text-fg-brand border-base hover:border-brand',
    onShow: () => {
        console.log('tab is shown');
    },
};

// instance options with default values
const instanceOptions = {
  id: 'tabs-example',
  override: true
};
{{< /code >}}

Create a new Tabs object based on the parameters we've previously set.

{{< code lang="javascript" file="tabs.js" icon="file" >}}
import { Tabs } from 'flowbite';

/*
* tabsElement: parent element of the tabs component (required)
* tabElements: array of tab objects (required)
* options (optional)
* instanceOptions (optional)
*/
const tabs = new Tabs(tabsElement, tabElements, options, instanceOptions);
{{< /code >}}

Lastly, you can now use the methods on the Tabs object to show another tab element, get a tab element based on the id, or get the current active tab element.

{{< code lang="javascript" file="tabs.js" icon="file" >}}
// shows another tab element
tabs.show('dashboard');

// get the tab object based on ID
tabs.getTab('contacts');

// get the current active tab object
tabs.getActiveTab();
{{< /code >}}

### HTML Markup

You can use this HTML code as an example for the JavaScript code from above.

{{< code lang="html" file="tabs.html" icon="file" >}}


    
    
        
        
        
        
  • 
            
        
    • 
    





    
    
    
    


{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="tabs.ts" icon="file" >}}
import { Tabs } from 'flowbite';
import type { TabsOptions, TabsInterface, TabItem } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

const tabsElement: HTMLElement = document.getElementById('tabs-example');

// create an array of objects with the id, trigger element (eg. button), and the content element
const tabElements: TabItem[] = [
    {
        id: 'profile',
        triggerEl: document.querySelector('#profile-tab-example'),
        targetEl: document.querySelector('#profile-example'),
    },
    {
        id: 'dashboard',
        triggerEl: document.querySelector('#dashboard-tab-example'),
        targetEl: document.querySelector('#dashboard-example'),
    },
    {
        id: 'settings',
        triggerEl: document.querySelector('#settings-tab-example'),
        targetEl: document.querySelector('#settings-example'),
    },
    {
        id: 'contacts',
        triggerEl: document.querySelector('#contacts-tab-example'),
        targetEl: document.querySelector('#contacts-example'),
    },
];

// options with default values
const options: TabsOptions = {
    defaultTabId: 'settings',
    activeClasses:
        'text-fg-brand hover:text-fg-brand border-brand',
    inactiveClasses:
        'text-body hover:text-fg-brand border-base hover:border-brand',
    onShow: () => {
        console.log('tab is shown');
    },
};

// instance options with default values
const instanceOptions: InstanceOptions = {
  id: 'tabs-example',
  override: true
};

/*
* tabsElement: parent element of the tabs component (required)
* tabElements: array of tab elements (required)
* options (optional)
* instanceOptions (optional)
*/
const tabs: TabsInterface = new Tabs(tabsElement, tabElements, options, instanceOptions);

// open tab item based on id
tabs.show('contacts');
{{< /code >}}


================================================
FILE: content/components/timeline.md
================================================
---
layout: docs
title: Tailwind CSS Timeline - Flowbite
description: Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants
group: components
toc: true

previous: Tabs
previousLink: components/tabs/
next: Toast
nextLink: components/toast/
---

The timeline component can be used to show series of data in a chronological order for use cases such as activity feeds, user actions, application updates, and more. Get started with multiple vertical timeline styles built with the utility classes from Tailwind CSS and Flowbite.

## Default timeline

Use this responsive Tailwind CSS timeline component to show a series of data entries with a date, title, and description with a vertical line with dots on the left or right side of the wrapper element.

Optionally, you can also add a CTA button to any of the timeline elements.

{{< example github="components/timeline.md" show_dark=true >}}

                      
    
  1. 
        
    
        
        
    Application UI code in Tailwind CSS
    
        
    Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
    
        
            Learn more
            
        
    
    2. 
    
  2. 
        
    
        
        
    Marketing UI design in Figma
    
        
    All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.
    
    
    3. 
    
  3. 
        
    
        
        
    E-Commerce UI code in Tailwind CSS
    
        
    Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
    
    
    4. 



{{< /example >}}

## Vertical timeline

Use this vertical timeline component with icons and badges to show a more advanced set of data.

{{< example github="components/timeline.md" show_dark=true >}}

                      
    
  1.             
        
            
        
        
        
    Flowbite Application UI v2.0.0 Latest
    
        
    Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.
    
        
            
            Download ZIP
        
    
    2. 
    
  2. 
        
            
        
        
        
    Flowbite Figma v1.3.0
    
        
    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.
    
    
    3. 
    
  3. 
        
            
        
        
        
    Flowbite Library v1.2.2
    
        
    Get started with dozens of web components and interactive elements built on top of Tailwind CSS.
    
    
    4. 



{{< /example >}}

## Stepper timeline

Use this horizontally aligned timeline component to show a series of data in a chronological order.

{{< example github="components/timeline.md" show_dark=true >}}

    
    
  1. 
        
    
            
    
                
            
    
            
        
    
        
    
            
            
    Flowbite Library v1.0.0
    
            
    Get started with dozens of web components and interactive elements.
    
            
        
    
    
    2. 
    
  2. 
        
    
            
    
                
            
    
            
        
    
        
    
            
            
    Flowbite Library v1.2.0
    
            
    Get started with dozens of web components and interactive elements.
    
            
        
    
    
    3. 
    
  3. 
        
    
            
    
                
            
    
            
        
    
        
    
            
            
    Flowbite Library v1.3.0
    
            
    Get started with dozens of web components and interactive elements.
    
            
        
    
    
    4. 



{{< /example >}}

## Activity log

This component can be used to show the timline of a user's activity history inside your application by using an avatar, datetime, description, and links to specific pages.

{{< example github="components/timeline.md" show_dark=true >}}

                      
    
  1.             
        
            Bonnie image
        
        
    
            
            
    Bonnie Green moved Jese Leos to Funny Group
    
        
    
    
    2. 
    
  2. 
        
            Thomas Lean image
        
        
    
            
    
                
                
    Thomas Lean commented on Flowbite Pro
    
            
    
            
    Hi ya'll! I wanted to share a webinar zeroheight is having regarding how to best measure your design system! This is the second session of our new webinar series on #DesignSystems discussions where we'll be speaking about Measurement.
    
            
    
                 
                              
            
    
        
    
    
    3. 
    
  3. 
        
            Jese Leos image
        
        
    
            
            
    Bonnie Green moved Jese Leos to Funny Group
    
        
    
    
    4. 



{{< /example >}}

## Grouped timeline

Use this component to group multiple data entries inside a single date and show elements like the avatar, title, description, tag and link to a relevant page.

{{< example github="components/timeline.md" show_dark=true >}}


    
    
    
        
  1. 
            
                Laura Romeros image
                
    
                    
    Laura Romeros likes Bonnie Green's post in  How to start with Flowbite library
    
                    
    "I wanted to share a webinar zeroheight."
    
                    
                        
                        Private
                    
                
    
                
        
    2. 
        
  2. 
            
                Mike Willi image
                
    
                    
    Mike Willi react to Thomas Lean's comment
    
                    
                        
                        Public
                    
                
    
                
        
    3. 
        
  3. 
            
                Jese Leos image
                
    
                    
    Jese Leos likes Bonnie Green's post in  How to start with Flowbite library
    
                    
    "I wanted to share a webinar zeroheight."
    
                    
                        
                        Public
                    
                
    
                
        
    4. 
        
  4. 
            
                Bonnie Green image
                
    
                    
    Bonnie Green likes Bonnie Green's post in  Top figma designs
    
                    
    "I wanted to share a webinar zeroheight."
    
                    
                        
                        Public
                     
                
    
                
        
    5. 
    





    
    
    
        
  1. 
            
                Laura Romeros image
                
    
                    
    Laura Romeros likes Bonnie Green's post in  How to start with Flowbite library
    
                    
    "I wanted to share a webinar zeroheight."
    
                    
                        
                        Private
                    
                
    
                
        
    2. 
        
  2. 
            
                Mike Willi image
                
    
                    
    Mike Willi react to Thomas Lean's comment
    
                    
                        
                        Public
                    
                
    
                
        
    3. 
        
  3. 
            
                Jese Leos image
                
    
                    
    Jese Leos likes Bonnie Green's post in  How to start with Flowbite library
    
                    
    "I wanted to share a webinar zeroheight."
    
                    
                        
                        Public
                    
                
    
                
        
    4. 
        
  4. 
            
                Bonnie Green image
                
    
                    
    Bonnie Green likes Bonnie Green's post in  Top figma designs
    
                    
    "I wanted to share a webinar zeroheight."
    
                    
                        
                        Public
                     
                
    
                
        
    5. 
    



{{< /example >}}


================================================
FILE: content/components/toast.md
================================================
---
layout: docs
title: Tailwind CSS Toast - Flowbite
description: Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions
group: components
requires_js: true
toc: true

previous: Timeline
previousLink: components/timeline/
next: Tooltips
nextLink: components/tooltips/
---

The toast component can be used to enhance your website's interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component by using the `data-dismiss-target` data attribute from Flowbite.

## Default toast

Use this simple toast component with an icon, message, and dismissible close button to show alert messages to your website visitors. Make sure that you set the correct id for the `data-dismiss-target` data attribute to enable the dismissible feature.

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



{{< /example >}}

## Colors

Use these contextual toast components to show success, danger, or warning alert messages to your users.

{{< example class="flex flex-col items-center space-y-4" github="components/toast.md" show_dark=true >}}





{{< /example >}}

## Simple toast

This component can be used to show simple messages and notifications without the use of a close button.

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


{{< /example >}}

## Undo button

Use this toast component to also show an "undo" button to reverse the action of the user.

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



{{< /example >}}

## Toast message

This component can be used to show messages and a CTA button when receiving chat messages, comment notifications, and other use cases.

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


{{< /example >}}

## Push notification

This component can be used to show notifications for an action from another user such as posting a comment, receiving a like, being tagged. You can show an avatar, icon, message, and the time of the notification.

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



{{< /example >}}

## Interactive toast

Use this interactive toast component to encourage users to make a certain action such as updating to the latest software version. You can set an icon, message, and two CTA buttons.

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



{{< /example >}}

## Toast illustration

This example can be used to show a notification as a toast component with an illustration.

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



{{< /example >}}

## Toast progress bar

Use this example to show a toast component that is dismissble with a progress bar.

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



{{< /example >}}

## Toast danger alert

Use this example to show an alert to your users inside a toast component with a description.

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



{{< /example >}}

## Toast warning alert

This example can be used to warn users before they perform a certain action inside a toast component.

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



{{< /example >}}

## Positioning

Use the `fixed` class from Tailwind CSS to position these toast components relative to the main content wrapper element from your document:

-   Top left: `fixed top-5 left-5`
-   Top right: `fixed top-5 right-5`
-   Bottom left: `fixed bottom-5 left-5`
-   Bottom right: `fixed bottom-5 right-5`

{{< example github="components/toast.md" class="relative h-56" show_dark=true >}}





{{< /example >}}

You can set your own distance for the `top-*|right-*|bottom-*|left-*` positioning classes.

## JavaScript behaviour

Please check out the }}#javascript-behaviour">Dismiss object documentation to learn how to programmatically work with the toast component directly from JavaScript.


================================================
FILE: content/components/tooltips.md
================================================
---
layout: docs
title: Tailwind CSS Tooltip - Flowbite
description: Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element
group: components
toc: true
requires_js: true

previous: Toast
previousLink: components/toast/

next: Typography
nextLink: components/typography/
---

Flowbite allows you to use the Tailwind CSS tooltip component to show extra information when hovering or focusing over an element in multiple positions, styles, and animations.

Before continuing, make sure that you have the }}">Flowbite JavaScript file included in your project in order to make the tooltip component work.

## Default tooltip example

To get started with using tooltips all you need to do is add the `data-tooltip-target="{elementId}"` data attribute to an element where `elementId` is the id of the tooltip component. In the following example you can see the button that will trigger the `tooltip-default` element to be shown when hovered or focused.

{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}



{{< /example >}}

## Tooltip styles

You can use choose between dark and light version styles for the tooltip component by changing the utility classes from Tailwind CSS and by applying the `data-tooltip-style="{light|dark}"` data attribute.

{{< example class="flex justify-center pt-8 " github="components/tooltips.md" show_dark=true >}}












{{< /example >}}

## Placement

The positioning of the tooltip element relative to the triggering element (eg. button, link) can be set using the `data-tooltip-placement="{top|right|bottom|left}"` data attribute.

{{< example class="flex flex-wrap justify-center py-8" github="components/tooltips.md" show_dark=true >}}
























{{< /example >}}

## Triggering

You can choose the triggering event by using the `data-tooltip-trigger="{hover|click}"` data attributes to choose whether you want to show the tooltip when hovering or clicking on the element. By default this option is set to `hover`.

{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}












{{< /example >}}

## Animation

You can set tooltip animation styles by using the transition utility classes from Tailwind CSS. Make sure that you add `transition-opacity` and `duration-{x}` to set the animation duration.

{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}



{{< /example >}}

## Disable arrow

You can also disable the tooltip arrow by not including the `data-popper-arrow` element.

{{< example class="flex justify-center pt-8" github="components/tooltips.md" show_dark=true >}}



{{< /example >}}

## JavaScript behaviour

The **Tooltip** class from Flowbite can be used to create an object that will show a tooltip element relative to the main trigger element, such as a button, based on the parameters, options, and methods that you provide.

### Object parameters

Initialize a Tooltip object with the object parameters including the trigger element, the tooltip content element, and extra options to set the positioning and offsets of the tooltip.



    

        
            

                
                    Parameter
                
                
                    Type
                
                
                    Required
                
                
                    Description
                
            

        
        
            

                
                    targetEl
                
                
                    Element
                
                
                    Required
                
                
                    Apply the tooltip content element to show and hide it either using the methods or the hover or click status of the trigger element.
                
            

            

                
                    triggerEl
                
                
                    Element
                
                
                    Required
                
                
                    Set an element to trigger the tooltip when clicking or hovering (ie. a button, text).
                
            

            

                
                    options
                
                
                    Object
                
                
                    Optional
                
                
                    Use the options parameter to set the positioning of the tooltip element, trigger type, offsets, and more.
                
            

            

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

        
    




### Options

Use the following options as the third parameter for the Tooltip class to set the positioning, offset, and the trigger type (hover or click) for the tooltip element.



    

        
            

                
                    Option
                
                
                    Type
                
                
                    Description
                
            

        
        
            

                
                    placement
                
                
                    String
                
                
                    Set the position of the tooltip element relative to the trigger element choosing from top|right|bottom|left.
                
            

            

                
                    triggerType
                
                
                    String
                
                
                    Set the event type that will trigger the tooltip content choosing between hover|click|none.
                
            

            

                
                    onHide
                
                
                    Function
                
                
                    Set a callback function when the tooltip is hidden.
                
            

            

                
                    onShow
                
                
                    Function
                
                
                    Set a callback function when the tooltip is shown.
                
            

            

                
                    onToggle
                
                
                    Function
                
                
                    Set a callback function when the tooltip visibility is toggled.
                
            

        
    




### Methods

Use the methods from the Tooltip object to programmatically show or hide the tooltip from JavaScript.



    

        
            

                
                    Method
                
                
                    Description
                
            

        
        
            

                
                    show()
                
                
                    Use this method on the Tooltip object to show the tooltip content.
                
            

            

                
                    hide()
                
                
                    Use this method on the Tooltip object to hide the tooltip content.
                
            

            

                
                    toggle()
                
                
                    Use this method on the Tooltip object to toggle the visibility of the tooltip content.
                
            

            

                
                    updateOnShow(callback)
                
                
                    Use this method to set a custom callback function when the tooltip has been shown.
                
            

            

                
                    updateOnHide(callback)
                
                
                    Use this method to set a custom callback function when the tooltip has been hidden.
                
            

            

                
                    updateOnToggle(callback)
                
                
                    Use this method to set a custom callback function when the tooltip visibility has been toggled.
                
            

        
    




### Example

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

First of all, set the target element as the tooltip itself and the trigger element which can be a button or text element.

After that you can also set the options object to change the placement and trigger type of the tooltip, alongside with the callback functions.

{{< code lang="javascript" file="tooltip.js" icon="file" >}}
// set the tooltip content element
const $targetEl = document.getElementById('tooltipContent');

// set the element that trigger the tooltip using hover or click
const $triggerEl = document.getElementById('tooltipButton');

// options with default values
const options = {
    placement: 'bottom',
    triggerType: 'hover',
    onHide: () => {
        console.log('tooltip is shown');
    },
    onShow: () => {
        console.log('tooltip is hidden');
    },
    onToggle: () => {
        console.log('tooltip is toggled');
    },
};


// instance options with default values
const instanceOptions = {
  id: 'tooltipContent',
  override: true
};
{{< /code >}}

Create a new Tooltip object based on the options above.

{{< code lang="javascript" file="tooltip.js" icon="file" >}}
import { Tooltip } from 'flowbite';

/*
 * $targetEl: required
 * $triggerEl: required
 * options: optional
 */
const tooltip = new Tooltip($targetEl, $triggerEl, options, instanceOptions);
{{< /code >}}

Use the `show` and `hide` methods on the Tooltip object to programmatically show and hide the tooltip element using JavaScript.

{{< code lang="javascript" >}}
// show the tooltip
tooltip.show();

// hide the tooltip
tooltip.hide();

// toggle the tooltip
tooltip.toggle();

// destroy tooltip object (removes event listeners and off-canvas Popper.js)
tooltip.destroy();

// re-initialize tooltip object
tooltip.init();
{{< /code >}}

### HTML Markup

Use the following HTML code for the JavaScript example above.

{{< code lang="html" file="tooltip.html" icon="file" >}}


{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="tooltip.ts" icon="file" >}}
import { Tooltip } from 'flowbite';
import type { TooltipOptions, TooltipInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the tooltip content element
const $targetEl: HTMLElement = document.getElementById('tooltipContent');

// set the element that trigger the tooltip using hover or click
const $triggerEl: HTMLElement = document.getElementById('tooltipButton');

// options with default values
const options: TooltipOptions = {
    placement: 'top',
    triggerType: 'hover',
    onHide: () => {
        console.log('tooltip is shown');
    },
    onShow: () => {
        console.log('tooltip is hidden');
    },
    onToggle: () => {
        console.log('tooltip is toggled');
    },
};

// instance options with default values
const instanceOptions: InstanceOptions = {
  id: 'tooltipContent',
  override: true
};

/*
 * targetEl: required
 * triggerEl: required
 * options: optional
 */
const tooltip: TooltipInterface = new Tooltip($targetEl, $triggerEl, options, instanceOptions);

// show the tooltip
tooltip.show();
{{< /code >}}


================================================
FILE: content/components/typography.md
================================================
---
layout: docs
title: Tailwind CSS Typography - Flowbite
description: Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class
group: components
toc: true

previous: Tooltips
previousLink: components/tooltips/
next: QR Code
nextLink: components/qr-code/
---

Get started with the [Flowbite Typography](https://github.com/themesberg/flowbite-typography) plugin forked from the official [Tailwind CSS Typography](https://tailwindcss.com/docs/typography-plugin) plugin to set a custom `format` class to a wrapper element to apply styles to all inline child elements such as headings, paragraphs, images, lists, and more and apply font sizes, font weights, colors, and spacings.

You can check out this [live demo](https://flowbite.com/plugins/typography/) to see how content inside an article will render like.

## Getting started

Make sure that you have both [Node.js](https://nodejs.org/) and [Tailwind CSS](https://tailwindcss.com/) already installed in your project.

1. Install the Flowbite Typography plugin via NPM:

{{< code lang="bash" >}}
npm i -D flowbite-typography
{{< /code >}}

2. Import the `flowbite-typography` plugin inside your main Tailwind CSS file:

{{< code lang="javascript" >}}
@plugin "flowbite-typography";
{{< /code >}}

Alternatively you can do the same but in your `tailwind.config.js` file:

{{< code lang="javascript" >}}
// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
{{< /code >}}

Now you can go ahead and use the new formatting classes from the Flowbite Typography plugin.

## Basic usage

Once you have installed the plugin inside your project you can add the `format` class to a wrapper element and use any type of inline elements such as headings, paragraphs, images, lists, captions, links, and tables.

All of these elements will be automatically styled with proper spacing, font sizing, font weight, colors, and more based on recommended UI/UX readability and accessibility standards.

{{< code lang="html" >}}


    
Prototyping from A to Z: best practices for successful prototypes

    
Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.

    
Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.

    
But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.

    
    ...

    
When does design come in handy?

    
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:

    
    
        
  1. 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;
    2. 
        
  2. 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;
    3. 
        
  3. Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
    4. 
        
  4. 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.
    5. 
    



{{< /code >}}

You can also set the `lg:format-lg` class to set increase font sizes and spacings for larger viewport devices.

## Link colors

You can update the default blue link color to anything you'd like by setting the `format-{color}` class:

{{< code lang="html" >}}


    
Prototyping from A to Z: best practices for successful prototypes

    
Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.

    
Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.

    
But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.



{{< /code >}}
## Dark mode

Enable dark mode for the typography by using the `dark:format-invert` class on the article wrapper element:

{{< code lang="html" >}}


    
The content inside this article will invert when switching to dark mode

    
Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.

    
Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.

    
But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.

    
    ...

    
When does design come in handy?

    
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:

    
    
        
  1. 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;
    2. 
        
  2. 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;
    3. 
        
  3. Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
    4. 
        
  4. 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.
    5. 
    



{{< /code >}}

## Max width

Override the default maximum width by setting a custom `max-w-{size}` class next to the `format` class:

{{< code lang="html" >}}


    
Prototyping from A to Z: best practices for successful prototypes

    
Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.

    
Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.

    
But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.



{{< /code >}}

## Disable format

If you want to disable formatting inside the typography content you can use the `not-format` class:

{{< code lang="html" >}}


    
The content inside this article will invert when switching to dark mode

    
Flowbite is an open-source library of UI components built with the utility-first classes from Tailwind CSS. It also includes interactive elements such as dropdowns, modals, datepickers.

    
Before going digital, you might benefit from scribbling down some ideas in a sketchbook. This way, you can think things through before committing to an actual design project.

    
But then I found a component library based on Tailwind CSS called Flowbite. It comes with the most commonly used UI components, such as buttons, navigation bars, cards, form elements, and more which are conveniently built with the utility classes from Tailwind CSS.

    
    ...

    
    

        
When does design come in handy?

        
While it might seem like extra work at a first glance, here are some key moments in which prototyping will come in handy:

        
    
            
  1. 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;
    2. 
            
  2. 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;
    3. 
            
  3. Impressing a client. Prototypes can help explain or even sell your idea by providing your client with a hands-on experience;
    4. 
            
  4. 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.
    5. 
        

    



{{< /code >}}

## Options

Extend the plugin's options inside the Tailwind configuration file to set your own colors, class name, and more.

### Custom colors

You can set your own colors by extending the typography plugin inside the `tailwind.config.js` file:

{{< code lang="javascript" >}}
module.exports = {
  theme: {
    extend: {
      typography: ({ theme }) => ({
        orange: {
          css: {
            '--tw-format-body': theme('colors.orange[500]'),
            '--tw-format-headings': theme('colors.orange[900]'),
            '--tw-format-lead': theme('colors.orange[500]'),
            '--tw-format-links': theme('colors.orange[600]'),
            '--tw-format-bold': theme('colors.orange[900]'),
            '--tw-format-counters': theme('colors.orange[500]'),
            '--tw-format-bullets': theme('colors.orange[500]'),
            '--tw-format-hr': theme('colors.orange[200]'),
            '--tw-format-quotes': theme('colors.orange[900]'),
            '--tw-format-quote-borders': theme('colors.orange[300]'),
            '--tw-format-captions': theme('colors.orange[700]'),
            '--tw-format-code': theme('colors.orange[900]'),
            '--tw-format-code-bg': theme('colors.orange[50]'),
            '--tw-format-pre-code': theme('colors.orange[100]'),
            '--tw-format-pre-bg': theme('colors.orange[900]'),
            '--tw-format-th-borders': theme('colors.orange[300]'),
            '--tw-format-td-borders': theme('colors.orange[200]'),
            '--tw-format-th-bg': theme('colors.orange[50]'),
            '--tw-format-invert-body': theme('colors.orange[200]'),
            '--tw-format-invert-headings': theme('colors.white'),
            '--tw-format-invert-lead': theme('colors.orange[300]'),
            '--tw-format-invert-links': theme('colors.white'),
            '--tw-format-invert-bold': theme('colors.white'),
            '--tw-format-invert-counters': theme('colors.orange[400]'),
            '--tw-format-invert-bullets': theme('colors.orange[600]'),
            '--tw-format-invert-hr': theme('colors.orange[700]'),
            '--tw-format-invert-quotes': theme('colors.pink[100]'),
            '--tw-format-invert-quote-borders': theme('colors.orange[700]'),
            '--tw-format-invert-captions': theme('colors.orange[400]'),
            '--tw-format-invert-code': theme('colors.white'),
            '--tw-format-invert-pre-code': theme('colors.orange[300]'),
            '--tw-format-invert-pre-bg': 'rgb(0 0 0 / 50%)',
            '--tw-format-invert-th-borders': theme('colors.orange[600]'),
            '--tw-format-invert-td-borders': theme('colors.orange[700]'),
            '--tw-format-invert-th-bg': theme('colors.orange[700]'),
          },
        },
      }),
    },
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
{{< /code >}}

Now you can use the `format-red` class and apply these styles.

### Wrapper class

Change the default `format` class to your own choosing by updating the `tailwind.config.js` file:

{{< code lang="javascript" >}}
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography')({
      className: 'custom-class',
    }),
  ]
  ...
}
{{< /code >}}

### Custom CSS

You can also customize the default CSS by extending the `css` key value pair from the Tailwind configuration file:

{{< code lang="javascript" >}}
module.exports = {
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            color: '#666',
            a: {
              color: '#3182ce',
              '&:hover': {
                color: '#2c5282',
              },
            },
          },
        },
      },
    },
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
{{< /code >}}

## Blog templates

You can check out the following [blog template](https://flowbite.com/blocks/publisher/blog-templates/) layouts from Flowbite Blocks that use the Typography plugin.


================================================
FILE: content/components/video.md
================================================
---
layout: docs
title: Tailwind CSS Video - Flowbite
description: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS
group: components
toc: true

previous: QR Code
previousLink: components/qr-code/
next: Input field
nextLink: forms/input-field/
---

Get started with the video component to embed internal video source into a native HTML 5 video player and set custom options such as autoplay or muted to enhance the user experience.

## Video player

Use this example to create a native browser video player and apply the `w-full` utility class from Tailwind CSS to span the full width of the parent container.

{{< example github="typography/video.md" show_dark=true >}}

{{< /example >}}

## Autoplay

Use the `autoplay` attribute on the video component to automatically start the video when the page has been loaded.

{{< example github="typography/video.md" show_dark=true >}}

{{< /example >}}

## Muted

Use the `muted` attribute together with the `autoplay` option to start the video while the sound is muted.

{{< example github="typography/video.md" show_dark=true >}}

{{< /example >}}

## Sizes

Set the width and height of the video component using the `w-{size}` and `h-{size}` utility classes from Tailwind CSS.

### Width

Use the `w-{size}` class to set the width of the video component.

{{< example github="typography/video.md" show_dark=true >}}

{{< /example >}}

### Height

Use the `h-{size}` class to set the height of the video player.

{{< example github="typography/video.md" show_dark=true >}}

{{< /example >}}

### Responsive

Use the following example to make the video responsive across all devices and viewports.

{{< example github="typography/video.md" show_dark=true >}}

{{< /example >}}

## Custom styles

Customize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border.

{{< example github="typography/video.md" show_dark=true >}}

{{< /example >}}

================================================
FILE: content/customize/_index.html
================================================
---
layout: redirect
sitemap_exclude: true
redirect: "/docs/customize/configuration/"
---

================================================
FILE: content/customize/colors.md
================================================
---
layout: docs
title: Tailwind CSS Colors - Flowbite
description: Customize the default colors of Flowbite using the default color variables from the Tailwind CSS framework
group: customize
toc: true

previous: Theming
previousLink: customize/theming/
next: Icons
nextLink: customize/icons/
---

Since 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.

## Default color palette

The 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.



   

      

         

            

               
Gray

               
colors.coolGray

            

         

         

            

               

               

                  
50

                  
#F9FAFB

               

            

            

               

               

                  
100

                  
#F3F4F6

               

            

            

               

               

                  
200

                  
#E5E7EB

               

            

            

               

               

                  
300

                  
#D1D5DB

               

            

            

               

               

                  
400

                  
#9CA3AF

               

            

            

               

               

                  
500

                  
#6B7280

               

            

            

               

               

                  
600

                  
#4B5563

               

            

            

               

               

                  
700

                  
#374151

               

            

            

               

               

                  
800

                  
#1F2937

               

            

            

               

               

                  
900

                  
#111827

               

            

         

      

   

   

      

         

            

               
Red

               
colors.red

            

         

         

            

               

               

                  
50

                  
#FDF2F2

               

            

            

               

               

                  
100

                  
#FDE8E8

               

            

            

               

               

                  
200

                  
#FBD5D5

               

            

            

               

               

                  
300

                  
#F8B4B4

               

            

            

               

               

                  
400

                  
#F98080

               

            

            

               

               

                  
500

                  
#F05252

               

            

            

               

               

                  
600

                  
#E02424

               

            

            

               

               

                  
700

                  
#C81E1E

               

            

            

               

               

                  
800

                  
#9B1C1C

               

            

            

               

               

                  
900

                  
#771D1D

               

            

         

      

   

   

      

         

            

               
Yellow

               
colors.amber

            

         

         

            

               

               

                  
50

                  
#FDFDEA

               

            

            

               

               

                  
100

                  
#FDF6B2

               

            

            

               

               

                  
200

                  
#FCE96A

               

            

            

               

               

                  
300

                  
#FACA15

               

            

            

               

               

                  
400

                  
#E3A008

               

            

            

               

               

                  
500

                  
#C27803

               

            

            

               

               

                  
600

                  
#9F580A

               

            

            

               

               

                  
700

                  
#8E4B10

               

            

            

               

               

                  
800

                  
#723B13

               

            

            

               

               

                  
900

                  
#633112

               

            

         

      

   

   

      

         

            

               
Green

               
colors.emerald

            

         

         

            

               

               

                  
50

                  
#F3FAF7

               

            

            

               

               

                  
100

                  
#DEF7EC

               

            

            

               

               

                  
200

                  
#BCF0DA

               

            

            

               

               

                  
300

                  
#84E1BC

               

            

            

               

               

                  
400

                  
#31C48D

               

            

            

               

               

                  
500

                  
#0E9F6E

               

            

            

               

               

                  
600

                  
#057A55

               

            

            

               

               

                  
700

                  
#046C4E

               

            

            

               

               

                  
800

                  
#03543F

               

            

            

               

               

                  
900

                  
#014737

               

            

         

      

   

   

      

         

            

               
Blue

               
colors.blue

            

         

         

            

               

               

                  
50

                  
#EBF5FF

               

            

            

               

               

                  
100

                  
#E1EFFE

               

            

            

               

               

                  
200

                  
#C3DDFD

               

            

            

               

               

                  
300

                  
#A4CAFE

               

            

            

               

               

                  
400

                  
#76A9FA

               

            

            

               

               

                  
500

                  
#3F83F8

               

            

            

               

               

                  
600

                  
#1C64F2

               

            

            

               

               

                  
700

                  
#1A56DB

               

            

            

               

               

                  
800

                  
#1E429F

               

            

            

               

               

                  
900

                  
#233876

               

            

         

      

   

   

      

         

            

               
Indigo

               
colors.indigo

            

         

         

            

               

               

                  
50

                  
#F0F5FF

               

            

            

               

               

                  
100

                  
#E5EDFF

               

            

            

               

               

                  
200

                  
#CDDBFE

               

            

            

               

               

                  
300

                  
#B4C6FC

               

            

            

               

               

                  
400

                  
#8DA2FB

               

            

            

               

               

                  
500

                  
#6875F5

               

            

            

               

               

                  
600

                  
#5850EC

               

            

            

               

               

                  
700

                  
#5145CD

               

            

            

               

               

                  
800

                  
#42389D

               

            

            

               

               

                  
900

                  
#362F78

               

            

         

      

   

   

      

         

            

               
Purple

               
colors.violet

            

         

         

            

               

               

                  
50

                  
#F6F5FF

               

            

            

               

               

                  
100

                  
#EDEBFE

               

            

            

               

               

                  
200

                  
#DCD7FE

               

            

            

               

               

                  
300

                  
#CABFFD

               

            

            

               

               

                  
400

                  
#AC94FA

               

            

            

               

               

                  
500

                  
#9061F9

               

            

            

               

               

                  
600

                  
#7E3AF2

               

            

            

               

               

                  
700

                  
#6C2BD9

               

            

            

               

               

                  
800

                  
#5521B5

               

            

            

               

               

                  
900

                  
#4A1D96

               

            

         

      

   

   

      

         

            

               
Pink

               
colors.pink

            

         

         

            

               

               

                  
50

                  
#FDF2F8

               

            

            

               

               

                  
100

                  
#FCE8F3

               

            

            

               

               

                  
200

                  
#FAD1E8

               

            

            

               

               

                  
300

                  
#F8B4D9

               

            

            

               

               

                  
400

                  
#F17EB8

               

            

            

               

               

                  
500

                  
#E74694

               

            

            

               

               

                  
600

                  
#D61F69

               

            

            

               

               

                  
700

                  
#BF125D

               

            

            

               

               

                  
800

                  
#99154B

               

            

            

               

               

                  
900

                  
#751A3D

               

            

         

      

   




## Customize colors

If 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:

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */

@import "tailwindcss";

@plugin "flowbite/plugin";

@source "../node_modules/flowbite";

@theme {
    /* main text color */
    --color-body: var(--color-stone-600);
    --color-body-subtle: var(--color-stone-500);

    /* text heading colors */
    --color-heading: var(--color-stone-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-stone-200);
    --color-fg-brand: var(--color-stone-950);
    --color-fg-brand-strong: var(--color-stone-900);
}
{{< /code >}}

================================================
FILE: content/customize/configuration.md
================================================
---
layout: docs
title: Tailwind CSS Configuration - Flowbite
description: Learn how to customize the default Flowbite and Tailwind CSS options and styles
group: customize
toc: true

previous: MCP UI
previousLink: getting-started/mcp-ui/
next: Variables
nextLink: customize/variables/
---

Since the release of Tailwind v4, the configuration file that you've previously used to set options has now been moved to your main CSS file where you can import modules, plugins, set new variables like colors and fonts, set the custom source files, and more.

Before continuing, please make sure that you have installed both Flowbite and the latest version of Tailwind.

## Getting started

You will probably want to be able to add your own colors, fonts, sizings, shadows, and other styles to the default set of utility classes from Flowbite and Tailwind CSS. In order to do that, you can set most of these options in your main CSS file that gets compiled by Tailwind.

Here's an example of a simple configuration where we import plugins, set the source files, customize variables for colors and fonts, and set the dark mode strategy to use class name:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    /* main text color */
    --color-body: var(--color-stone-600);
    --color-body-subtle: var(--color-stone-500);

    /* text heading colors */
    --color-heading: var(--color-stone-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-stone-200);
    --color-fg-brand: var(--color-stone-950);
    --color-fg-brand-strong: var(--color-stone-900);
    
    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
}
{{< /code >}}

Using this example is a good starting point for any project created using Flowbite and Tailwind CSS.

## Theming variables

You can customize colors, fonts, spacings, and other styles using native variables in your main CSS file.

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    /* main text color */
    --color-body: var(--color-stone-600);
    --color-body-subtle: var(--color-stone-500);

    /* text heading colors */
    --color-heading: var(--color-stone-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-stone-200);
    --color-fg-brand: var(--color-stone-950);
    --color-fg-brand-strong: var(--color-stone-900);

    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';

    --spacing-custom: 10px;

    --breakpoint-xs: 30rem;
    --breakpoint-2xl: 100rem;
    --breakpoint-3xl: 120rem;
}
{{< /code >}}

The example above adds a new color palette, fonts, a custom spacing variable and new media breakpoints.

All of these styles will be propagated to the utility classes provided by Tailwind CSS.

## Custom utilities

You can add custom utilities by using the `@utility` directive in your CSS file.

{{< code lang="css" file="main.css" icon="file" >}}
@utility custom-url {
  color: --color-primary-600;
  text-decoration: underline;
}
{{< /code >}}

Now you can use the `custom-url` class to add an underline and primary color to the target element.

## Custom variants

Use the `@variant` direct in native CSS to target states such as hover, focus, dark mode, and more.

{{< code lang="css" file="main.css" icon="file" >}}
.element {
  text-decoration: underline;

  @variant hover {
    text-decoration: no-underline;
  }
}
{{< /code >}}

## Import plugins

You can import third party plugins using the `@plugin` directive in your CSS file.

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@plugin "flowbite/plugin";
@plugin "flowbite-typography";
{{< /code >}}

## Source

Tailwind CSS automatically detects source files, but ignores a few folders such as your `node_modules`.

Here's how you can explicictly set the source files in your main CSS file:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@source "../node_modules/flowbite";
{{< /code >}}

This will scan the Flowbite folder inside your installed packages for Tailwind classes.

## Config

Use the `@config` directive to import old `tailwind.config.js` files to copy your options.

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@config "../tailwind.config.js";
{{< /code >}}

## Prefixes

You can use the `prefix` object to set a prefix for all of the classes generated by Flowbite and Tailwind CSS.

For example, you can add the `fb-` prefix like so:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss" prefix(fb);
{{< /code >}}

Doing so it will add the prefix to all of the classes.

{{< code lang="css" file="main.css" icon="file" >}}
.fb-text-left {
  text-align: left;
}
.fb-text-center {
  text-align: center;
}
.fb-text-right {
  text-align: right;
}
/* etc. */
{{< /code >}}

## Reference

If you'd like to browse the full list of configurable options, please visit the official Tailwind CSS configuration.

================================================
FILE: content/customize/dark-mode.md
================================================
---
layout: docs
title: Tailwind CSS Dark Mode - Flowbite
description: Learn how to configure and build a dark mode switcher for Tailwind CSS using Flowbite and start developing with the components from the library
group: customize
toc: true

previous: Variables
previousLink: customize/variables/
next: Theming
nextLink: customize/theming/
---

Offering a dark version for your website is more of an expected feature rather than a nice to have nowadays. Luckily, Tailwind CSS has a dark mode functionality enabled and the components from Flowbite also support it by using the "class" option.

Learn how to enable and build a dark version switcher for Tailwind CSS and Flowbite by using JavaScript and the main CSS file by following the steps described below.

## Enable dark mode

All you need to do to enable dark mode for your Tailwind CSS project and Flowbite components is to add the following code inside your main `input.css` file and then add the `dark` class on your `html` element.

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css */
@custom-variant dark (&:where(.dark, .dark *));
{{< /code >}}

If you install the Flowbite Plugin inside your Tailwind project then dark mode via the class method will work automatically as we do this for you by default.

Alternatively, you can also just use the "media" option to automatically set the dark or light theme based on the browser's color scheme preference which is the default setting in Tailwind CSS.

## Dark mode switcher

If you want to create a dark mode switcher for Tailwind CSS and Flowbite you'll have to add some JavaScript code and a toggle element that a user can use to change their preferences.

1. Toggle dark mode by checking user preference in the `` tag of your HTML:

{{< code lang="html" file="index.html" icon="file" >}}

{{< /code >}}

This will first check if you've previously set the theme color preference manually using the local storage and as a fallback it will either set the dark or light mode based on your browser color scheme preference.

2. Create a `
{{< /code >}}

In this example we used a `
    
  


{{< /example >}}

## Using RTL variants

If you need to add RTL variants to your own custom components, you can use the `rtl:` prefix.

For example, if you want to add a margin to the left side of an element in LTR mode, you would use `ml-2`. 

In RTL mode, you would use `rtl:ml-2` instead.

{{< code lang="html" file="index.html" icon="file" >}}


  


{{< /code >}}

However, we do recommend that you use logical properties for margins, paddings, borders, and rounded-sm corners because the HTML markup will be cleaner and contain less utility-classes, which is always a good thing when it comes to Tailwind CSS.

## UI components

As mentioned before, all of the UI components from Flowbite support RTL by default and all of the examples from the documentation will render correctly whenever you set the `dir` attribute to `rtl` on the `` element. Check out all our UI components and examples from the [official documentation](https://flowbite.com/docs/getting-started/introduction/).

================================================
FILE: content/customize/theming.md
================================================
---
layout: docs
title: Tailwind CSS Theming - Flowbite
description: Use the theming options from Tailwind CSS to set native CSS theme variables to add new colors, fonts, spacings and create new utility classes to customize your project
group: customize
toc: true

previous: Dark mode
previousLink: customize/dark-mode/
next: Colors
nextLink: customize/colors/
---

Since the release of Tailwind v4 the theming customization has been moved from the `tailwind.config.js` file to native CSS theme variables which brings an advantage that allows your project to have a much more natural way of customizing colors, fonts, shadows, spacings, and more.

Check out the new [custom variables]({{< ref "customize/variables" >}}) from the Flowbite design system to make it easier to customize your project.

## Getting started

As we introduced custom themes with Flowbite v4 you can now import either one in your `input.css` file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

Here's an example of a modified CSS file that sets a custom set of colors and fonts:

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    --color-fg-brand-subtle: var(--color-blue-200);
    --color-fg-brand: var(--color-blue-700);
    --color-fg-brand-strong: var(--color-blue-900);

    --color-brand-softer: var(--color-blue-50);
    --color-brand-soft: var(--color-blue-100);
    --color-brand: var(--color-blue-700);
    --color-brand-medium: var(--color-blue-200);
    --color-brand-strong: var(--color-blue-800);
    
    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
}
{{< /code >}}

These variables will now create a new color pallette called `brand` that can be used as your main brand color and the fonts that will now use `Inter` by default.

## Flowbite Plugin

After installing Flowbite, make sure that you also import the Flowbite plugin in your main CSS file:

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";
{{< /code >}}

This will ensure that the pseudo styles for forms, checkboxes, tooltips, charts, and datatables will be applied.

## Theme options

The best way to understand how theming works with Tailwind CSS is for example when you're adding a new color variable this will be available for all text, background, and border related colors. Basically the newly added color will propagate into all of the available utility classes.

There are many more variable namespaces that you can use to customize the default utility classes from Tailwind CSS including for spacing, containers, fonts, sizing, and more.

### Colors

Updating or adding new colors can be done by using the `--color-{name}` variable namespaces:

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    --color-fg-brand-subtle: var(--color-blue-200);
    --color-fg-brand: var(--color-blue-700);
    --color-fg-brand-strong: var(--color-blue-900);

    --color-brand-softer: var(--color-blue-50);
    --color-brand-soft: var(--color-blue-100);
    --color-brand: var(--color-blue-700);
    --color-brand-medium: var(--color-blue-200);
    --color-brand-strong: var(--color-blue-800);
}
{{< /code >}}

This introduces a list of colors attributed to the `brand` variable name, meaning that utility class names such as `text-fg-brand` or `bg-brand` will now show your custom branded color when using Tailwind.

### Fonts

You can add your own fonts by updating the `--font-body` variable in your CSS file.

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
}
{{< /code >}}

Make sure that you apply `antialiased` to the `` tag of your document to enable font smoothing.

### Spacing

Use the `spacing-{name}` variable namespace to set spacing values to utility class names used for setting widths, heights, paddings, margins, and more.

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
   --spacing-custom: 10px;
}
{{< /code >}}

### Breakpoints

You can customize the breakpoints at which the reponsive mobile-first utility classes are being targeted using the `--breakpoint-{size}` variable namespaces in your main CSS file:

{{< code lang="css" file="main.css" icon="file" >}}
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
  --breakpoint-xs: 30rem;
  --breakpoint-2xl: 100rem;
  --breakpoint-3xl: 120rem;
}
{{< /code >}}

This will make `p-custom` or `w-custom` have the value of `10px` as explained above.

## Reference

You can read all of the configurable variable namespaces on the Tailwind CSS docs.

================================================
FILE: content/customize/variables.md
================================================
---
layout: docs
title: Tailwind CSS Variables - Flowbite
description: Learn how to use the custom variables from Tailwind CSS to theme your project based on the additional theme variables provided by Flowbite
group: customize
toc: true

previous: Configuration
previousLink: customize/configuration/
next: Dark mode
nextLink: customize/dark-mode/
---

Since the `v4` release of Flowbite we introduced five new themes: modern, minimal, enterprise, playful, and mono. These themes are available as CSS variables that can be used to customize the default theme of Flowbite with the least amount of color variables.

On this page you will learn the breakdown of the CSS variables that are available for each theme. These are primarily color variables, but also include some other variables that are used to customize the default theme of Flowbite.

## Color variables

Almost all of the custom variables from Flowbite are colors and can be used to customize the default theme.

Here's a short breakdown of the terminology of the color variables:

- `color-brand-{level}-{accent}`: one or more brand colors to represent the brand
- `color-neutral-{level}-{accent}`: neutral colors to represent the gray colors
- `color-fg-{type}-{level}-{accent}`: foreground colors to represent the text colors
- `color-{status}-{accent}`: status colors to represent the different states (eg. warning, success etc.)

The `level` placeholder is either blank or it can be `primary`, `secondary`, `tertiary`, `quauternary` which are used to represent the different levels of the color based on importance.

The `accent` placeholder is either blank or it can be `soft`, `subtle`, `medium`, `strong` which are used to represent the different levels of the color based on the amount of color.

The `type` placeholder is usually the main color type such as `brand`, `neutral`, `warning` etc.

Here's the full list of the brand variables:

## Text color variables

This is the full list of color variables that are used for text colors:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    /* main text color */
    --color-body: var(--color-stone-600);
    --color-body-subtle: var(--color-stone-500);

    /* text heading colors */
    --color-heading: var(--color-stone-900);

    /* used for custom brand colors */
    --color-fg-brand-subtle: var(--color-stone-200);
    --color-fg-brand: var(--color-stone-950);
    --color-fg-brand-strong: var(--color-stone-900);

    /* used for status colors */
    --color-fg-success: var(--color-green-700);
    --color-fg-success-strong: var(--color-green-900);
    --color-fg-danger: var(--color-red-700);
    --color-fg-danger-strong: var(--color-red-900);
    --color-fg-warning-subtle: var(--color-orange-600);
    --color-fg-warning: var(--color-orange-900);
    --color-fg-yellow: var(--color-yellow-400);
    --color-fg-disabled: var(--color-stone-400);
    --color-fg-purple: var(--color-purple-600);
    --color-fg-cyan: var(--color-cyan-600);
    --color-fg-indigo: var(--color-indigo-600);
    --color-fg-pink: var(--color-pink-600);
    --color-fg-lime: var(--color-lime-600);
}
{{< /code >}}

## Background color variables

Use these variables to set the colors for the background of elements:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    /* BACKGROUND COLOR VARIABLES */
    /* used for neutral colors */
    --color-neutral-primary-soft: var(--color-white);
    --color-neutral-primary: var(--color-white);
    --color-neutral-primary-medium: var(--color-white);
    --color-neutral-primary-strong: var(--color-white);
    --color-neutral-secondary-soft: var(--color-gray-50);
    --color-neutral-secondary: var(--color-gray-50);
    --color-neutral-secondary-medium: var(--color-gray-50);
    --color-neutral-secondary-strong: var(--color-gray-50);
    --color-neutral-secondary-strongest: var(--color-gray-50);
    --color-neutral-tertiary-soft: var(--color-gray-100);
    --color-neutral-tertiary: var(--color-gray-100);
    --color-neutral-tertiary-medium: var(--color-gray-100);
    --color-neutral-quaternary: var(--color-gray-200);
    --color-neutral-quaternary-medium: var(--color-gray-200);
    --color-gray: var(--color-gray-300);

    /* used for brand colors */
    --color-brand-softer: var(--color-blue-50);
    --color-brand-soft: var(--color-blue-100);
    --color-brand: var(--color-blue-700);
    --color-brand-medium: var(--color-blue-200);
    --color-brand-strong: var(--color-blue-800);

    /* used for status colors */
    --color-success-soft: var(--color-emerald-50);
    --color-success: var(--color-emerald-700);
    --color-success-medium: var(--color-emerald-100);
    --color-success-strong: var(--color-emerald-800);
    --color-danger-soft: var(--color-rose-50);
    --color-danger: var(--color-rose-700);
    --color-danger-medium: var(--color-rose-100);
    --color-danger-strong: var(--color-rose-800);
    --color-warning-soft: var(--color-orange-50);
    --color-warning: var(--color-orange-500);
    --color-warning-medium: var(--color-orange-100);
    --color-warning-strong: var(--color-orange-700);
    --color-dark-soft: var(--color-gray-800);
    --color-dark: var(--color-gray-800);
    --color-dark-strong: var(--color-gray-900);
    --color-disabled: var(--color-gray-100);
    --color-purple: var(--color-purple-500);
    --color-sky: var(--color-sky-500);
    --color-teal: var(--color-teal-600);
    --color-pink: var(--color-pink-600);
    --color-cyan: var(--color-cyan-500);
    --color-fuchsia: var(--color-fuchsia-600);
    --color-indigo: var(--color-indigo-600);
    --color-orange: var(--color-orange-400);
}
{{< /code >}}

## Border color variables

Use these variables to set the colors for the border of elements:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    /* BORDER COLOR VARIABLES */
    --color-buffer: var(--color-white);
    --color-buffer-medium: var(--color-white);
    --color-buffer-strong: var(--color-white);
    --color-muted: var(--color-gray-50);
    --color-light-subtle: var(--color-gray-100);
    --color-light: var(--color-gray-100);
    --color-light-medium: var(--color-gray-100);
    --color-default-subtle: var(--color-gray-200);
    --color-default: var(--color-gray-200);
    --color-default-medium: var(--color-gray-200);
    --color-default-strong: var(--color-gray-200);

    /* used for status colors */
    --color-success-subtle: var(--color-emerald-200);
    --color-danger-subtle: var(--color-rose-200);
    --color-warning-subtle: var(--color-orange-200);
    --color-brand-subtle: var(--color-blue-200);
    --color-brand-light: var(--color-blue-600);
    --color-dark-subtle: var(--color-gray-800);
    --color-dark-backdrop: var(--color-gray-950);
}
{{< /code >}}

## Font family variables

Use these variables to set the font families for the text of elements:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace';
}
{{< /code >}}

## Border radius variables

Use these variables to set the border radius of elements:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
    /* BORDER RADIUS VARIABLES */
    --radius-0: 0px;
    --radius-xxs: 2px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-base: 12px;
    --radius-lg: 16px;
}
{{< /code >}}


================================================
FILE: content/forms/checkbox.md
================================================
---
layout: docs
title: Tailwind CSS Checkbox - Flowbite
description: Get started with the checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors
group: forms
toc: true
requires_js: true

previous: Textarea
previousLink: forms/textarea/
next: Radio
nextLink: forms/radio/
---

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

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the checkbox component.

## Checkbox example

Use this default example of a checkbox element in a checked and unchecked state.

{{< example github="forms/checkbox.md" show_dark=true >}}


    
    




    
    


{{< /example >}}

## Disabled state

This example can be used for the disabled state of the checkbox component by applying the `disabled` attribute to the input element.

{{< example github="forms/checkbox.md" show_dark=true >}}


    
    




    
    


{{< /example >}}

## Checkbox link

Use this example if you want to add an anchor link inside the label of the checkbox component.

{{< example github="forms/checkbox.md" show_dark=true >}}


    
    


{{< /example >}}

## Helper text

Get started with this example if you want to add a secondary helper text for the checkbox component.

{{< example github="forms/checkbox.md" show_dark=true >}}


    

        
    

    

        
        
For orders shipped from $25 in books or $29 in other categories

    



{{< /example >}}

## Bordered

Use this example of a checkbox inside a card element to enable a larger area of clicking activation.

{{< example class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}


    
    




    
    


{{< /example >}}

## Bordered with description

Use this checkbox component with a bordered style and a description text.

{{< example class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}


{{< /example >}}

## Bordered with icon

This example can be used to create a checkbox component with a bordered style, a description text and an icon.

{{< example class="grid gap-6 md:grid-cols-2" github="forms/checkbox.md" show_dark=true >}}


{{< /example >}}


## Checkbox list group

Use this example to show a list of checkbox items grouped inside a card.

{{< example github="components/radio.md" show_dark=true >}}

Technology


    
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 


{{< /example >}}

## Horizontal list group

Use this example to show a list of checkbox items inside a card horizontally.

{{< example github="components/radio.md" show_dark=true >}}

Identification


    
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 


{{< /example >}}



  {{< requires_js >}}



## Checkbox dropdown

Use this example to show a list of checkbox items inside a dropdown menu.

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



{{< /example >}}

## Inline layout

You can align the checkbox elements horizontally by using a wrapper tag and applying the `flex` class.

{{< example github="forms/checkbox.md" show_dark=true >}}


    

        
        
    

    

        
        
    

    

        
        
    

    

        
        
    



{{< /example >}}

## Colors

Use the `text-{color}-{shade}` classes from Tailwind CSS to change the color of the checkbox component.

{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}


    
    




    
    




    
    




    
    




    
    




    
    


{{< /example >}}

## Advanced layout

Use this example of an advanced layout of checkbox elements where the label parent element can be styled when the checkbox is checked.

{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}

Choose technology:


    
    
  • 
        
        
    
    • 
    
  • 
        
        
    
    • 
    
  • 
        
        
    
    • 


{{< /example >}}

================================================
FILE: content/forms/file-input.md
================================================
---
layout: docs
title: Tailwind CSS File Input - Flowbite
description: Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes
group: forms
toc: true
requires_js: true

previous: Input Field
previousLink: forms/input-field/
next: Search Input
nextLink: forms/search-input/
---

The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode.

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the file input component.

## File upload example

Get started with a simple file input component to let users upload one single file.

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


{{< /example >}}

## Helper text

Add a descriptive helper text to inform users the allowed extensions and sizes of the files.

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



SVG, PNG, JPG or GIF (MAX. 800x400px).

{{< /example >}}

## Multiple files

Apply the `multiple` attribute to the file input component to allow more files to be uploaded.

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


{{< /example >}}

## Sizes

Choose from the small, default, and large file input sizing options.

{{< example class="space-y-6" github="forms/file-input.md" show_dark=true >}}






{{< /example >}}

## Dropzone

The dropzone file input component can be used to upload one or more files by clicking anywhere in the area.

{{< example class="space-y-6" github="forms/file-input.md" show_dark=true >}}


    

 
{{< /example >}}

## Dropzone with button

Use this dropzone component to upload files with a button element.

{{< example class="space-y-6" github="forms/file-input.md" show_dark=true >}}


  

    

      
      
Click the button below to upload

      
Max. File Size: 30MB

      
      
    

  

  
  


{{< /example >}}

================================================
FILE: content/forms/floating-label.md
================================================
---
layout: docs
title: Tailwind CSS Floating Label - Flowbite
description: Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes
group: forms
toc: true

previous: Range Slider
previousLink: forms/range/
next: Headings
nextLink: typography/headings/
---

The floating label style was first pioneered by Google in its infamous Material UI design system and it's basically a label tag which floats just above the input field when it is being focused or already has content inside.

On this page you will find a three different input field styles including a standard, outlined, and filled style including validation styles and sizes coded with Tailwind CSS and supported for dark mode.

## Floating label example

Get started with the following three styles for the floating label component and use the `label` tag as a visual placeholder using the `peer-placeholder-shown` and `peer-focus` utility classes from Tailwind CSS.

{{< example class="grid items-end w-full gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}


    
    




    
    




    
    


{{< /example >}}

## Floating label with icons

Use these examples of floating label input fields with a descriptive [SVG icon](https://flowbite.com/icons/).

{{< example class="grid items-end w-full gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}


    
    




    
    




    
    


{{< /example >}}

## Disabled state

Apply the `disabled` attribute to the input fields to disallow the user from changing the content.

{{< example class="grid items-end gap-6 md:grid-cols-3" github="forms/floating-label.md" show_dark=true >}}


    
    




    
    




    
    


{{< /example >}}

## Validation

Use the following examples of input validation for the success and error messages by applying the validation text below the input field and using the green or red color classes from Tailwind CSS.

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



    

        

            
            
        

        
Well done! Some success message.

    

    
   
        

            
            
        

        
Well done! Some success message.
    
    

    

        

            
            
        

        
Well done! Some success message.

    







    

        

            
            
        

        
Oh, snapp! Some error message.

    

    
   
        

            
            
        

        
Oh, snapp! Some error message.
    
    

    

        

            
            
        

        
Oh, snapp! Some error message.

    



{{< /example >}}

## Sizes

Use the small and default sizes of the floating label input fields from the following example.

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


    

        
        
    

    

        
        
    

    

        
        
    





    

        
        
    

    

        
        
    

    

        
        
    



{{< /example >}}

## Helper text

Add a helper text in addition to the label if you want to show more information below the input field.

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


    
    



Remember, contributions to this topic should follow our Community Guidelines.

{{< /example >}}

================================================
FILE: content/forms/input-field.md
================================================
---
layout: docs
title: Tailwind CSS Input Field - Flowbite
description: Get started with a collection of input fields built with Tailwind CSS to start accepting data from the user based on multiple sizes, variants, and input types
group: forms
toc: true

previous: Video
previousLink: components/video/
next: File Input
nextLink: forms/file-input/
---

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

On this page you will find all of the input types based on multiple variants, styles, colors, and sizes built with the utility classes from Tailwind CSS and components from Flowbite.

## Input fields

Use this example as a generic form element which includes multiple input fields types such as text, email, password, number, URL, and phone number and use the grid layout to add multiple columns and rows.

{{< example github="forms/input-field.md" show_dark=true >}}


    

        

            
            
        

        

            
            
        

        

            
            
        
  
        

            
            
        

        

            
            
        

        

            
            
        

    

    

        
        
    
 
    

        
        
    
 
    

        
        
    
 
    

        

        
        

        
    

    


{{< /example >}}

## Input sizes

Use the following examples to apply a small, default or large size for the input fields.

{{< example class="space-y-6" github="forms/input-field.md" show_dark=true >}}
        

            
            
        

        

            
            
        

        

            
            
        

        

            
            
        

{{< /example >}}

## Disabled state

Get started with this example if you want to apply the disabled state to an input field.

{{< example class="space-y-6" github="forms/input-field.md" show_dark=true >}}


{{< /example >}}

## Validation

Use the following example to apply validation styles for success and error messages.

{{< example github="forms/input-field.md" show_dark=true >}}


  
  
  
Well done! Some success message.





  
  
  
Oh, snapp! Some error message.



{{< /example >}}

## Input group

This example can be used to add a descriptive icon or additional text inside the input field.

{{< example class="space-y-6" github="forms/input-field.md" show_dark=true >}}



  

    
  

  





  
    
  
  






  
https://
  
  


{{< /example >}}

## Helper text

Use this example to show a helper text below the input field for additional explanation and links.

{{< example github="forms/input-field.md" show_dark=true >}}



  

    
  

  



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

{{< /example >}}

## Search input

Get started with this example where the submit button is positioned inside the input field.

{{< example github="forms/input-field.md" show_dark=true >}}

   
    
    

        

            
        

        
        
    



{{< /example >}}



  {{< requires_js >}}



## Dropdown input

Use this example to show a dropdown menu right next to the input field.

{{< example github="forms/input-field.md" show_dark=true iframeHeight="290" >}}


    

        
        
        
        
        
    



{{< /example >}}


================================================
FILE: content/forms/number-input.md
================================================
---
layout: docs
title: Tailwind CSS Number Input - Flowbite
description: Use the number input component to set a numeric value inside a form field based on multiple styles, variants, and layouts that can be used in product pages, forms, and more
group: forms
requires_js: true
toc: true

previous: Search Input
previousLink: forms/search-input/
next: Phone Input
nextLink: forms/phone-input/
---

The number input component from Flowbite can be used to introduce numeric values inside a form such as for a quantity field, a ZIP code, a phone number, your credit card number, and more. All of the UI components are coded exclusively with Tailwind CSS.

The examples on this page have basic functionality coded with JavaScript and the quantity input has a more advanced ability to increment and decrement the value with the help of the `data-input-counter` attribute from the Flowbite JS API.

## Default number input

Use this component to set a number value inside a form field by applying the `type="number"` attribute.

{{< example github="components/number-input.md" show_dark=true >}}


    
    


{{< /example >}}

## ZIP code input

Use this example with an icon and helper text to set a ZIP code value inside a form field by also applying the `pattern` attribute to validate the input using a regular expression for a 5 digit number.

{{< example github="components/number-input.md" show_dark=true >}}


    
    

        

            
        

        
    

    
Please select a 5 digit number from 0 to 9.



{{< /example >}}

## Phone number

Use this example to set a phone number inside a form field based on the `type="phone"` attribute and a dropdown menu to select the country code.

{{< example github="components/number-input.md" show_dark=true iframeHeight="360" >}}


    

        
        
        
        

            
        

    



{{< /example >}}

## Control buttons

Use this example with control buttons to increment and decrement the value inside the input field.

If you have the [Flowbite JS](https://flowbite.com/docs/getting-started/quickstart/) installed in your project then you can use the `data-input-counter` data attribute to initialize the target input field and then use the following data attributes to target the buttons that will increment and decrement the value of the input field:

- `data-input-counter` - initialize the input field
- `data-input-counter-increment` - increment the value of the input field
- `data-input-counter-decrement` - decrement the value of the input field

{{< example github="components/number-input.md" show_dark=true >}}


    
    

        
        
        
    

    
Please select a 5 digit number from 0 to 9.



{{< /example >}}

## Control buttons with icon

Use this example to also add an icon inside the input field to improve the user experience.

{{< example github="components/number-input.md" show_dark=true >}}


    
    

        
        
        

            
            Bedrooms
        

        
    

    
Please select the number of bedrooms.



{{< /example >}}

## Counter input

Use this example as an alternative style to the control buttons example above.

{{< example github="components/number-input.md" show_dark=true >}}


    
    

        
        
        
    



{{< /example >}}

## Currency input

This component can be used to set a currency value inside a form field when you need to set a price.

{{< example github="components/number-input.md" show_dark=true iframeHeight="290" >}}


    
    

        

            
        

        
    

    
    


{{< /example >}}

## Credit card input

Use this component to set the information needed when making an online transaction with a credit card by adding the card number, expiration date, and security code. The component uses the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/).

{{< example github="components/number-input.md" show_dark=true iframeHeight="340" >}}


    
    

        
        

            
        

    

    

        

            

                
            

            
            
        

        

            
            
        

    

    


{{< /example >}}

## Pin code input

Use this example of a pin code input to set a 6 digit code. This can be used when setting up a new account or when making a payment and the code is sent via phone or email.

{{< example github="components/number-input.md" show_dark=true javascript=`
// use this simple function to automatically focus on the next input
function focusNextInput(el, prevId, nextId) {
    if (el.value.length === 0) {
        if (prevId) {
            document.getElementById(prevId).focus();
        }
    } else {
        if (nextId) {
            document.getElementById(nextId).focus();
        }
    }
}

document.querySelectorAll('[data-focus-input-init]').forEach(function(element) {
    element.addEventListener('keyup', function() {
        const prevId = this.getAttribute('data-focus-input-prev');
        const nextId = this.getAttribute('data-focus-input-next');
        focusNextInput(this, prevId, nextId);
    });
    
// Handle paste event to split the pasted code into each input
    element.addEventListener('paste', function(event) {
        event.preventDefault();
        const pasteData = (event.clipboardData || window.clipboardData).getData('text');
        const digits = pasteData.replace(/\D/g, ''); // Only take numbers from the pasted data

        // Get all input fields
        const inputs = document.querySelectorAll('[data-focus-input-init]');
        
        // Iterate over the inputs and assign values from the pasted string
        inputs.forEach((input, index) => {
            if (digits[index]) {
                input.value = digits[index];
                // Focus the next input after filling the current one
                const nextId = input.getAttribute('data-focus-input-next');
                if (nextId) {
                    document.getElementById(nextId).focus();
                }
            }
        });
    });
});
` >}}


    

        

            
            
        

        

            
            
        

        

            
            
        

        

            
            
        

        

            
            
        

        

            
            
        

    

    
Please introduce the 6 digit code we sent via email.



{{< /example >}}

## Number input with slider

This example can be used to set the value of a number input field by sliding the range slider component or by typing the value in the input field. The component uses the [Flowbite Range Slider](https://flowbite.com/docs/components/range-slider/).

{{< example github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" javascript=`
// Get the elements
var rangeInput = document.getElementById('price-range-input');
var currencyInput = document.getElementById('currency-input');

// Function to update the currency input
function updateCurrencyInput() {
currencyInput.value = rangeInput.value;
}

// Add event listener to the range input
rangeInput.addEventListener('input', updateCurrencyInput);
` >}}


    

        
        
        

            

                
            

            
        

    

    
    

        
        
        Min ($100)
        $500
        $1000
        Max ($1500)
    



{{< /example >}}

## Convert currency

Use this example of two number input fields and dropdowns to convert currency and even from fiat to crypto.

{{< example github="components/number-input.md" show_dark=true iframeHeight="290" disable_init_js="true" >}}


    

        

            
            

                
            

            
            
        

        
        

            
            

                
            

            
            
        

    

    

        
Last update: 20:45 AM, November 20, 2023

        
    



{{< /example >}}

## Advanced control buttons

This example can be used to add multiple number input fields with quantity selectors and control buttons to use for E-commerce UI similar to projects like AirBnb or Booking.

{{< example github="components/number-input.md" show_dark=true >}}


    
    

        
        
        

            
            Bedrooms
        

        
    

    
    

        
        
        

            
            Night stays
        

        
    

    
    

        
        
        

            
            Guests
        

        
    



{{< /example >}}

## Min and max values

By using the InputCounter object from the Flowbite JS API, you ca set the min and max values of a number input component by using the following data attributes:

- `data-input-counter-min` - set the minimum value of the input
- `data-input-counter-max` - set the maximum value of the input

These values will be enforced and validated whenever the user clicks on one of the buttons or tries to introduce the value manually.

{{< example github="components/number-input.md" show_dark=true >}}


    
    

        
        
        
    

    
Please select a 5 digit number from 0 to 9.



{{< /example >}}

## JavaScript behaviour

Use the **InputCounter** object from the Flowbite JS API to create a number input component with increment and decrement buttons that can be used to increase or decrease the value of the input.

### Object parameters

Use the object parameters from the InputCounter object to set the target, increment, and decrement elements as well as the options object.



  

      
          

              
                  Parameter
              
              
                  Type
              
              
                  Required
              
              
                  Description
              
          

      
      
          

              
                  targetEl
              
              
                  Element
              
              
                  Required
              
              
                  Pass the target input field element that will be incremented or decremented based on click event.
              
          

          

              
                  incrementEl
              
              
                  Element
              
              
                  Optional
              
              
                  Pass the increment button element that will increase the value of the target element based on click event.
              
          

          

              
                  decrementEl
              
              
                  Element
              
              
                  Optional
              
              
                  Pass the decrement button element that will decrease the value of the target element based on click event.
              
          

          

              
                  options
              
              
                Object
              
              
                  Optional
              
              
                  Set these options to set the minimum and maximum value of the input field and the callback functions.
              
          

          

                
                    instanceOptions
                
                
                    Object
                
                
                    Optional
                
                
                   Object of options that allows you to set a custom ID for the instance that is being added to the Instance Manager and whether to override or not an existing instance.
                
            

      
  




### Options

Use these optional options for the InputCounter object to set the minimum and maximum values of the input field and also to set callback functions for the increment and decrement events.



  

      
          

              
                  Option
              
              
                  Type
              
              
                  Description
              
          

      
      
          

              
                  minValue
              
              
                  Integer
              
              
                  Set the minimum value of the input field.
              
          

          

              
                  maxValue
              
              
                  Integer
              
              
                  Set the maximum value of the input field.
              
          

          

              
                  onIncrement
              
              
                  Function
              
              
                  Set a callback function when the item has been incremented.
              
          

          

              
                  onDecrement
              
              
                  Function
              
              
                  Set a callback function when the item has been decremented.
              
          

      
  




### Methods

Use the following methods of the InputCounter object to programmatically manipulate the behaviour of the input field.



  

      
          

              
                  Method
              
              
                  Description
              
          

      
      
        

              
                  getCurrentValue()
              
              
                  Use this method to get the current value of the input field.
              
          

          

              
                  increment()
              
              
                  Use this method on the InputCounter object to increment the value of the input field.
              
          

          

              
                  decrement()
              
              
                  Use this method on the InputCounter object to decrement the value of the input field.
              
          

          

              
                  updateOnIncrement(callback)
              
              
                  Use this method to set a callback function whenever the input field has been incremented.
              
          

          

              
                  updateOnDecrement(callback)
              
              
                  Use this method to set a callback function whenever the input field has been decremented.
              
          

      
  




### Example

Check out the following examples to learn how to create a new InputCounter object and how to set it up with custom options and programmatically use the methods available.

First of all, you need to set the object parameters where the target element is required and the other two are optional.

{{< code lang="javascript" file="number-input.js" icon="file" >}}
// set the target element of the input field
const $targetEl = document.getElementById('counter-input-example');

// optionally set the increment and decrement elements
const $incrementEl = document.getElementById('increment-button');

const $decrementEl = document.getElementById('decrement-button');

// optional options with default values and callback functions
const options = {
    minValue: 0,
    maxValue: null, // infinite
    onIncrement: () => {
        console.log('input field value has been incremented');
    },
    onDecrement: () => {
        console.log('input field value has been decremented');
    }
};

const instanceOptions = {
  id: 'counter-input-example',
  override: true
};
{{< /code >}}

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

{{< code lang="javascript" file="number-input.js" icon="file" >}}
import { InputCounter } from 'flowbite';

/*
 * $targetEl: required
 * $incrementEl: optional
 * $decrementEl: optional
 * options: optional
 */
const counterInput = new InputCounter($targetEl, $incrementEl, $decrementEl, options, instanceOptions);
{{< /code >}}

Now you can programmatically increment or decrement the input field using the methods of the InputCounter object.

{{< code lang="javascript" >}}
// get the current value of the input field
counterInput.getCurrentValue();

// increment the value of the input field
counterInput.increment();

// decrement the value of the input field
counterInput.decrement();
{{< /code >}}

### HTML Markup

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

{{< code lang="html" file="number-input.html" icon="file" >}}


    
    

        
        
        
    



{{< /code >}}

### TypeScript

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

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

{{< code lang="typescript" file="number-input.ts" icon="file" >}}
import { InputCounter } from 'flowbite';
import type { InputCounterOptions, InputCounterInterface } from 'flowbite';
import type { InstanceOptions } from 'flowbite';

// set the target element of the input field
const $targetEl: HTMLInputElement = document.getElementById('counter-input-example') as HTMLInputElement;

// optionally set the increment and decrement elements
const $incrementEl: HTMLElement = document.getElementById('increment-button');

const $decrementEl: HTMLElement = document.getElementById('decrement-button');

// optional options with default values and callback functions
const options: InputCounterOptions = {
    minValue: 0,
    maxValue: null, // infinite
    onIncrement: () => {
        console.log('input field value has been incremented');
    },
    onDecrement: () => {
        console.log('input field value has been decremented');
    }
};

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

/*
 * $targetEl: required
 * $incrementEl: optional
 * $decrementEl: optional
 * options: optional
 * instanceOptions: optional
 */
const counterInput: InputCounterInterface = new InputCounter(
    $targetEl,
    $incrementEl,
    $decrementEl,
    options,
    instanceOptions
);

// increment the value of the input field
counterInput.increment();

// decrement the value of the input field
counterInput.decrement();
{{< /code >}}


================================================
FILE: content/forms/phone-input.md
================================================
---
layout: docs
title: Tailwind CSS Phone Input - Flowbite
description: Use the phone number input component from Flowbite to set a phone number inside a form field and use a dropdown menu to select the country code based on various styles, sizes and colors
group: forms
requires_js: true
toc: true

previous: Number Input
previousLink: forms/number-input/
next: Select
nextLink: forms/select/
---

The phone number input component from Flowbite can be used to set a phone number inside a form field by using the native `type="tel"` attribute and also use a dropdown menu to select the country code.

The examples are built with the utility classes from Tailwind CSS and they are fully responsive, dark mode compatible and support RTL layouts and can be used for any type of web project.

## Default phone input

Use this component to set a phone number inside an input field by setting the `type="tel"` attribute.

{{< example github="components/phone-input.md" show_dark=true >}}


    
    

        

            
        

        
    

    
Select a phone number that matches the format.



{{< /example >}}

## Phone input country code

This example can be used to select the country code from a dropdown menu and set the phone number inside an input field and use the `pattern` attribute to validate the phone number.

{{< example github="components/phone-input.md" show_dark=true iframeHeight="360" >}}



    

        
        
        
        

            
        

    




{{< /example >}}

## Floating label input

Set a phone number inside an input field with a floating label inspired by Material UI from Google.

{{< example github="forms/phone-input.md" show_dark=true >}}


    

        
            
        
        
        
    



{{< /example >}}

## Verification code input

Use this example to send a verification code to the user's phone number for authentication.

{{< example github="components/phone-input.md" show_dark=true iframeHeight="360" disable_init_js="true" >}}


    

        
        
        
        

            
        

    

    
We will send you an SMS with a verification code.

    




{{< /example >}}

## Phone number select

Use this example to select one of your saved phone numbers from an application with a copy-paste feature.

{{< example github="components/phone-input.md" show_dark=true disable_init_js="true" javascript=`
window.addEventListener('load', function() {
    const clipboard = FlowbiteInstances.getInstance('CopyClipboard', 'phone-numbers');
    const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-phone');

    const $defaultIcon = document.getElementById('copy-icon');
    const $successIcon = document.getElementById('copy-icon-success');

    const $defaultTooltipMessage = document.getElementById('tooltip-text');
    const $successTooltipMessage = document.getElementById('tooltip-text-success');

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

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

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

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


    

        
        Manage numbers
    

    

        

            
        

        
        
    

    
Please set your primary phone number.



{{< /example >}}

## Authentication form

Use this example to authenticate users with a login form using a phone number instead of an email address.

{{< example github="components/phone-input.md" show_dark=true iframeHeight="390" disable_init_js="true" >}}


    
    

        
        
        
        

            
        

    

    

        
        
    

    

        
        
    

    


{{< /example >}}

## Advanced phone verification

Use this example to verify a phone number via SMS or phone call using a dropdown component.

{{< example github="components/phone-input.md" show_dark=true iframeHeight="360" disable_init_js="true" >}}


    

        
        
        
        

            
        

        
        
    

    


{{< /example >}}

================================================
FILE: content/forms/radio.md
================================================
---
layout: docs
title: Tailwind CSS Radio - Flowbite
description: Get started with the radio component to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors
group: forms
toc: true
requires_js: true

previous: Checkbox
previousLink: forms/checkbox/
next: Toggle
nextLink: forms/toggle/
---

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

Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the radio component.

## Radio example

Use the default example of a radio component with the checked and unchecked state.

{{< example github="forms/radio.md" show_dark=true >}}


    
    




    
    


{{< /example >}}

## Disabled state

Apply the `disabled` attribute to the radio component to disallow the selection for the user.

{{< example github="forms/radio.md" show_dark=true >}}


    
    




    
    


{{< /example >}}

## Radio link

Use this example if you want to include an anchor tag inside the label of the radio component.

{{< example github="forms/radio.md" show_dark=true >}}


    
    


{{< /example >}}

## Helper text

Get started with this example if you want to add a secondary text to the label for the radio component.

{{< example github="forms/radio.md" show_dark=true >}}


    

        
    

    

        
        
For orders shipped from $25 in books or $29 in other categories

    



{{< /example >}}

## Bordered

Use this example to show a radio input elements inside a card with border.

{{< example class="grid gap-6 md:grid-cols-2" github="forms/radio.md" show_dark=true >}}


    
    




    
    


{{< /example >}}

## Radio list group

This example can be used to show a list of radio buttons inside a grouped list.

{{< example github="components/radio.md" show_dark=true >}}

Identification


    
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 


{{< /example >}}

## Horizontal list group

Use this example to group up radio button components inside a list.

{{< example github="components/radio.md" show_dark=true >}}

Identification


    
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 
    
  • 
        
    
            
            
        
    
    
    • 


{{< /example >}}



  {{< requires_js >}}



## Radio in dropdown

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

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




{{< /example >}}

## Inline layout

Use the `flex` class for a wrapper element to horizontally align the radio elements.

{{< example github="forms/radio.md" show_dark=true >}}


    

        
        
    

    

        
        
    

    

        
        
    

    

        
        
    



{{< /example >}}

## Advanced layout

Use this example of a more advanced radio component to add more information and update the style of the whole card instead of just the circled dot.

{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}

How much do you expect to use each month?


    
    
  • 
        
        
    
    • 
    
  • 
        
        
    
    • 



{{< /example >}}

## Advanced layout with icons

Use this example to show an advanced layout of radio button elements with icons.

{{< example class="flex flex-wrap" github="forms/checkbox.md" show_dark=true >}}

Choose technology:


    
    
  • 
        
        
    
    • 
    
  • 
        
        
    
    • 
    
  • 
        
        
    
    • 



{{< /example >}}



================================================
FILE: content/forms/range.md
================================================
---
layout: docs
title: Tailwind CSS Range Slider - Flowbite
description: Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options
group: forms
toc: true
requires_js: true

previous: Toggle
previousLink: forms/toggle/
next: Floating Label
nextLink: forms/floating-label/
---

The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.

The examples on this page are all coded with Tailwind CSS and requires you to install Flowbite as a plugin inside your project to obtain all the necessary stylings.

## Range slider example

Get started with this default example with values from 1 to 100 and the default value of 50.

{{< example github="forms/range.md" show_dark=true >}}


{{< /example >}}

## Disabled state

Apply the `disabled` class to disallow the users from further selecting values.

{{< example github="forms/range.md" show_dark=true >}}


{{< /example >}}

## Min and max

Use the min and max attributes on the range component to set the limits of the range values.

{{< example github="forms/range.md" show_dark=true >}}


{{< /example >}}

## Steps

Use the step attribute on the range component to set the increment with which the values will change.

{{< example github="forms/range.md" show_dark=true >}}


{{< /example >}}

## Sizes

Apply the small, default, and large sizes for the range component by applying the `range-sm` and `range-lg` utility classes from Flowbite and Tailwind CSS.

{{< example github="forms/range.md" show_dark=true >}}








{{< /example >}}

## Labels

Use the following example to add labels to each value milestone of the range slider component.

{{< example github="forms/range.md" show_dark=true >}}


    
    
    Min ($100)
    $500
    $1000
    Max ($1500)


{{< /example >}}


================================================
FILE: content/forms/search-input.md
================================================
---
layout: docs
title: Tailwind CSS Search Input - Flowbite
description: Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes
group: forms
toc: true

previous: File Input
previousLink: forms/file-input/
next: Number Input
nextLink: forms/number-input/
---

The search input component can be used to let your users search through your website using string queries and it comes in multiple styles, variants, and sizes built with the utility classes from Tailwind CSS.

You will also find more advanced search components on this page including dropdown category selections, search buttons positioned inside the input field, voice search fields and more.

## Search bar example

Get started with the default example of a search input component including and icon and submit button.

{{< example github="forms/search-input.md" show_dark=true >}}

   
    
    

        

            
        

        
        
    



{{< /example >}}



  {{< requires_js >}}



## Search with dropdown

Use this search component with a dropdown to let your users select a category in which they would like the search query to be targeted in.

{{< example github="forms/search-input.md" show_dark=true iframeHeight="290" >}}


    

        
        
        
        
        
    



{{< /example >}}

## Simple search input

Use the simplest form of a search input component with an icon and a search button next to the text field.

{{< example github="forms/search-input.md" show_dark=true >}}

   
    
    

        

            
        

        
    

    


{{< /example >}}



  {{< requires_js >}}



## Location search

Use this example where you can select a country in which you want to search for an address or city.

{{< example github="forms/search-input.md" show_dark=true iframeHeight="290" >}}


    

        
        
        
        
        
    



{{< /example >}}

## Voice search

Get started with this example if you would like to enable voice search for your website and users.

{{< example github="forms/search-input.md" show_dark=true >}}

   
    
    

        

            
        

        
        
    

    


{{< /example >}}

## Advanced search input

Use this example to show multiple dropdown selection elements next to the search field.

{{< example github="forms/search-input.md" show_dark=true iframeHeight="290" >}}



    

        
        
        
        
        
        
        
    




{{< /example >}}

================================================
FILE: content/forms/select.md
================================================
---
layout: docs
title: Tailwind CSS Select - Flowbite
description: Get started with the select component to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants
group: forms
toc: true

previous: Phone Input
previousLink: forms/phone-input/
next: Textarea
nextLink: forms/textarea/
---

The select input component can be used to gather information from users based on multiple options in the form of a dropdown list and by browsing this page you will find multiple options, styles, sizes, and variants built with the utility classes from Tailwind CSS also available in dark mode.

## Select input example

Get started with the default example of a select input component to get a single option selection.

{{< example github="forms/select.md" show_dark=true >}}


  
  


{{< /example >}}

## Multiple options

Apply the `multiple` attribute to the select component to allow users to select one or more options.

{{< example github="forms/select.md" show_dark=true >}}


  
  


{{< /example >}}

## Size attribute

Use the size attribute for the select component to specify the number of visible options in the list.

{{< example github="forms/select.md" show_dark=true >}}


  
  


{{< /example >}}

## Disabled state

Apply the `disable` state to the select component to disallow the selection of new options.

{{< example github="forms/select.md" show_dark=true >}}


  
  


{{< /example >}}

## Underline select

Use the underline style for the select component as an alternative appearance.

{{< example github="forms/select.md" show_dark=true >}}


  
  


{{< /example >}}



  {{< requires_js >}}



## Select with dropdown

Use this example if you want to create a multi-level dropdown and select component combination.

{{< example github="forms/select.md" show_dark=true iframeHeight="340" >}}


  

      
        
      
      
  



{{< /example >}}

## Sizes

Get started with the small, default, and large sizes for the select component from the example below.

{{< example github="forms/select.md" show_dark=true >}}


  
  
  
  
  
  
  
  


{{< /example >}}

================================================
FILE: content/forms/textarea.md
================================================
---
layout: docs
title: Tailwind CSS Textarea - Flowbite
description: Use the textarea component as a multi-line text field input and use it inside form elements available in multiple sizes, styles, and variants
group: forms
toc: true

previous: Select
previousLink: forms/select/
next: Timepicker
nextLink: forms/timepicker/
---

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

From the examples on this page you will find multiple styles and variants of the textarea component coded with the utility classes from Tailwind CSS including a WYSIWYG editor, comment box, chatroom textarea, all available in dark mode as well. 

## Textarea example

Get started with the default example of a textarea component below.

{{< example github="forms/textarea.md" show_dark=true >}}


{{< /example >}}

## WYSIWYG Editor

If you want to add other actions as buttons alongside your textarea component, such as with a WYSIWYG editor, then you can use the example below.

{{< example github="forms/textarea.md" show_dark=true >}}


   

       

           

               

                   
                   
                   
                   
                   
               

               

                   
                   
                   
                   
               

           

           
           
       

       

           
           
       

   

    


{{< /example >}}

## Comment box

Most often the textarea component is used as the main text field input element in comment sections. Use this example to also apply a helper text and buttons below the textarea itself.

{{< example github="forms/textarea.md" show_dark=true >}}


   

       

           
           
       

       

            
           

                
                
                
                
           

       

   




Remember, contributions to this topic should follow our Community Guidelines.

{{< /example >}}

## Chatroom input

If you want to build a chatroom component you will usually want to use a textarea element to allow users to write multi-line chunks of text.

{{< example github="forms/textarea.md" show_dark=true >}}


    
    

        
        
        
            
    



{{< /example >}}


================================================
FILE: content/forms/timepicker.md
================================================
---
layout: docs
title: Tailwind CSS Timepicker - Flowbite
description: Use the timepicker component from Flowbite to select the time of the day in terms of hours, minutes and even seconds using an input selector based on Tailwind CSS
group: forms
toc: true
requires_js: true

previous: Textarea
previousLink: forms/textarea/
next: Toggle
nextLink: forms/toggle/
---

The timepicker component from Flowbite can be used to choose the hours and minutes of a given day through the usage of input fields such as the native HTML time field or even checkbox fields with predefined time interval which are popularly used for calendar event creation.

The examples on this page are all built with Tailwind CSS and some of the examples require you to install the Flowbite JavaScript dependency to make the interactive UI components functional such as the datepicker, dropdowns, modals and the drawers.

The timepicker component is often used together with a datepicker so the more advanced examples on this page show you a combination of these two components where you can select both the date (year, month and day) and then the time of the day for the event.

## Default timepicker

Use this example to show a simple input field with the native browser timepicker.

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


    
    

        

            
        

        
    



{{< /example >}}

## Timepicker with icon

This example can be used to select a time via an input field where you can add an icon to the input group.

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


    
    

        
        
            
        
    



{{< /example >}}

## Timepicker with dropdown

Use this example to show a timepicker together with a dropdown menu where you can add options such as selecting the timezone or the duration of an event in minutes or hours.

{{< example github="components/timepicker.md" iframeHeight="300" show_dark=true >}}


    
    

        
        
        
    



{{< /example >}}

## Timepicker with select

Use this example to show a select input next to the timepicker to select an option like a timezone.

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


    
    

        
        
    



{{< /example >}}

## Timepicker range selector

Use this example to select a time interval using two input field often used for the duration of an event.

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


    

        
        

            

               
            

            
        

    

    

        
        

            

               
            

            
        

    



{{< /example >}}

## Timerange with dropdown

This example can be used to show the timerange picker inside a dropdown only when clicking on a button.

{{< example class="flex justify-center items-center" github="components/timepicker.md" show_dark=true iframeHeight="260" javascript=`
const dropdown = FlowbiteInstances.getInstance('Dropdown', 'dropdownTimepicker');
const $saveTimeButton = document.getElementById('saveTimeButton');

$saveTimeButton.addEventListener('click', function() {
    // save time code and then hide the dropdown
    dropdown.hide();
});
` >}}




{{< /example >}}

## Timerange picker with toggle

Use this example to show or hide the timepicker when clicking on an trigger element.

{{< example class="flex items-center justify-center" github="components/timepicker.md" show_dark=true iframeHeight="190" >}}


    
    


{{< /example >}}

## Inline timepicker buttons

This is an advanced example that you can use to show the details of an event and select a date of the event based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select the time using a predefined set of time intervals based on checkbox elements.

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

Digital Transformation



   

      
      30.06.2024
   

   

      
      California, USA
   





   

      
Participants

      

         
         
         
         +99
      

   

   

      
Duration

      30 min
   

   

      
Meeting Type

      Web conference
   





   

   

      
Wednesday 30 June 2024

      
      
      
    
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
         
  • 
            
            
         
    • 
      

   



{{< /example >}}

## Modal with timepicker

Use this example to select a date and time inside of a modal component based on the [Flowbite Datepicker](https://flowbite.com/docs/components/datepicker/) and select a time interval using checkbox elements with predefined time values for event time scheduling.

{{< example github="components/timepicker.md" class="flex justify-center" show_dark=true iframeHeight="880" >}}




{{< /example >}}

## Drawer with timepicker

Use this example to show multiple time interval selections inside of a drawer component to schedule time based on multiple entries (ie. days of the week) using the native browser time selection input element.

{{< example github="components/timepicker.md" class="flex justify-center" show_dark=true iframeHeight="880" >}}



   





   

      

         
         Time schedule
      

      
   

   

      

         

            Business hours
            
         

         
Enable or disable business working hours for all weekly working days

      

      

           
            
      

      

         

            

               
               
            

            

               
               

                  

                        
                  

                  
               

            

            

               
               

                  

                        
                  

                  
               

            

            

               
            

         

      

      

         

            

               
               
            

            

               
               

                  


                  

                  
               

            

            

               
               

                  


                  

                  
               

            

            

               
            

         

      

      

         

            

               
               
            

            

               
               

                  


                  

                  
               

            

            

               
               

                  


                  

                  
               

            

            

               
            

         

      

      

         

            

               
               
            

            

               
               

                  


                  

                  
               

            

            

               
               

                  


                  

                  
               

            

            

               
            

         

      

      

         

            

               
               
            

            

               
               

                  


                  

                  
               

            

            

               
               

                  


                  

                  
               

            

            

               
            

         

      

      
      

         
         
      

   



{{< /example >}}


================================================
FILE: content/forms/toggle.md
================================================
---
layout: docs
title: Tailwind CSS Toggle - Flowbite
description: Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors
group: forms
toc: true

previous: Timepicker
previousLink: forms/timepicker/
next: Range Slider
nextLink: forms/range/
---

The toggle component can be used to receive a simple "yes" or "no" type of answer from the user by choosing a single option from two options available in multiple sizes, styles, and colors coded with the utility classes from Tailwind CSS and with dark mode support.

## Toggle example

Get started with the default toggle component example as a checkbox element to receive a true or false selection from the user.

{{< example class="flex justify-center" github="forms/toggle.md" show_dark=true >}}

{{< /example >}}

## Checked state

Apply the `checked` attribute to the toggle component to activate the selection by default.

{{< example class="flex justify-center" github="forms/toggle.md" show_dark=true >}}

{{< /example >}}

## Disabled state

Apply the `disabled` attribute to disallow the users from making any further selections.

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



{{< /example >}}

## Double labels

Use this example to show labels on the left and right of the toggle component.

{{< example class="flex justify-center" github="forms/toggle.md" show_dark=true >}}

{{< /example >}}

## Toggle with icons

This example can be used to show [SVG icons](https://flowbite.com/icons/) on either side of the toggle component.

{{< example class="flex justify-center" github="forms/toggle.md" show_dark=true >}}

{{< /example >}}

## Toggle card

This example can be used to add a toggle input field inside a card element with a description.

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

{{< /example >}}

## Toggle card with icon

This example can be used to add a toggle input field inside a card element with an icon.

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

{{< /example >}}

## Colors

Change the color of the toggle component by updating the color classes of `peer-focus` and `peer-checked`.

{{< example class="flex inline-flex-wrap justify-center" github="forms/toggle.md" show_dark=true >}}











{{< /example >}}

## Sizes

Get started with small, default, or large sizes of the toggle component based on your needs.

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




{{< /example >}}

================================================
FILE: content/getting-started/_index.html
================================================
---
layout: redirect
sitemap_exclude: true
redirect: "/docs/getting-started/introduction/"
---

================================================
FILE: content/getting-started/angular.md
================================================
---
layout: docs
title: Tailwind CSS Angular - Flowbite
description: Read this guide to learn how to install Tailwind CSS with Angular and set up the UI components from Flowbite to build enterprise-level web applications
group: getting-started
toc: true
requires_angular: true

previous: Svelte
previousLink: getting-started/svelte/
next: Astro
nextLink: getting-started/astro/
---

[Angular](https://angular.io/) is a free and open-source single-page web framework written in TypeScript used by millions of developers and projects that can help you build and scale your web applications by using features like components, routing, form management, API calls interface, and more.

The framework was released by the Google team in 2010 and it is used by websites such as Upwork, Forbes, Gmail, YouTube, Udacity, and more including most of the Google Suite apps.

Follow this guide to learn how to set up a new Angular project with Tailwind CSS and integrate the open-source UI components from the Flowbite Library.

## Create Angular project

The recommended and quickest way to get started with creating a new Angular project is by installing the official CLI tool by running the following command in your terminal:

{{< code lang="bash" >}}
npm install -g @angular/cli
{{< /code >}}

This command will make the Angular CLI available on your local computer.

1. Run the following command to create a new Angular project:

{{< code lang="bash" >}}
ng new flowbite-app
{{< /code >}}

You can follow the instructions from the CLI prompts to select the options that you want to choose when creating a new project - you should select "CSS" when asked.

This command will create a new folder called `flowbite-app` where you have all the necessary source files to start a new local and production-ready Angular project.

2. Run the `ng serve --open` command in your terminal to start a local server:

{{< code lang="bash" >}}
ng serve --open
{{< /code >}}

This will create a local development server and automatically open a new tab on the `localhost:4200` port by adding the `--open` flag to the command.

Congratulations! Now you have a fully working Angular project installed and configured.

## Install Tailwind CSS

Now that you've successfully installed and configured an Angular project we can proceed with installing the most popular utility-first CSS framework called Tailwind.

1. Install Tailwind CSS and Post CSS via NPM by running the following command:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/postcss postcss --save
{{< /code >}}

This command will install all the dependencies of Tailwind CSS available in your `package.json` file.

2. Create a `.postcssrc.json` file in the root folder of your project and include the Tailwind PostCSS plugin:

{{< code lang="javascript" file=".postcssrc.json" icon="file" >}}
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}
{{< /code >}}

3. Import the core Tailwind directive inside the `styles.css` file:

{{< code lang="css" file="styles.css" icon="file" >}}
/* You can add global styles to this file, and also import other style files */

@import "tailwindcss";
{{< /code >}}

5. Start a local development server on Angular by running `ng serve --open`. If you already had one open then you need to restart it to allow Angular to internally set up the new configuration.

Congratulations! You can now start using the utility classes from Tailwind CSS inside your Angular project.

## Install Flowbite

Now that you have both Angular and Tailwind CSS configured for your web application project you can proceed by installing the Flowbite Library to start leveraging the interactive UI components such as navbars, modals, cards, buttons, and more to build user interfaces faster with Tailwind CSS support.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@source "../node_modules/flowbite";
{{< /code >}}

5. Update the `app.component.ts` file to use the `initFlowbite` function to enable the interactive components via data attributes:

{{< code lang="javascript" file="app.component.ts" icon="file" >}}
import { Component } from '@angular/core';
import { OnInit } from '@angular/core';
import { initFlowbite } from 'flowbite';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'web-app';

  ngOnInit(): void {
    initFlowbite();
  }
}
{{< /code >}}

This will allow you to enable components such as the modals, navigation bars, dropdowns to dynamically set up the functionality via our data attributes interface.

## Using with Angular SSR

To enable using Flowbite with SSR (Server-Side Rendering) you need to create a custom service that will handle the dynamic import of Flowbite:

{{< code lang="javascript" file="flowbite.service.ts" icon="file" >}}
// src/app/services/flowbite.service.ts
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class FlowbiteService {
  constructor(@Inject(PLATFORM_ID) private platformId: any) {}

  loadFlowbite(callback: (flowbite: any) => void) {
    if (isPlatformBrowser(this.platformId)) {
      import('flowbite').then(flowbite => {
        callback(flowbite);
      });
    }
  }
}
{{< /code >}}

**Important**: if you are using SSR make sure that this is the only way you're importing Flowbite in your Angular application to prevent the document object not being available on the server side.

After that, you can use this service in your component to start using the Flowbite API and data attributes:

{{< code lang="javascript" file="some-component.component.ts" icon="file" >}}
// src/app/components/some-component/some-component.component.ts
import { Component, OnInit } from '@angular/core';
import { FlowbiteService } from '../../services/flowbite.service';

@Component({
  selector: 'app-some-component',
  templateUrl: './some-component.component.html',
  styleUrls: ['./some-component.component.css']
})
export class SomeComponent implements OnInit {
  constructor(private flowbiteService: FlowbiteService) {}

  ngOnInit(): void {
    this.flowbiteService.loadFlowbite((flowbite) => {
      initFlowbite();
    });
  }
}
{{< /code >}}

This will prevent the "document is undefined" error that happens after upgrading to `v2.4.1` for SSR applications.

## UI components

Now that you have installed all of the frameworks and libraries you can start using the whole collection of UI components and templates from the [Flowbite UI Library](https://flowbite.com/docs/getting-started/introduction/) and [Blocks](https://flowbite.com/blocks/marketing/feature/).

Let's first start by copy-pasting one of the default [modal component](https://flowbite.com/docs/components/modal/) examples from the documentation and add it inside the `app.component.html` file:

{{< code lang="html" file="app.component.html" icon="file" >}}





{{< /code >}}

Adding this code should create a toggle button which on the click event should show a modal component. The interactivity is enabled via the data attributes interface from Flowbite.

### Data attributes

The Flowbite Library is by default powered by the data attributes interface that you can use to easily set up interactive components by targeting elements directly from your template components.

Let's add a [dropdown component](https://flowbite.com/docs/components/dropdowns/) from the UI library:

{{< code lang="html" file="app.component.html" icon="file" >}}



{{< /code >}}

This example should also show a button that on the click event will show a dropdown menu that you can easily update via Tailwind CSS and the data attributes API.

### JavaScript API

Alternatively to the data attributes strategy you can also choose to programmatically set up the interactivity by directly importing the components from Flowbite and use the methods and options described in the documentation of Flowbite at the end of each page.

For example, here's how you can set up a carousel component directly with JavaScript:

{{< code lang="javascript" file="app.component.ts" icon="file" >}}
import { Carousel } from "flowbite";
import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";

const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');

$prevButton.addEventListener('click', () => {
    carousel.prev();
});

$nextButton.addEventListener('click', () => {
    carousel.next();
});

const items: CarouselItem[] = [
    {
        position: 0,
        el: document.getElementById('carousel-item-1')
    },
    {
        position: 1,
        el: document.getElementById('carousel-item-2')
    },
    {
        position: 2,
        el: document.getElementById('carousel-item-3')
    },
    {
        position: 3,
        el: document.getElementById('carousel-item-4')
    },
];

const options: CarouselOptions = {
    defaultPosition: 1,
    interval: 3000,
    
    indicators: {
        activeClasses: 'bg-white dark:bg-gray-800',
        inactiveClasses: 'bg-white/50 dark:bg-gray-800/50 hover:bg-white dark:hover:bg-gray-800',
        items: [
            {
                position: 0,
                el: document.getElementById('carousel-indicator-1')
            },
            {
                position: 1,
                el: document.getElementById('carousel-indicator-2')
            },
            {
                position: 2,
                el: document.getElementById('carousel-indicator-3')
            },
            {
                position: 3,
                el: document.getElementById('carousel-indicator-4')
            },
        ]
    },
    
    // callback functions
    onNext: () => {
        console.log('next slider item is shown');
    },
    onPrev: ( ) => {
        console.log('previous slider item is shown');
    },
    onChange: ( ) => {
        console.log('new slider item has been shown');
    }
};

const carousel: CarouselInterface = new Carousel(items, options);

carousel.cycle()

// set event listeners for prev and next buttons
const $prevButton = document.getElementById('data-carousel-prev');
const $nextButton = document.getElementById('data-carousel-next');

$prevButton.addEventListener('click', () => {
    carousel.prev();
});

$nextButton.addEventListener('click', () => {
    carousel.next();
});
{{< /code >}}

You also need to have the following HTML markup available inside your codebase and Angular template files:

{{< code lang="html" file="app.component.html" icon="file" >}}


    
    

         
        
        
        
        
        
        
        
    

    
    

        
        
        
        
    

    
    
    


{{< /code >}}

In this case the advantage is that you can control the behaviour of the components as you wish being able to override the default settings.

### Using TypeScript

The Flowbite UI components also supports TypeScript and you can import the types and apply them when using the JavaScript API programmatically.

For example, here's how you can import the types for the Carousel component:

{{< code lang="javascript" file="app.component.ts" icon="file" >}}
import type { CarouselItem, CarouselOptions, CarouselInterface } from "flowbite";

// ... other code

const carousel: CarouselInterface = new Carousel(items, options);
{{< /code >}}

You can read more about using [Flowbite and TypeScript](https://flowbite.com/docs/getting-started/typescript/) by following our documentation guide.

## Angular starter project

We built a free and open-source [starter project](https://github.com/themesberg/tailwind-angular-starter) on GitHub that you can clone to use as a reference for this guide and for your own Angular web application configured with Flowbite and Tailwind CSS.

## Flowbite Angular Library

The awesome open-source community from Flowbite also started working on a standalone [Flowbite Angular](https://github.com/themesberg/flowbite-angular) library with native components where you can also contribute to the development of the project until a stable release is achieved.

================================================
FILE: content/getting-started/astro.md
================================================
---
layout: docs
title: Tailwind CSS Astro - Flowbite
description: Learn how to install Astro with Tailwind CSS and Flowbite and start building modern websites with a lightning fast and content-focused web framework
group: getting-started
toc: true
requires_astro: true

previous: Angular
previousLink: getting-started/angular/
next: Remix
nextLink: getting-started/remix/
---

[Astro](https://astro.build) is a full-stack web framework for building lightning-fast and content-focused websites featuring component islands, server-first API design, edge-ready deployments and supports hundreds of integrations with technologies like Tailwind CSS, Flowbite, React, Vue, Svelte, and more.

The Astro framework is used by thousands of reputable companies and projects such as Firebase, NordVPN, The Guardian, Trivago and others and it also received a $7M seed investment funding at the beginning of 2022 which guarantees continuous support and development of the technology.

Follow the next steps in this tutorial to learn how to create a new Astro project, install Tailwind CSS and learn how to leverage the UI components from Flowbite to build websites even quicker.

## Requirements

Before you continue make sure that you have [Node.js](https://nodejs.org/en/) (`v16.12.0` or higher) installed on your local machine and production server to install all required dependencies.

We also highly recommend you to use VS Code as your standard editor and to install the official [language support extension for Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) from the VS Marketplace released by the original authors.

## Create an Astro project

1. Create a new Astro project running the following command using NPM:

{{< code lang="bash" >}}
npm create astro@latest flowbite-project
cd flowbite-project
{{< /code >}}

This command will prompt you with some questions and will create a local project based on your answers.

2. Run the following command to start a local development server:

{{< code lang="bash" >}}
npm run dev
{{< /code >}}

This will make the project accessible via the browser on `http://localhost:3000`.

3. To create a production build of the project run the following command in your terminal:

{{< code lang="bash" >}}
npm run build
{{< /code >}}

One of the biggest advantages of Astro is the small build size that will be available once deployed to production via the build command - this way the website should load much quicker than using older technologies.

## Install Tailwind CSS

Now that you have installed and configured a working Astro project we can proceed with installing the Tailwind CSS integration based on the official package.

1. Run the following command to install Tailwind CSS and create a configuration file using the NPX command:

{{< code lang="bash" >}}
npx astro add tailwind
{{< /code >}}

This command will automatically install Tailwind CSS in the `package.json` file, it will also configure the compilation process and create a new `tailwind.config.cjs` file that configures the template paths.

2. Import the `global.css` file in your `Layout.astro` file:

{{< code lang="html" file="Layout.astro" icon="file" >}}
---
import "../styles/global.css";
---
{{< /code >}}

Now you can write Tailwind CSS classes inside any of the template files and the changes will be applied by generating a `global.css` file and including it on every page.

## Install Flowbite

After you've installed both Astro and Tailwind CSS you can also choose to use the free and open-source UI components from Flowbite to make developing websites and user interfaces even faster with interactive elements like navbars, modals, dropdowns, and more.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `global.css` CSS file:

{{< code lang="css" file="global.css" icon="file" >}}
@import "flowbite/src/themes/default";
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="global.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your `global.css` file:

{{< code lang="css" file="global.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

Now that you've configured the styles for CSS from Flowbite you can now proceed by installing the JS.

## Flowbite components

To enable the interactive components you need to also include Flowbite's JavaScript file which you can do by either including it in the main `Layout.astro` file as a CDN file or importing the Flowbite module inside the 

### Include via CDN

In the `Layout.astro` file add the following script tag just before the end of the `` tag:

{{< code lang="html" file="Layout.astro" icon="file" >}}

{{< /code >}}

This allows you to use the data attributes from the Flowbite component examples and will make them interactive automatically without needing to write custom JavaScript and you can just copy-paste them from the Flowbite Docs.

### ESM/CJS imports

Alternatively, you can import standalone components such as the Modal and set up the event listeners yourself in a local `
{{< /code >}}

Make sure that you have the necessary HTML markup for the event listeners and elements described in the example above inside the `` tags from Astro:

{{< code lang="html" file="some-component.astro" icon="file" >}}

    
    
    
    

{{< /code >}}

In this example, the modal will be shown when the button is clicked and the modal component will also be initialized based on the options that you've provided.

You can browse the full collection of the Flowbite components and check the "JavaScript Behaviour" section of the page to learn all of the options, methods, and objects that you can leverage.

## Astro starter project

We also built a free and open-source [Flowbite and Astro starter project](https://github.com/themesberg/tailwind-astro-starter) on GitHub that you can use for reference and examples based on this integration guide to get started faster with working with Astro, Tailwind CSS and the UI components from Flowbite.

## Astro admin dashboard

You can check out our open-source [Astro admin dashboard](https://github.com/themesberg/flowbite-astro-admin-dashboard) project on GitHub to leverage CRUD layouts and API calls predefined with the Flowbite Library, Tailwind CSS framework and the Astro best practices and framework setup.

================================================
FILE: content/getting-started/blazor.md
================================================
---
layout: docs
title: Tailwind CSS Blazor (.NET) - Flowbite
description: Learn how to install Tailwind CSS with Flowbite for your Blazor (.NET) project and start developing modern web applications based on the full-stack framework
group: getting-started
toc: true
requires_blazor: true

previous: Flask
previousLink: getting-started/flask/
next: HUGO
nextLink: getting-started/hugo/
---

[Blazor](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor) is an open source .NET framework for building dynamic and interactive front-ends for your applications with HTML, C#, and Razor templates. Blazor allows you to compose components directly for your server or for the client side. This flexibility enables developers to create fullstack web and mobile applications with a single-page UI framework.

Typically, most frontend frameworks use JavaScript under the hood but with Blazor, you can build both front-ends and back-ends with C#. Developers who are well versed in C# can easily build fullstack applications without switching to a different framework.  

More companies are adopting Blazor into their development workflows because a developer can write client side and server side logic with only C# and .NET. Some examples include  GE Aviation, BurnRate, The Postage, and Pernod Ricard. 

Blazor provides all the scaffolding, abstractions, tooling and optimizations you need on a project. 

## Requirements

In this guide, you will learn how to build a new Blazor Project, and how to integrate Flowbite UI components into your application. We'll use a modal component for this exercise to demonstrate a real use case. 

You'll need to install and configure the .NET SDK, Tailwind CSS, Blazor and Flowbite into your application. Ensure you have installed NPM and Node.js on your local environment. Let's get started!

## Create a new Blazor project

Start by downloading and installing the .NET SDK. The SDK allows us to develop apps with .NET frameworks. The Blazor website detects which version you'll need for your local environment.

1. Start by installing the Microsoft package repository that contains the package signing key:

{{< code lang="bash" >}}
wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb
{{< /code >}}

If you're running on MacOS or another Linux distribution, visit the [Microsoft website](https://learn.microsoft.com/en-us/dotnet/core/install/macos) to learn how to install the SDK on your local environment. .NET can be installed on Windows, MacOS, and Linux.

2. Install the .NET SDK (software development kit):

{{< code lang="bash" >}}
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-7.0
{{< /code >}}

You can also install the .NET SDK via HomeBrew:

{{< code lang="bash" >}}
brew install --cask dotnet
{{< /code >}}

Open your terminal and run this command to confirm a successful installation:

{{< code lang="bash" >}}
-$ dotnet
{{< /code >}}

This is the output you should see to confirm that you installed the .NET SDK successfully:

{{< code lang="bash" >}}
Usage: dotnet [options]
Usage: dotnet [path-to-application]

Options:
  -h|--help         Display help.
  --info            Display .NET information.
  --list-sdks       Display the installed SDKs.
  --list-runtimes   Display the installed runtimes.

path-to-application:
  The path to an application .dll file to execute.
{{< /code >}}

Run this command in your terminal to create a new Blazor WASM project.

{{< code lang="bash" >}}
dotnet new blazorwasm
{{< /code >}}

Run this command in your terminal to launch your application and watch for changes:

{{< code lang="bash" >}}
dotnet watch
{{< /code >}}

Your terminal will show that your app is listening on `http://localhost:` and should launch on your web browser. You can also click on the port to run your application. 

Congratulations! You have now installed and run your first Blazor project. 

In the next section, we will configure Tailwind CSS with Blazor.

## Install Tailwind CSS

There are two ways to install Tailwind in a Blazor Project: by using the Tailwind CLI or PostCSS.

PostCSS helps in transforming `tailwindcss` to styling that is relevant to your project. It also helps you remove unnecessary styling which helps in reducing the size of your files.  

1. Start by installing the Tailwind CSS packages using NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/cli --save-dev
{{< /code >}}

2. Next, create an `input.css` file in the `wwwroot/css/` folder and import the following directive:

{{< code lang="css" file="input.css" icon="file" >}}
@import "tailwindcss";
{{< /code >}}

3. Go to your terminal and run the Tailwind CLI to generate the output CSS watch for changes in your project:

{{< code lang="bash" >}}
npx tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --watch
{{< /code >}}

4. Add the new `output.css` CSS reference to the `index.html` file in the `wwwroot/` folder:

{{< code lang="html" file="index.html" icon="file" >}}




    
    
    tailwind-4-blazor-starter
    
    
    

    
    
    

    
    

{{< /code >}}

5. Remove all of the other CSS file references from the `index.html` file:

{{< code lang="html" file="index.html" icon="file" >}}




    
    
    tailwind-4-blazor-starter
    

    
    
    
    

    

    

    
    
    

{{< /code >}}

6. Finally, run `dotnet watch` to start adding Tailwind classes to your Blazor project. 

You have now successfully created:

- a new Blazor project
- installed and configured Tailwind CSS with Blazor

Up next, we'll install and configure Flowbite in our Blazor project. We'll also showcase how to use the Flowbite UI components in a Blazor project through a dropdown component demo. 

## Install Flowbite

Flowbite is an open-source UI component library that is built with Tailwind CSS and vanilla JavaScript. Here's how you can install and configure it by following these steps to make it work with our Blazor project:

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

Now you have installed Flowbite and the styles associated with it. Please follow the next steps to make the interactive JS components work with your Blazor project.

## WASM integration

To use Flowbite with Blazor WebAssembly (WASM), you will need to setup the [Flowbite init functions](https://flowbite.com/docs/getting-started/quickstart/#init-functions) using an [interop layer](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/?view=aspnetcore-7.0) that ensures the DOM rendering before applying the event listeners via the data attributes API.

1. First, you need to create a new `flowbite-interop.js` file inside `wwwroot/` and add the following code:

{{< code lang="javascript" file="flowbite-interop.js" icon="file" >}}
window.flowbiteInterop = {
    initializeFlowbite: function () {
        return initFlowbite();
    }
};
{{< /code >}}

2. After that, create a new `Services/FlowbiteService.cs` service inside your Blazor project:

{{< code lang="csharp" file="Services/FlowbiteService.cs" icon="file" >}}
using Microsoft.JSInterop;

namespace tailwind_4_blazor_starter.Services;

public interface IFlowbiteService
{
    ValueTask InitializeFlowbiteAsync();
}

public class FlowbiteService : IFlowbiteService
{
    private readonly IJSRuntime _jsRuntime;

    public FlowbiteService(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async ValueTask InitializeFlowbiteAsync()
    {
        await _jsRuntime.InvokeVoidAsync("flowbiteInterop.initializeFlowbite");
    }
}
{{< /code >}}

This creates a reusable service for all of your Blazor WASM pages.

3. Register the newly created service in your `Program.cs` file:

{{< code lang="csharp" file="Program.cs" icon="file" >}}
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using tailwind_4_blazor_starter;

// add this
using tailwind_4_blazor_starter.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add("#app");
builder.RootComponents.Add("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

// add this
builder.Services.AddScoped();

await builder.Build().RunAsync();
{{< /code >}}

4. Import the Flowbite Javascript file and the `flowbite-interop.js` file in your `index.html` file:

{{< code lang="html" file="index.html" icon="file" >}}
  
  
  
  

{{< /code >}}

5. Create a new `FlowbitePage.cs` file inside the `Pages` folder:

{{< code lang="csharp" file="FlowbitePage.cs" icon="file" >}}
using Microsoft.AspNetCore.Components;
using tailwind_4_blazor_starter.Services;

namespace tailwind_4_blazor_starter.Pages;

public abstract class FlowbitePage : ComponentBase
{
    [Inject]
    protected IFlowbiteService FlowbiteService { get; set; } = default!;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await FlowbiteService.InitializeFlowbiteAsync();
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}
{{< /code >}}

6. Use the inheritance directive in your pages to load the Flowbite JS components:

{{< code lang="razor" file="Home.razor" icon="file" >}}
@page "/"

@inherits FlowbitePage

Home


{{< /code >}}

Congratulations! You have now integrated the interactive JS components from Flowbite with a Blazor WASM.

## UI components for Blazor

Now that you have successfully installed Blazor.NET, Tailwind CSS and Flowbite, you can start using Flowbite's UI components such as navbars, buttons, and modals in your project.

Copy and paste this [dropdown component example](https://flowbite.com/docs/components/dropdowns/) into your `Pages/Home.razor` file:

{{< code lang="html" file="Home.razor" icon="file" >}}
@page "/"

Home





{{< /code >}}

Now that you've set up Flowbite with Blazor you can explore the whole collection of UI components from the [Flowbite Library](https://flowbite.com/docs/getting-started/introduction/) or use the [Flowbite Blocks](https://flowbite.com/blocks/) collection to start building websites.

## Blazor starter project

The open-source community created an [open-source Blazor starter project](https://github.com/themesberg/tailwind-blazor-starter) that you can clone and use as a starting point for building websites with Blazor, .NET, Tailwind CSS and Flowbite.

There's also an official [Flowbite Blazor](https://github.com/themesberg/flowbite-blazor) UI library that the open-source community is working on which should be the native solution for Blazor and .NET applications. Contributions are more than welcome!

================================================
FILE: content/getting-started/build-tools.md
================================================
---
layout: redirect
sitemap_exclude: true
redirect: "/docs/getting-started/quickstart/"
---

================================================
FILE: content/getting-started/changelog.md
================================================
---
layout: docs
title: Flowbite - Changelog
description: Read more about the releases made for Flowbite from the official changelog
group: getting-started
toc: true

previous: License
previousLink: getting-started/license/
next: React
nextLink: getting-started/react/
---

## Changelog

We strive to keep a good accountability of all of the version changes that we make for the Flowbite library.

### v4.0.1

- added datepicker styles via themes and variables
- fixed and refactored components after theming update

### v4.0.0

- introduced 5 custom themes (modern, minimal, playful, enterprise, mono)
- colors are now set via CSS variables as recommended by Tailwind v4
- removed 50% of HTML classes by moving dark mode to CSS variables
- added new components for cards, checkboxes, radios, and more
- improved the design of all components to match the new themes
- redesigned the documentation layout to be more user-friendly

### v3.1.2

- create themes folder for setting Tailwind variables

### v3.1.1

- fix CSS variables in plugin

### v3.1.0

- use CSS variables for colors
- remove setting dark mode by default from plugin

### v3.0.0

- upgraded Tailwind to v4

### v2.5.2

- released WYSIWYG plugin component

### v2.5.1

- fix plugin import error for the config file

### v2.5.0

- added new datatables plugin and examples
- other minor bug fixes and improvements

### v2.4.1

- the datepicker is now a core component of Flowbite and has API methods, events, and options
- updated the documentation for the datepicker component and related integration guides
- minor visual bug fixes and improvements

Note: if you're using Nuxt or Angular with SSR please check the new guides:

- [Nuxt guide](https://flowbite.com/docs/getting-started/nuxt-js/#data-attributes)
- [Angular guide](https://flowbite.com/docs/getting-started/angular/#using-with-angular-ssr)

These should be the only ways you import Flowbite since we need to make sure that the client (ie. browser) is available.

### v2.3.0

- added new "copy to clipboard" component and examples
- added new JavaScript tab to the documentation examples
- update dependency to Tailwind CSS `v3.4.1`
- fixed carousel component behavior when there's only one image
- added new data attribute to set active and inactive classes for tabs
- Ruby on Rails integration fix for turbo load
- minor bug fixes and improvements

### v2.2.0

- added new number input component examples
- created a new InputCounter object for the Flowbite JS API

### v2.1.1

- fix the `InstanceOptions` and `EventListenerInstance` type exports for TypeScript

### v2.1.0

This update adds [full RTL support](https://flowbite.com/docs/customize/rtl/) to all of the UI components from Flowbite and also provides and update to the Instance Manager API which now allows you to set custom id's as the 4th parameter of each object class.

- updated to Tailwind CSS `v3.3.5`
- added full RTL support to all UI components
- updated the JS API and Instance Manager to allow setting custom id's
- added new vertical tabs component example
- added three next modal component examples
- fixed responsive wrapping issues for the table components
- other minor bug fixes and improvements

### v2.0.0

This update introduces a new instance manager feature that allows you manage all of the interactive components from a single place. This is useful if you want to programmatically show or hide a modal, popover, or tooltip. This also works if you use the data attributes interface.

This change introduces a few breaking changes to the JavaScript API when creating objects:

- new `$carouselEl` HTML element when creating a `Carousel` object as the first parameter
- new `$accordion` HTML element when creating a `Accordion` object as the first parameter
- new `$tabsEl` HTML element when creating a `Tabs` object as the first parameter

The breaking changes do not apply to the data attributes interface, only for objects created programmatically via JavaScript.

### v1.8.1

- fix `apexcharts` safelist warning in console

### v1.8.0

- added new chart components
- enable or disable styles via the Flowbite Plugin
- added new API option to the dropdowns to prevent closing when clicking on certain elements
- small bug fixes and improvements overall

### v1.7.0

- integrate new [Flowbite Icons](https://flowbite.com/icons/) with all UI components
- added new pagination examples and sizes
- improved spacing and alignment for all buttons with icons
- improved examples for popovers, toasts, and modals
- updated docs and website icons
- update Svelte docs for Svelte 4.0

### v1.6.6

- new device mockups component
- add nested accordions feature ([#266](https://github.com/themesberg/flowbite/issues/266) issue fixed by (@jneuendorf)[https://github.com/jneuendorf])
- make init functions (ie. `initDropdowns`, `initFlowbite`) available via the `window` object
- fix Nuxt.js documentation config path for Tailwind CSS

### v1.6.5

- New gallery component
- New jumbotron component
- LiveView support ([issue #486](https://github.com/themesberg/flowbite/issues/486)) for Phoenix by [@jmnda-dev](https://github.com/jmnda-dev)
- Improve modal responsive behaviour by centering it vertically
- Improve Svelte getting started guide by [@shinokada](https://github.com/shinokada)
- Improve font smoothing by adding antialiasing to the docs and examples
- Improve navbar spacings and font sizes to reflect Figma design system

### v1.6.4

- New bottom navigation component
- New sticky banner component
- Export initFlowbite to set up event listeners for all data attributes
- Fix for Turbo Frame load events ([issue #88](https://github.com/themesberg/flowbite/issues/88))
- Include WindiCSS on NPM (thanks to [@rgvillanueva28](https://github.com/rgvillanueva28))
- Adds close tooltips with esc key to meet WCAG (by [@daveholst](https://github.com/daveholst))
- Astro integration guide
- GatsbyJS integration guide 
- Symfony integration guide
- SolidJS integration guide
- Phoenix (Elixir) integration guide

### v1.6.3

- Added dropdown hover functionality with delay option and examples ([issue #208](https://github.com/themesberg/flowbite/issues/208))
- Fixed clicking outside of the Popover component not closing when using the "click" trigger type ([issue #242](https://github.com/themesberg/flowbite/issues/242))
- Introduced the "none" option for Tooltip, Speed Dial, Popover and Dropdown components for trigger type ([issue #181](https://github.com/themesberg/flowbite/issues/181))
- Fixed Tooltip and Popover click events on Safari browsers when using mobile devices ([issue #246](https://github.com/themesberg/flowbite/issues/246) and [issue #413](https://github.com/themesberg/flowbite/issues/413))
- Improve the consistency of the dropdown components across the whole documentation using `border-lg` ([issue #276](https://github.com/themesberg/flowbite/issues/276))
- Added the optional closable option to the Modal component preventing it from being closed when hitting the ESC button (thanks for the PR [@CorwinDev](https://github.com/CorwinDev))
- Improved sidebar component examples by including a hamburger icon and multiple layouts

### v1.6.2

- add event listeners for data attributes back to `index.ts`
- fix import maps for `flowbite.turbo.min.js.map` for Ruby on Rails

### v1.6.1

- Nuxt integration guide + starter kit
- Add data attribute initialisation support for Vue 3 and Nuxt
- Remove event listeners from basic `index.js` file and keep it only for `index.umd.js`
- Fix drawer flickering issue
- Update Laravel integration guide with Vite (thanks to [@CorWinDev](https://github.com/CorwinDev) for the PR)
- Fixed checkbox dark mode focus state (thanks to [@CorWinDev](https://github.com/CorwinDev) for the PR)
- Added Datepicker turbo load support for Ruby on Rails 7 (thanks to [@travisgalloway](https://github.com/travisgalloway) for the PR)

### v1.6.0

- migrated code to TypeScript & introduced types and interfaces
- integrated ESlint and Prettier
- fixed event listeners stacking up for all interactive components
- improved NPM build scripts
- new stepper component
- new indicator component
- new breadcrumb components
- new spinner examples

Breaking changes:

- modals no longer get initialized via `data-modal-toggle` and you need to switch to `data-modal-target={modalID}` where the value is the id of the modal

### v1.5.5

- added support for Ruby on Rails 7 import map with turbo
- improved event listeners for interactive components

### v1.5.4

- released new Speed Dial component
- modals now close by default when clicking outside
- add new static options to modals to prevent closing when clicking outside
- add expand code feature to the docs
- normalize colors for all label inputs
- remove "for" and "id" attributes from toggle switch components
- improve hover and focus style of the hamburger icons
- update to Tailwind CSS v3.2.2

### v1.5.3

- fix popover / tooltip styles

### v1.5.2

- add new Popover component

### v1.5.1

- fix drawer js build

### v1.5.0

- added new Drawer component
- added new Skeleton component
- added new KBD component
- added new Dropdown and Table components
- added new Checkbox and Radio examples
- update documentation code and component preview
- update table of contents of the docs

### v1.4.7

- fix datepicker CDN JS

### v1.4.6

- fix datepicker colors issues on dark mode
- fix datepicker range selector issues

### v1.4.5

- show navbar search input on mobile devices
- fix interactive tabs default active/inactive classes for dark mode

### v1.4.4

- use `data-modal-show="true"` to show modal by default
- fix accordion onToggle JS bug
### v1.4.3

- removed `toggle-bg` class as a requirement for the toggle component
- added new input fields
- added new textarea components
- added new checkbox examples
- added new radio button examples
- added new toggle colors and sizes
- added new select component examples
- added new search input component
- added new range slider component
- added new file input examples


### v1.4.2

- pass relevant objects for callback functions

### v1.4.1

- fixed mini-css-extract-plugin dependency
- new avatar component
- new rating component

### v1.4.0

- refactored all interactive components using JavaScript objects, methods, and callback functions
- improved accessibility and removed unused classes

### v1.3.4

- added new carousel component

### v1.3.3

- added new accordion component
- added new sidebar component

### v1.3.2

- add new footer component
- add a new pricing card
- add new crypto wallet connect modal component
- add two new table components
- remove `.bundle` name convention
- remove `@themesberg` tag from NPM

### v1.3.1

- add new spinner component
- add new floating labels for form elements

### v1.3.0

- update plugin file to Tailwind CSS v3.x
- add React and Vue.js support for the interactive elements (data attributes only)

### v1.2.0

Released on November 29th, 2021.

- full dark/light mode integration
- add new tabs component
- new modal component variations and sizes
- new card components
- dark mode switcher guide
- minor bug fixes

### v1.1.1

- fix the package `mini-svg-data-uri` not being included as a dependency

### v1.1.0

- separated the datepicker plugin from the main `flowbite.js` file and instead created a separate one which is optional to include
- added more dropdown component variants and placement options
- reset form styles and move the extra pseudo CSS styles inside the Flowbite Tailwind CSS plugin file (no longer need to write it yourself)
- create new styles and options for the tooltip component and remove Tippy JS as a dependency
- improve documentation container styles and spacing
- create separate files for each component inside the Flowbite JavaScript ES6 file

### v1.0.7

- apply checkbox and radio input styles as base styles using the plugin interface

### v1.0.6

- remove `@tailwindcss/forms` plugin as a dependency
- create a Tailwind CSS plugin that can be included after requiring via NPM
- remove some unnecessary HTML markup and classes from the component examples

### v1.0.4

- use single quotes for JavaScript code and event listeners
- update card button icons

### v1.0.3

Released on September 28th, 2021.

- improve the modal functionality by generating the backdrop on the fly and enable showing/hiding of the modal with JS not just data attributes by using the `toggleModal` function
- improve the semantic HTML markup of alerts, button groups, navigation bars, and dropdowns
- fix the responsive scroll issue for modals (if the content was larger than the viewport, elements inside the modal were unaccessible)
- create a new component called list group which got separated from the button group component
- improve navigation bar markup by requiring only one list of pages to prevent duplicate content
- add the possibility to programmatically show or hide elements using the `toggleCollapse` global function

### v1.0.2

Released on September 25th, 2021.

- add datepicker plugin and documentation
- improve documentation

### v1.0.1

Released on September 12th, 2021.

- updated JavaScript code to use data attributes instead of inline event listeners
- fixed some of the purged CSS classes for the alerts components
- clicking outside the dropdown component will now also close the dropdown menu
- add previous and next links for the docs page

### v1.0.0

Released on September 9th, 2021.

- initial release files


================================================
FILE: content/getting-started/django.md
================================================
---
layout: docs
title: Tailwind CSS Django - Flowbite
description: Learn how to install Tailwind CSS and Flowbite inside a Django project and start developing modern web applications with a high-level Python framework
group: getting-started
toc: true
requires_django: true

previous: Phoenix (Elixir)
previousLink: getting-started/phoenix/
next: Flask
nextLink: getting-started/flask/
---

[Django](https://www.djangoproject.com/) is an open-source web framework following the model-template-views architecture built in Python currently maintained by the Django Software Organization.

It is currently being used by small and large corporations for websites such as YouTube, Spotify, Instagram, Disqus, and Dropbox and demand for Django developers is increasing.

By following this guide you will learn how to properly set up a Django project with Tailwind CSS and Flowbite to start developing modern web applications even faster.

## Requirements

Follow the next steps to create a new Django project and install Tailwind CSS with Flowbite to get the full benefits of the component library.

Make sure that you have both [Node.js](https://nodejs.org) and [Python](https://www.python.org/) installed on your local machine.

After that, you'll need to install Django on your local computer by following the official [installation guide](https://docs.djangoproject.com/en/4.0/intro/install/) or by running the following command in the terminal if you have pip available in your Python environment:

{{< code lang="bash" >}}
python -m pip install Django
{{< /code >}}

Now that you have all the required technologies installed you can start by creating a new Django project.

## Create a Django project

1. Run the following command in the terminal to create a new Django project with the name `flowbiteapp`:

{{< code lang="bash" >}}
django-admin startproject flowbiteapp
cd flowbiteapp/
{{< /code >}}

2. Create a new `templates/` directory inside the project folder and then update the existing `settings.py` file:

{{< code lang="python" file="settings.py" icon="file" >}}
TEMPLATES = [
    {
        ...
        'DIRS': [BASE_DIR / 'templates'], # new
        ...
    },
]
{{< /code >}}

3. Installed `django-compressor` by running the following command in your terminal:

{{< code lang="bash" >}}
python -m pip install django-compressor
{{< /code >}}

4. Add `compressor` and `flowbiteapp` (or the name of your app) to the installed apps inside the `settings.py` file:

{{< code lang="python" file="settings.py" icon="file" >}}
# config/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'compressor',  # new
    'flowbiteapp',  # new
]
{{< /code >}}

5. Configure the `compressor` inside the `settings.py` file:

{{< code lang="python" file="settings.py" icon="file" >}}
COMPRESS_ROOT = BASE_DIR / 'static'

COMPRESS_ENABLED = True

STATICFILES_FINDERS = ('compressor.finders.CompressorFinder',)
{{< /code >}}

6. Create two new folders and an `input.css` file inside the `static/src/` folder:

{{< code lang="bash" >}}
static
└── src
    └── input.css
{{< /code >}}

Later we will import the Tailwind CSS directives and use it as the source file for the final stylesheet.

7. Create a new `views.py` file inside `flowbiteapp/` next to `urls.py` and add the following content:

{{< code lang="python" file="views.py" icon="file" >}}
from django.shortcuts import render

def index(request):
    return render(request, 'index.html')
{{< /code >}}

8. Import the newly created view instance inside the `urls.py` file by adding the following code:

{{< code lang="python" file="urls.py" icon="file" >}}
from .views import index

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', index, name='index')
]
{{< /code >}}

9. Create a new `_base.html` file inside the `templates/` directory:

{{< code lang="html" file="_base.html" icon="file" >}}


{% load compress %}
{% load static %}





    
    
    
    Django + Tailwind CSS + Flowbite

    {% compress css %}
    
    {% endcompress %}




    

        {% block content %}
        {% endblock content %}
    




{{< /code >}}

10. Create an `index.html` file that will be served as the homepage:

{{< code lang="html" file="index.html" icon="file" >}}


{% extends "_base.html" %}

{% block content %}
  
Django + Tailwind CSS + Flowbite

{% endblock content %}
{{< /code >}}

11. Finally, create a local server instance by running the following command:

{{< code lang="bash" >}}
python manage.py runserver
{{< /code >}}

You'll now get an error that the `output.css` file doesn't exist, but that'll be fixed once we install Tailwind CSS.

Awesome! Now you have a working Django project locally. Let's continue by installing Tailwind.

## Install Tailwind CSS

1. Run the following command the install Tailwind CSS as a dev dependency using NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/cli --save-dev
{{< /code >}}

2. Import the Tailwind CSS directive inside the `input.css` file:

{{< code lang="css" file="input.css" icon="file" >}}
/* static/src/input.css */

@import "tailwindcss";
{{< /code >}}

4. Run the following command to watch for changes and compile the Tailwind CSS code:

{{< code lang="bash" >}}
npx @tailwindcss/cli -i ./static/src/input.css -o ./static/src/output.css --watch
{{< /code >}}

Open `localhost:3000` in your browser and you'll see working HTML with Tailwind CSS code.

Now that you have configured both Django and Tailwind CSS you can also set up Flowbite to get access to the whole collection of interactive components like navbars, modals, dropdowns, buttons, and more to make development even faster.

## Install Flowbite

Flowbite is an open source library of interactive components built on top of Tailwind CSS and it can be installed using NPM and required as a plugin inside Tailwind CSS.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

5. Include Flowbite's JavaScript file inside the `_base.html` file just before the end of the `` tag using CDN or by including it directly from the `node_modules/` folder:

{{< code lang="html" file="_base.html" icon="file" >}}

{{< /code >}}

Now that you have everything configured you can check out the components from Flowbite such as navbars, modals, buttons, datepickers, and more.

## Flowbite components

In this section I'll show you how you can search for and use the interactive components from Flowbite.

Let's start by adding a }}">Navbar component inside the `_base.html` file:

{{< code lang="html" file="_base.html" icon="file" >}}


{% load compress %}
{% load static %}





    
    
    
    Django + Tailwind CSS + Flowbite

    {% compress css %}
    
    {% endcompress %}





    
    
    

    

        {% block content %}
        {% endblock content %}
    


    



{{< /code >}}

This way you already have a functional and responsive navigation bar added to all pages.

Let's take a look how can added more content directly to the view templates, not just the base template.

Check out one of the }}">card components from Flowbite and add it to the `index.html` file:

{{< code lang="html" file="index.html" icon="file" >}}


{% extends "_base.html" %}

{% block content %}


Django + Tailwind CSS + Flowbite



    
        
    
    

        
            
Noteworthy technology
                acquisitions 2021

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

        
            Read more
            
                
            
        
    




{% endblock content %}
{{< /code >}}

At this point you can use any of the components to build user interfaces easier and faster together with Django, Tailwind CSS and Flowbite. 

Check out all of the components by browsing the menu on the left sidebar under the "components" section.

## Django starter project

We have built a free and open-source [Django starter project with Tailwind CSS](https://github.com/themesberg/tailwind-django-starter) on GitHub that you can clone to use as a reference for this guide and for your own Django web application configured with Flowbite and Tailwind CSS.

================================================
FILE: content/getting-started/flask.md
================================================
---
layout: docs
title: Tailwind CSS Flask - Flowbite
description: Learn how to install Tailwind CSS and Flowbite inside a Flask project and start building modern web applications with a micro Python web framework
group: getting-started
toc: true
requires_flask: true

previous: Django
previousLink: getting-started/django/
next: Blazor (.NET)
nextLink: getting-started/blazor/
---

[Flask](https://flask.palletsprojects.com/) is an open-source micro web framework based on Python that allows you to quickly build websites using only a single Python file without requiring any other particular tools or libraries.

It is being used by hundreds of thousands of developers and even large companies such as Samsung, Netflix, Reddit, Lyft, and even Airbnb since its initial release in 2010.

By following this guide you will learn how to properly set up Tailwind CSS with Flowbite inside a Flask project and get started with building websites faster.

## Requirements

Follow the next steps in this tutorial to learn how to install a Flask project with Tailwind CSS and the Flowbite component library.

Make sure that you have both [Node.js](https://nodejs.org) and [Python](https://www.python.org/) installed on your local machine.

After that, you'll need to install Flask on your computer by following the official [installation guide](https://flask.palletsprojects.com/en/2.1.x/installation/) or by running the following command in the terminal if you have pip available in your Python environment:

{{< code lang="bash" >}}
python -m pip install Flask
{{< /code >}}

Now that you have installed all of the required technologies you can now create a new Flask project.

## Create a Flask project

1. Run the following command in the terminal to create a new Flask project with the name `flowbite-flask`:

{{< code lang="bash" >}}
mkdir flowbite-flask
cd flowbite-flask/
{{< /code >}}

2. Create a new file called `app.py` inside the root of the project folder with the following content:

{{< code lang="python" file="app.py" icon="file" >}}
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
@app.route("/index")
def index():
	return render_template("index.html")

if __name__ == '__main__':
	app.run(debug=True)
{{< /code >}}

What we do here is that we import the Flask micro framework from Python and also set the app route for a new `index.html` file inside the `templates/` folder that we will create in the next step.

3. Create two new folders called `templates/` and `static/`:

{{< code lang="bash" >}}
flowbite-flask/
   - app.py
   - templates/
   - static/
{{< /code >}}

This is how your project folder structure should look like.

4. Create a new `index.html` file inside your `templates/` folder and create a basic HTML document structure:

{{< code lang="html" file="index.html" icon="file" >}}



    
    
    
    Flowbite Flask


    
Hello, Flask!



{{< /code >}}

5. Start a local server by running `python app.py` inside your terminal:

{{< code lang="bash" >}}
python app.py
{{< /code >}}

This should make the project available via the browser by going to `http://localhost:5000/`. 

## Install Tailwind CSS

Now that you have a working Flask project we can proceed by installing Tailwind CSS. 

1. Run the following command the install Tailwind CSS as a dev dependency using NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/cli --save-dev
{{< /code >}}

2. Create a new `static/src/` folder and add a new `input.css` file with the following content:

{{< code lang="css" file="input.css" icon="file" >}}
/* static/src/input.css */

@import "tailwindcss";
{{< /code >}}

4. Run the following command to watch for changes and compile the Tailwind CSS code:

{{< code lang="bash" >}}
npx @tailwindcss/cli -i ./static/src/input.css -o ./static/dist/output.css --watch
{{< /code >}}

This will generate a new `output.css` file inside the `static/dist/css/` folder that we will now include in the newly created `index.html` template file.

5. Include `output.css` inside the main `index.html` template:

{{< code lang="html" file="index.html" icon="file" >}}



    
    
    
    Flowbite Flask
    


    
Hello, Flask!



{{< /code >}}

Notice how the `text-fg-brand` class is now being applied using the configuration that we set up which means that you can start building user interfaces with Tailwind CSS.

## Install Flowbite

Now that you have a working Flask and Tailwind CSS configuration you can also include Flowbite inside your project to get started with hundreds of UI components like navbars, dropdowns, tables, and more.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

5. Include Flowbite's JavaScript file inside the `index.html` file just before the end of the `` tag using CDN or by including it directly from the `node_modules/` folder:

{{< code lang="html" file="index.html" icon="file" >}}

{{< /code >}}

Now that you have Flowbite also configured you can explore all of the components by browsing the sidebar menu on the left side of the documentation.

## Flowbite components

Let's now take a look how we can quickly build a simple page using the components from Flowbite.

Let's start by adding a }}">Navbar component inside the `index.html` file:

{{< code lang="html" file="index.html" icon="file" >}}




    
    
    
    Flowbite Flask
    



    



    



{{< /code >}}

As you can see, the navigation bar will render correctly and even the hamburger icon functionality will work by toggling the mobile menu on smaller devices.

Other than the base components from the library you can also check out some of the free and premium website sections from [Flowbite Blocks](https://flowbite.com/blocks/) such as hero sections, pricing sections, contact sections, and more.

Let's add a free [Tailwind CSS hero section](https://flowbite.com/blocks/marketing/hero/) just after the navigation bar:

{{< code lang="html" file="index.html" icon="file" >}}


  

        
We invest in the world’s potential

        
Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.

        

            Learn more
            
                
                Watch video
             
        

  



{{< /code >}}

This gives you a pretty good idea on how powerful a Flask, Tailwind CSS and Flowbite technology stack can be for quickly building websites.

## Flask starter project

This configuration can also be found on the [Flask starter project](https://github.com/themesberg/tailwind-flask-starter) from GitHub where Flask, Tailwind CSS, and Flowbite are already configured and you can start building websites right away.

================================================
FILE: content/getting-started/gatsby.md
================================================
---
layout: docs
title: Tailwind CSS Gatsby - Flowbite
description: Learn how to install Gatsby with Tailwind CSS and Flowbite and start building websites with an open-source static site generator built on top of React and GraphQL
group: getting-started
toc: true
requires_gatsby: true

previous: Meteor.js
previousLink: getting-started/meteor-js/
next: SolidJS
nextLink: getting-started/solid-js/
---

[Gatsby](https://www.gatsbyjs.com/) is a popular open-source static site generator framework built on top of Node.js, React, and GraphQL that allows you to build websites using content sources such as Markdown, MDX and leverages other headless CMS technologies such as WordPress, Drupal and more.

This React framework is used by many popular websites and companies such as Snapchat, Tinder, Revolut, Stack, and others and it can help you quickly build a website without having to create a separate administrative panel to manage content.

By following this guide you will learn how to create a new Gatsby project, install and configure Tailwind CSS and also set up Flowbite to start building websites even faster with the open-source UI components.

## Requirements

Before creating a new project make sure that you have [Node.js](https://nodejs.org/en/) (v18 or higher) installed on your local machine and production server because it will be required to install all of the three technologies.

## Getting started

The fastest way to get started is using our project creation CLI, which sets up a new Gatsby project with Flowbite React, Tailwind CSS, and all necessary configurations.

## Create a Gatsby project

Run the following command in your terminal using our CLI toolkit:

{{< code lang="bash" >}}
npx create-flowbite-react@latest -t gatsby
{{< /code >}}

This will create a new Gatsby project, install and configure Tailwind CSS, install and configure Flowbite React, add dark mode support and also set up example components to get you started.

## Add to existing project

If you already have a Gatsby project and want to add Flowbite React, you can use our initialization CLI:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This will automatically add Flowbite React to your project and will configure Tailwind CSS with the Flowbite plugin alongside dark mode support.

## Custom installation

If you prefer to set everything up manually or need more control over the configuration, follow these steps.

### Create a new project

Create a new Gatsby project using NPM and make sure to select `Tailwind CSS` when prompted:

{{< code lang="bash" >}}
npm init gatsby
{{< /code >}}

You can now proceed with the installation of Flowbite React.

### Install Flowbite React

Run the following CLI command to add Flowbite React to your project:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This command will install Flowbite React and configure Tailwind with the Flowbite plugin.

### Adding dark mode

In server side rendered applications like Gatsby, if you want to avoid page flicker when dark mode is set, you need to configure the `ThemeModeScript` component.

1. Create `gatsby-ssr.js` file at the root folder of the project:

{{< code lang="javascript" file="gatsby-ssr.js" icon="file" >}}
// gatsby-ssr.js
export const onRenderBody = ({ setPreBodyComponents }) => {
    setPreBodyComponents([]);
};
{{< /code >}}

2. Import `ThemeModeScript` and add it to `setPreBodyComponents` function:

{{< code lang="javascript" file="gatsby-ssr.js" icon="file" >}}
// gatsby-ssr.js
import { ThemeModeScript } from 'flowbite-react';

export const onRenderBody = ({ setPreBodyComponents }) => {
    setPreBodyComponents([ThemeModeScript]);
};
{{< /code >}}

Congratulations! You have successfully installed Flowbite React.

## React components

Now that you have Flowbite React installed you can start using the components from the library:

{{< code lang="javascript" file="src/pages/index.tsx" icon="file" >}}
// src/pages/index.tsx (or .jsx)
import { Button } from 'flowbite-react';

export default function IndexPage() {
    return ;
}
{{< /code >}}

Check out all of the UI components from the [Flowbite React](https://flowbite-react.com) library.

## Theme customization

Flowbite React offers an advanced system of customizing your components and templates using the new [theming engine](https://flowbite-react.com/docs/customize/theme). You can style components by directly using the `className` attribute of the component, but also by passing a theme object to the `` component.

For example, here is a simple way you can update a button component:

{{< code lang="javascript" file="src/pages/index.tsx" icon="file" >}}
import { Button } from "flowbite-react";

function App() {
  return ;
}
{{< /code >}}

Additionally, you can also use the `createTheme` helper to create a theme object that you can then pass on to the `` component with which you can style subcomponents too:

{{< code lang="javascript" file="src/pages/index.tsx" icon="file" >}}
import { Button, createTheme, ThemeProvider } from "flowbite-react";

const customTheme = createTheme({
  button: {
    color: {
      primary: "bg-red-500 hover:bg-red-600",
      secondary: "bg-blue-500 hover:bg-blue-600",
    },
    size: {
      lg: "px-6 py-3 text-lg",
    },
  },
});

function App() {
  return (
    
      
      
    
  );
}
{{< /code >}}

## Open-source community

The Flowbite React UI library is a free, open-source project licensed under MIT. You can find the source code on [GitHub](https://github.com/themesberg/flowbite-react) and collaborate with our developer community to contribute.

## Support development

If you’d like to support our open-source work, check out the [pro version](https://flowbite.com/pro/) of Flowbite, which offers 400+ components and templates, a Figma design system, an admin dashboard, and more.

================================================
FILE: content/getting-started/hugo.md
================================================
---
layout: docs
title: Tailwind CSS HUGO - Flowbite
description: Learn how to install HUGO together with Tailwind CSS and Flowbite to start building websites with one of the most popular static site generators in the world
group: getting-started
toc: true
requires_hugo: true

previous: Blazor
previousLink: getting-started/blazor/
next: MCP UI
nextLink: getting-started/mcp-ui/
---

[HUGO](https://gohugo.io/) is a popular and open-source static site generator framework that makes it easy to organize your files and assets where you can also leverage a taxonomy system, multilingual support, fast assets pipeline, and more. HUGO is used by millions of developers and by websites such as Bootstrap, Litecoin, Smashing Magazine, and even Flowbite.

Check out this guide to learn how to install and set up a HUGO project together with Tailwind CSS and the UI components from Flowbite to start building websites with a stack that enhances your front-end development workflow.

## Requirements

Make sure that you have both [HUGO](https://gohugo.io/installation/) and [Node.js](https://nodejs.org/en/) installed locally on your computer.

## Create a HUGO project

Follow the next steps to learn how to create a new HUGO project after you've installed the dependencies.

1. Run the following CLI command to create a new HUGO application:

{{< code lang="bash" >}}
hugo new site flowbite-app
cd flowbite-app
{{< /code >}}

2. The next step is to create a local custom theme:

{{< code lang="bash" >}}
hugo new theme flowbite-theme
{{< /code >}}

This command will create a new scaffolded theme directory that we can extend with our HUGO app.

3. Next, add the theme to the `config.toml` file:

{{< code lang="toml" file="config.toml" icon="file" >}}
theme = ["flowbite-theme"]
{{< /code >}}

4. Run a local server using the following command:

{{< code lang="bash" >}}
hugo server -D
{{< /code >}}

Now you should see a basic HUGO website running at a generated localhost server.

Congratulations! You have now successfully installed and configured HUGO.

## Install Tailwind CSS

Tailwind CSS is a popular utility-first CSS framework that allows better control over the styling of your website and makes it easier to work together with other team members within your organization.

1. Go to the `flowbite-theme/` directory and run the following command:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/cli --save-dev
{{< /code >}}

2. Inside your `main.css` file from the `flowbite-theme/` directory add the following:

{{< code lang="css" file="main.css" icon="file" >}}
@import "tailwindcss";
{{< /code >}}

3. Compile the CSS code for Tailwind CSS by running this command inside of your theme directory:

{{< code lang="bash" >}}
npx @tailwindcss/cli -i ./assets/css/main.css  -o ./assets/css/output.css --watch
{{< /code >}}

4. Update the `css.html` file from the `flowbite-theme/` directory with the following:

{{< code lang="html" file="css.html" icon="file" >}}
{{- with resources.Get "css/output.css" }}
  {{- if eq hugo.Environment "development" }}
    
  {{- else }}
    {{- with . | minify | fingerprint }}
      
    {{- end }}
  {{- end }}
{{- end }}
{{< /code >}}

5. In order to test out Tailwind CSS, add a utility class inside the `single.html` file:

{{< code lang="html" file="single.html" icon="file" >}}
{{ define "main" }}
  
{{ .Title }}


  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
  {{ $dateHuman := .Date | time.Format ":date_long" }}
  

  {{ .Content }}
  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}
{{< /code >}}

By browsing to one of the post pages, you should now see the text updated in blue.

## Install Flowbite

Now that you have a working HUGO project configured with Tailwind CSS, you can now install Flowbite.

Please make sure that you install the dependency, just as with Tailwind CSS, inside your `flowbite-theme` directory.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `main.css` CSS file:

{{< code lang="css" file="main.css" icon="file" >}}
@import "flowbite/src/themes/default";
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="main.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="main.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

5. Add the Flowbite JavaScript inside your `js.html` file:

{{< code lang="html" file="js.html" icon="file" >}}


{{- with resources.Get "js/main.js" }}
  {{- if eq hugo.Environment "development" }}
    {{- with . | js.Build }}
      
    {{- end }}
  {{- else }}
    {{- $opts := dict "minify" true }}
    {{- with . | js.Build $opts | fingerprint }}
      
    {{- end }}
  {{- end }}
{{- end }}
{{< /code >}}

6. Let's now test out Flowbite by updating our `menu.html` file from the theme directory:

{{< code lang="html" file="menu.html" icon="file" >}}
{{- /*
Renders a menu for the given menu ID.

@context {page} page The current page.
@context {string} menuID The menu ID.

@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}

{{- $page := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID }}

{{- end }}

{{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}
    
  • 
      {{ $name }}
      {{- with .Children }}
        
      
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        
    
      {{- end }}
    
    • 
  {{- end }}
{{- end }}
{{< /code >}}

After you reload the server, the pages from the menu should now be rendered inside the navbar component.

## UI components

Now that you have everything installed and set up you can start using the [UI components from Flowbite](https://flowbite.com/blocks/) to build up your website with HUGO much faster and easier with hero sections, navigation bars, admin CRUD layouts, and more.

## HUGO starter theme

We have developed a free and open-source [HUGO starter theme](https://github.com/themesberg/tailwind-hugo-starter) that you can use to build up your website as a starting point or use it directly as a personal blog website that already has HUGO, Tailwind CSS and Flowbite configured.

================================================
FILE: content/getting-started/introduction.md
================================================
---
layout: docs
title: Flowbite - Tailwind CSS component library
description: Get started with the most popular open-source library of interactive UI components built with the utility classes from Tailwind CSS
group: getting-started
toc: true
cleanTitle: true

next: Quickstart
nextLink: getting-started/quickstart/
---

## Introduction

Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, templates, and more.

It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, but also some more advanced interactive elements such as datepickers. 

All of the elements are built using the utility classes from Tailwind CSS and vanilla JavaScript with support for TypeScript.



Here's a quick overview of the Flowbite ecosystem including the open source Tailwind components library, the Figma design files, and the pro version.


    
    }}" class="block p-6 mb-6 bg-neutral-primary border border-default rounded-base hover:bg-neutral-tertiary lg:mb-0">
        
    Quickstart
    
        
    Learn how to get started by downloading and configuring Flowbite locally on your machine and start developing.
    
        
    }}" class="block p-6 mb-6 bg-neutral-primary border border-default rounded-base hover:bg-neutral-tertiary lg:mb-0">
        
    Components
    
        
    Explore the Tailwind CSS elements such as buttons, navbars, alerts, dropdowns and use them to build your website.
    
        
    
        
    Figma design files
    
        
    Prototype and design your website before coding with the Flowbite Figma file which is based on the Tailwind CSS classes.
    
        
    
        
    Flowbite Icons
    
        
    Free and open-source collection of over 430 solid and outline styled SVG icons to use with our UI component library and Figma.
    
        
    
        
    Flowbite Blocks
    
        
    Take your Figma and Tailwind CSS development to the next level with thousands more elements and pages with Flowbite Pro.
    
        
    
        
    Upgrade to Pro
    
        
    Check out over 450+ website sections and advanced UI components built with Tailwind CSS and the Flowbite Library.
    
        

    

## Using Flowbite

One of the disadvantages of Tailwind CSS compared to other frameworks is that it doesn't have a base set of components. This makes it really hard to quickly prototype a user interface. 

This is where Flowbite comes into play: it's basically Tailwind CSS, but you get all of the components that you would normally get with a classic CSS framework like Bootstrap or Bulma.

There are over 56 types of UI components including buttons, alerts, breadcrumbs, pagination, and navbars. Flowbite also includes some custom JavaScript that enables interactive components, such as dropdowns, modals, tooltips, and many more. 

## Getting started

Flowbite is technically a plugin that can be included into any existing Tailwind CSS project. To get started, you first need to make sure that you have a working Tailwind CSS project installed and that you also have Node and NPM installed on your machine.

### Install using NPM

Make sure that you have Node.js and Tailwind CSS installed. This guide works with Tailwind v4.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" >}}
@source "../node_modules/flowbite";
{{< /code >}}

5. Include the JavaScript code that powers the interactive elements before the end of your `` tag:

{{< code lang="html" >}}

{{< /code >}}

Learn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/).

If you have and old project with Tailwind CSS v3 then [check out this guide](#tailwind-css-v3-to-v4) to learn how to upgrade to v4.

### Include using CDN

The quickest way to get started working with Flowbite is to include the CSS and JS into your project via CDN.

Require the following minified stylesheet inside the `head` tag:

{{< code lang="html" >}}

{{< /code >}}

And include the following JavaScript file before the end of the `body` element:

{{< code lang="html" >}}

{{< /code >}}

Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.

### Bundled JavaScript

One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box.

You can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this:

{{< code lang="javascript" >}}
import 'flowbite';
{{< /code >}}

This file has access to all of the components and it automatically applies event listeners to the data attributes.

### Data attributes

The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.

For example, to set up a modal component all you need to do is use `data-modal-target` and `data-modal-{toggle|show|hide}` to toggle, show, or hide the component by clicking on any trigger element.

### Init functions

You can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt:

{{< code lang="javascript" >}}



{{< /code >}}

The `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`.

You can view more examples by browsing the [components from Flowbite](#components).

### ESM and CJS

Flowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks.

Here's an example how you can import and create a new Modal component inside JavaScript:

{{< code lang="javascript" >}}
import { Modal } from 'flowbite'

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

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

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

modal.show();
{{< /code >}}

Check out the JavaScript behaviour section of each component's page to learn how you can use this.

### TypeScript

Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.

Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:

{{< code lang="javascript" >}}
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'
import type { InstanceOptions } from 'flowbite';

// other code
{{< /code >}}

Learn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/).

## Figma Design System

The components from Flowbite are first conceptualized and designed in Figma using the latest features such as variants, auto-layout, grids, responsive layouts, and more.

Learn more by checking out Flowbite's Figma design system and start designing your Tailwind CSS projects before actually coding them.

## Flowbite SVG Icons

Check out a free and open-source collection of over 430 SVG icons with solid and outline styles to integrate with the UI components from Flowbite.

Learn more by browsing the Flowbite Icons page and interface to directly copy-paste the icons into your project as raw SVGs or React (JSX) code.

## Flowbite GPT

We've developed a custom trained ChatGPT model that you can use to generate website sections and pages based on the resources from Flowbite and Tailwind CSS.

Start generating with [Flowbite GPT](https://chat.openai.com/g/g-y7yC35HB9-flowbite-gpt).

## Pro version

If you want to take your Tailwind development workflow to the next level you can check out the [pro version of Flowbite]({{< param homepage >}}/pro/) which includes fully coded pages and layouts for application, marketing, and e-commerce user interfaces.

## Work with us

If you're ready to take your application to the next level you can [work with us](https://flowbite.com/work-with-us/) on your project with developers who have been using Flowbite and Tailwind CSS.

## Learn Design Concepts

If you want to create even better Flowbite pages, learn design fundamentals from [Teach Me Design - Enhance UI](https://www.enhanceui.com/?ref=flowbite-introduction), a book that covers color theory, typography, UI and UX so you can make the most to implement the Flowbite Ecosystem!

## Tailwind CSS v3 to v4

If you want to upgrade v3 from Tailwind CSS with Flowbite you have to follow the v4 upgrade guide.

1. Install the next versions of Tailwind CSS and Flowbite using NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/postcss postcss
{{< /code >}}

2. Add the PostCSS plugin inside the `postcss.config.js` file:

{{< code lang="bash" >}}
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
{{< /code >}}

3. Remove the old directives in your main CSS file and import Tailwind:

{{< code lang="bash" >}}
@import "tailwindcss";
{{< /code >}}

4. Use the `@config` directive to import the old configuration file from your project:

{{< code lang="bash" >}}
/* add this to copy the configuration settings from your project */
@config "../tailwind.config.js";
{{< /code >}}

5. Compile the source CSS file using NPX:

{{< code lang="bash" >}}
npx @tailwindcss/cli -i input.css -o output.css
{{< /code >}}

Now you should be good to go! Check the deprecated changes from v3 to learn more about the new features.

## Tailwind CSS v3

We recommend you to follow the upgrade guide from v3 to v4 since Flowbite works with both.

## Tailwind CSS v2

Flowbite works with the 2.x version of Tailwind CSS.

## WindiCSS

Flowbite also works with WindiCSS by including the plugin inside the `windi.config.js` file:

{{< code lang="bash" >}}
plugins: [
    require('flowbite/plugin-windicss')
],
{{< /code >}}


    
  {{< requires_react >}}

    

## React

If you're using React as a front-end library you can also use the components from Flowbite including the interactive ones such as the dropdowns, modals, and tooltips as long as you install Tailwind CSS and Flowbite in an existing project.

Learn how to }}">install Tailwind CSS and Flowbite with React.


    
  {{< requires_nextjs >}}

    

## Next.js

If you're using React as a front-end library and Next.js as a framework you can also use the components from Flowbite React such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS.

Learn how to }}">install Tailwind CSS and Flowbite with Next.js and React.


    
  {{< requires_vue >}}

    

## Vue.js

The components from Flowbite can also be used any new or existing Vue 3 projects as long as you install Tailwind CSS and Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Vue.js.



    
  {{< requires_nuxtjs >}}

    

## Nuxt

If you're using Vue 3 as a front-end library and Nuxt as a framework you can also use the components from Flowbite Vue such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS.

Learn how to }}">install Tailwind CSS and Flowbite with Nuxt and Vue 3.


    
  {{< requires_laravel >}}

    

## Laravel

If you're running a Laravel application you can easily set up Tailwind CSS and Flowbite and start developing user interfaces based on the utility-first classes and components.

Learn how to }}">install Tailwind CSS and Flowbite with Laravel.


    
  {{< requires_svelte >}}

    

## Svelte

If you're using a Svelte application you can install a standalone Flowbite Svelte library and start developing modern websites using the components from Flowbite and the utility classes from Tailwind CSS.

Learn how to }}">install Tailwind CSS and Flowbite with Svelte.


    
  {{< requires_angular >}}

    

## Angular

You can read our official guide to learn how to set up a new Angular project together with Tailwind CSS and Flowbite to start building advanced web applications with Google's framework.

Learn how to }}">install Tailwind CSS and Flowbite with Angular.


    
  {{< requires_ruby >}}

    

## Ruby on Rails

If you're using a Ruby on Rails project you can install Tailwind CSS with Flowbite and start building web pages using the utility-first classes and the interactive UI compnonents from Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Ruby on Rails.


    
  {{< requires_django >}}

    

## Django

Check out the Django integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing even faster using the UI components from Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Django.


    
  {{< requires_flask >}}

    

## Flask

Check out the Flask integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing with a micro framework combined with the UI components from Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Flask.

## Licensing

The library of components from Flowbite is open source under the [MIT License]({{< ref "getting-started/license" >}}).

## Contributions

Flowbite is an open source library under the MIT license and anyone who would like to contribute to the codebase or design is welcome to do so. 

Please reach out to us via the official Github repository and the main development team will get in touch as soon as possible.

## Discord community

Feel free to join our community on Discord to receive help, contribute to the project, or just discuss about Flowbite, Tailwind CSS, and web development in general.

## YouTube channel

You can also subscribe to the official [Flowbite YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A) to view tutorials on how you can use the Flowbite ecosystem to design and build websites.

## Authors

- Zoltán Szőgyényi (web developer)
- Robert Tanislav (web designer)

================================================
FILE: content/getting-started/javascript.md
================================================
---
layout: docs
title: Tailwind CSS JavaScript - Flowbite
description: Learn how to set up a Tailwind CSS project with the JavaScript from Flowbite and start working with the interactive UI components based on the Flowbite API and data attributes interface
group: getting-started
toc: true
requires_javascript: true

previous: Quickstart
previousLink: getting-started/quickstart/
next: TypeScript
nextLink: getting-started/typescript/
---

[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) is one of the most popular programming languages in the world, basically powering the client side of nearly 98% percent of all websites alongside HTML and CSS. It is a high-level language which uses dynamic typing and supports features such as object orientation, first-class functions and the web based API allows you access to the DOM (Document Object Model).

Flowbite uses JavaScript to power the interactivity of the more complex UI components such as datepickers, dropdowns, and modals while also leveraging the utility classes from Tailwind CSS. 

There are two main ways you can use JavaScript to power the interactive UI components:

- use the data attributes interface and include the Flowbite JavaScript via NPM or CDN
- programmatically create instances of the UI components and call methods and attach events to elements

On this page you will learn how to leverage the Flowbite API to work with the interactivity part of the UI library and how you can customize the default behaviour of the UI components using JavaScript.

## Flowbite API

Flowbite is written in JavaScript with optional support for TypeScript and provides an extensive API for the interactive UI components that you use by creating new instances of the objects, setting them up with various options, calling methods such as to show or hide a component and even access a global instance manager to get access to the initialised objects.

Each component page on the documentation has a section called "JavaScript Behaviour" that documents how you can create and manage an object such as a Modal, Carousel, Dropdown, or any other interactive UI components that requires JavaScript to function.

Here is an extensive example on how you can work with the Modal component:

{{< code lang="javascript" icon="file" file="app.js" >}}
// set the modal menu element
const $targetEl = document.getElementById('modalEl');

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

Create a new Modal object based on the options above.

{{< code lang="javascript" icon="file" file="app.js" >}}
import { Modal } from 'flowbite';

/*
* $targetEl: required
* options: optional
*/
const modal = new Modal($targetEl, options);
{{< /code >}}

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

{{< code lang="javascript" icon="file" file="app.js" >}}
// show the modal
modal.show();

// hide the modal
modal.hide();
{{< /code >}}

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

{{< code lang="javascript" icon="file" file="app.js" >}}
// toggle the modal
modal.toggle();
{{< /code >}}

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

{{< code lang="javascript" icon="file" file="app.js" >}}
// true if hidden
modal.isHidden();

// true if visible
modal.isVisible();
{{< /code >}}

Please take into consideration that for this example you also need to have the appropriate HTML markup available on the page where the JS is loaded:

{{< code lang="html" icon="file" file="index.html" >}}



{{< /code >}}

Each component that requires JavaScript is well documented on their respective pages under the "JavaScript Behaviour" section as described above.

## Data attributes

The recommended and quickest way of using Flowbite is to use the data attributes interface that automatically creates instances and behaviour for the UI components by applying inline data attributes to the HTML elements, thus making them interactive via the Flowbite JavaScript API.

All of the examples on the Flowbite Docs already have the data attributes applied and they are also documented just above the component preview. 

Here's an example of how you can set up the modal behaviour and apply "show" and "hide" actions:

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






{{< /example >}}

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

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

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

This is just one example that shows you how Flowbite leverages the data attributes and sets up the JavaScript API, without having to create new instances of the objects yourself.

## Init functions

If you want to programmatically call the initialisation functions when using data attributes (for example, you might want to call it after the DOM re-rendered) then you can use the `initFlowbite()` function or the separate component initialisation functions such as `initModals()` or `initDropdowns()` wherever you want in your JS code:

{{< code lang="javascript" icon="file" file="index.html" >}}

{{< /code >}}

Basically, the `initFlowbite()` function parses your DOM for all of the data attributes and creates new instances of the appropriate components like modals or dropdowns and sets up the behaviour of the examples from the Flowbite Docs - applying the functionality of showing and hiding the components such as hiding the modal when clicking on the "X" (close) button.

## Instance manager

Since version `2.0.0`, the Flowbite JS API also provides a way to globally access all of the instances even if they were created via the data attributes interface. This allows you to programmatically handle the components while also giving you the possibility to use the recommended and quick way of accessing the data attributes interface and UI component examples.

After the window has loaded and the UI components from Flowbite have been initialised (either via CDN or the `initFlowbite()` function) you can use the following global object and methods to get access to the object instances:

{{< code lang="javascript" icon="file" file="app.js" >}}
window.addEventListener('load', function() {
    const modal = FlowbiteInstances.getInstance('Modal', 'modal-id');
})
{{< /code >}}

As you can see, the `FlowbiteInstances` global object has two main parameters:

- the first parameter is the component type which can be `Modal`, `Carousel`, `Dropdown` (ie. the name of the object class)
- the second parameter is the target ID or parent ID of the main element and it's always a string

If you provide the wrong category or ID then the console will give you a warning.

If you have provided the correct category and element ID then you can now access the object as if you've created it yourself and work with it programmatically via JavaScript:

{{< code lang="javascript" icon="file" file="app.js" >}}
// show the modal
modal.show();

// hide the modal
modal.hide();
{{< /code >}}

You can even remove the instance from the instance manager:

{{< code lang="javascript" icon="file" file="app.js" >}}
// remove the instance object from the global FlowbiteInstances manager
modal.removeInstance();
{{< /code >}}

You can also both destroy and remove the instance at the same time:

{{< code lang="javascript" icon="file" file="app.js" >}}
modal.destroyAndRemoveInstance();
{{< /code >}}

This in turn will basically remove the object instance from the global `flowbiteStorage` instance manager - you might want to do this if you want to reset certain elements from the DOM in single page applications.

Another example if you want to show or hide a tooltip that was created via data attributes would be:

{{< code lang="javascript" icon="file" file="app.js" >}}
const tooltip = FlowbiteInstances.getInstance('Tooltip', 'tooltip-id');
{{< /code >}}

And now you can show or hide the tooltip programmatically:

{{< code lang="javascript" icon="file" file="app.js" >}}
// show the tooltip
tooltip.show();

// hide the tooltip
tooltip.hide();
{{< /code >}}

You can call the `destroy()` and `init()` methods to re-calculate the positioning of the tooltip:

{{< code lang="javascript" icon="file" file="app.js" >}}
// destroy the tooltip event listeners
tooltip.destroy();

// re-init the tooltip object and event listeners
tooltip.init();

// show the tooltip
tooltip.show();
{{< /code >}}

A component is added to the `flowbiteStorage` global instance manager automatically when it's created via the `constructor` method of the object class, regardless of which component is being used from Flowbite.

Finally, you can also access all of the instances by calling the following method:

{{< code lang="javascript" icon="file" file="app.js" >}}
FlowbiteInstances.getAllInstances();
{{< /code >}}

Alternatively, you can also get all of the instances from one component pool such as from the modals:

{{< code lang="javascript" icon="file" file="app.js" >}}
FlowbiteInstances.getInstances('Modal');
{{< /code >}}

## Instance options

When creating a new object you can also use the last parameter to set the `instanceOptions` object through which you can set custom options for the Instance manager:

{{< code lang="javascript" icon="file" file="app.js" >}}
import type { InstanceOptions } from 'flowbite';

const instanceOptions: InstanceOptions = {
    id: "my-unique-id",
    override: true,
};

const modal = new Modal($targetEl, options, instanceOptions);
{{< /code >}}

In this example, the ID of the instance that you can get it from the `FlowbiteInstances` global instance manager object will be `my-unique-id` instead of the `$targetEl` unique ID.

This can be used to override existing instances if you want to re-initialise the same component with different options, such as when using the collapse object for the same object ID.

In our default UI components we use this when we want to toggle the mobile navigation both with the hamburger menu icon and the search icon, even though the target element is the same.

## TypeScript support

Flowbite has support for type declarations of the Flowbite JS API which helps you to keep your code more maintainable and predictable by giving you safety constraints for the parameters and object methods that you're using through your application.

Learn more about Flowbite and TypeScript in the [introduction guide](https://flowbite.com/docs/getting-started/typescript/).

## Frameworks support

You can use all of the JS frameworks for the UI components that don't require JavaScript to function (such as buttons, badges, cards) and for the UI components that require JS to work you need to set up the `initFlowbite()` function whenever the DOM has rendered so that you can re-apply the event listeners and object instances to the HTML elements that have data attributes. Otherwise, you need to create the objects and set the event listeners yourself.

We have written integration guides for all major front-end and back-end frameworks - generally we have standalone libraries for the major front-end frameworks such as [Flowbite React](https://www.flowbite-react.com/), [Flowbite Svelte](https://www.flowbite-svelte.com/), and [Flowbite Vue](https://flowbite-vue.com/).

For all of the back-end frameworks we recommend the vanilla JS version of Flowbite which integrates very well with frameworks such as [Laravel](https://flowbite.com/docs/getting-started/laravel/), [Django](https://flowbite.com/docs/getting-started/django/), or [Flask](https://flowbite.com/docs/getting-started/flask/).


================================================
FILE: content/getting-started/laravel.md
================================================
---
layout: docs
title: Tailwind CSS Laravel - Flowbite
description: Learn how to install Tailwind CSS with Flowbite in a Laravel PHP project and start building modern websites with the most popular PHP framework in the world
group: getting-started
toc: true
requires_laravel: true

previous: Qwik
previousLink: getting-started/qwik/
next: Symfony
nextLink: getting-started/symfony/
---

Laravel is the most popular free and open-source PHP web framework that helps you build modern web applications and API's based on a model-view-controller (MVC) programming architecture. It's an iteration of the [Symfony](https://flowbite.com/docs/getting-started/symfony/) framework and it's being used by millions of developers and companies around the world.

Check out this guide to learn how to set up a new Laravel project together with Tailwind CSS and the UI components from Flowbite to enhance your front-end development workflow.

## Create a Laravel app

Make sure that you have Composer and Node.js installed locally on your computer.

Follow the next steps to install Tailwind CSS and Flowbite with Laravel Mix. 

1. Require the Laravel Installer globally using Composer:

{{< code lang="bash" >}}
composer global require laravel/installer
{{< /code >}}

Make sure to place the vendor bin directory in your PATH. Here's how you can do it based on each OS:

- macOS: `export PATH="$PATH:$HOME/.composer/vendor/bin"`
- Windows: `set PATH=%PATH%;%USERPROFILE%\AppData\Roaming\Composer\vendor\bin`
- Linux: `export PATH="~/.config/composer/vendor/bin:$PATH"`

2. Create a new project using Laravel's CLI:

{{< code lang="bash" >}}
laravel new flowbite-app
cd flowbite-app
{{< /code >}}

Start the development server using the following command:

{{< code lang="bash" >}}
composer run dev
{{< /code >}}

You can now access the Laravel application on `http://localhost:8000`.

This command will initialize a blank Laravel project that you can get started with.

## Install Tailwind CSS

Since Laravel 12, the latest version of Tailwind v4 will be installed by default, so if you have that version or later then you can skip this step and proceed with installing Flowbite.

1. Install Tailwind CSS using NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/vite --save-dev
{{< /code >}}

2. Configure the `vite.config.ts` file by importing the Tailwind plugin:

{{< code lang="javascript" file="vite.config.ts" icon="file" >}}
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
    // …
  ],
})
{{< /code >}}

3. Import the main Tailwind directive inside your `app.css` CSS file:

{{< code lang="css" file="app.css" icon="file" >}}
@import "tailwindcss";
{{< /code >}}

5. Run the build process for Vite using `npm run dev`. Use `npm run build` for production builds.

## Install Flowbite

[Flowbite](https://flowbite.com) is a popular and open-source UI component library built on top of the Tailwind CSS framework that allows you to choose from a wide range of UI components such as modals, drawers, buttons, dropdowns, datepickers, and more to make your development workflow faster and more efficient.

Follow the next steps to install Flowbite using NPM.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `app.css` CSS file:

{{< code lang="css" file="app.css" icon="file" >}}
@import "flowbite/src/themes/default";
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="app.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="app.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

5. Add the Flowbite JS script inside your main `app.blade.php` layout file:

{{< code lang="html" file="app.blade.php" icon="file" >}}

    @yield('content')

    

{{< /code >}}

This will have the JavaScript loaded in all the files that extend this main layout.

## UI components

Now that you have successfully installed the project you can start using the UI components from Flowbite and Tailwind CSS to develop modern websites and web applications.

We recommend exploring the components using the search bar navigation (`cmd` or `ctrl` + `k`) or by browsing the components section of the sidebar on the left side of this page.

## Laravel starter project

Download or clone the [Flowbite Laravel](https://github.com/themesberg/tailwind-laravel-starter) Github boilerplate repository to get access to a project that already has Laravel, Tailwind CSS, and Flowbite set up for development.

For even more resources and UI components you can check out [Flowbite Pro](https://flowbite.com/pro/).

================================================
FILE: content/getting-started/license.md
================================================
---
layout: docs
title: Flowbite - License
description: Learn more about the licensing terms for Flowbite and Tailwind CSS
group: getting-started
toc: true

previous: LLM
previousLink: getting-started/llm/
next: Changelog
nextLink: getting-started/changelog/
---

## Copyright

The Flowbite name and logos are trademarks of Bergside Inc. Learn more about the [Flowbite Brand Guideline](https://flowbite.com/brand/).

## Released code

The released code is licensed under the [MIT license](https://github.com/themesberg/flowbite/blob/main/README.md).

Copyright (c) Themesberg (Bergside Inc.)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

## Documentation

The docs code is licensed under the [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/).

Attribution: the documentation code was initially forked from [Bootstrap](https://github.com/twbs/bootstrap) created by the [Bootstrap authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter Inc.](https://twitter.com/) and changes have been made since then to adapt to the Tailwind CSS and Flowbite ecosystem and technologies.

## Pro version

The pro version is licensed under the [EULA](https://flowbite.com/license/) from our website.

================================================
FILE: content/getting-started/llm.md
================================================
---
layout: docs
title: Tailwind CSS AI and LLM - Flowbite
description: Learn how to integrate Flowbite and Tailwind CSS with any LLM interface such as OpenAI, Anthropic, or Gemini to leverage the power of AI and LLMs in your web applications
group: getting-started
toc: true

previous: MCP Server
previousLink: getting-started/mcp/
next: License
nextLink: getting-started/license/
---

You can use Flowbite and Tailwind CSS together to generate UIs and integrate them into your own tech stack using LLMs and AI tools such as Windsurf or Cursor based on AI models from OpenAI, Anthropic, Gemini and more. We provide a basic `llms.txt` based on the [LLMs standard](https://llmstxt.org/) that you can use to feed data.

LLMs and AI integration tools are now a standard way of working in the web industry and it can drastically improve your workflow and productivity. We recommend using our UI library and resources as a stable base for your AI integration.

AI still has shortcomings and limitations and it is not a replacement for human work. However, that doesn't mean you can't leverage it to generate UIs and components faster and more efficiently.

## API routes for LLMs

The LLMs files are hosted on the following routes on Flowbite:

- `https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms.txt` - this is the main file that you can use to feed data to your AI tools
- `https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt` - this is the full file that is much larger and contains more data

On a general level, the first file should be enough for LLMs that are able to parse the web.

## Markdown files

Our documentation is hosted on GitHub and you can parse the markdown files directly too:

- `https://github.com/themesberg/flowbite/blob/main/content/components/accordion.md` - this is an example of a documentation file for the accordion component
- `https://github.com/themesberg/flowbite/blob/main/content/getting-started/angular.md` - this is a documentation file for the Angular integration guide

We recommend checking out the [content folder](https://github.com/themesberg/flowbite/tree/main/content) from GitHub to view all documentation files.

## Implementation examples

You can use the following code examples to implement LLMs in your web application:

{{< code lang="javascript" file="app.js" icon="file" >}}
async function getLLMData() {
    const response = await fetch('https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms.txt');
    const data = await response.text();
    return data;
}

console.log(await getLLMData());
{{< /code >}}

## Flowbite AI

We are currently working on a Flowbite AI feature that will allow you to generate UIs and components using AI models from OpenAI, Anthropic, Gemini and more. One of the features will be to convert your Figma designs into code and generate components using Flowbite and Tailwind CSS.

If you'd like to be notified when the Flowbite AI feature is available, please sign up below to our newsletter.

================================================
FILE: content/getting-started/mcp-ui.md
================================================
---
layout: docs
title: MCP UI - Build MCP apps with Flowbite
description: Learn how create and install an MCP application that can be used to build apps for ChatGPT, Claude, Gemini, and any other MCP client and leverage the UI components from Flowbite
group: getting-started
toc: true

previous: HUGO
previousLink: getting-started/hugo/
next: Configuration
nextLink: customize/configuration/
---

MCP UI is the standard SDK that you can use to deliver MCP apps which can be used as applications for ChatGPT, Gemini, Claude, and other MCP clients like Cursor or Windsurf. [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) (MCP) is part of the Agentic AI Foundation donated by Anthropic in 2025 and it is one of the fastest growing open-source projects in the AI category with over 100 million monthly SDK downloads.

In this guide you will learn how to create an MCP app using Flowbite and Skybridge and start developing application for ChatGPT, Claude, Gemini and any other AI client that uses the MCP standard. After setting up the project you'll be able to integrate any UI component and theme from the Flowbite documentation inside your MCP application.

We decided to use the [Skybridge](https://github.com/alpic-ai/skybridge) framework to build MCP apps and we are using the UI components from [Flowbite](https://flowbite.com/).



## Create new MCP app

The first step is to create a new MCP application and start developing locally:

1. Download or clone the [MCP UI Starter](https://github.com/themesberg/mcp-ui-starter/) repository:

{{< code lang="bash" >}}
git clone https://github.com/themesberg/mcp-ui-starter.git
{{< /code >}}

2. Install dependencies using NPM, PNPM, Yarn or Bun:

{{< code lang="bash" >}}
npm install
{{< /code >}}

3. Run a local development server:

{{< code lang="bash" >}}
npm run dev --use-forwarded-host
{{< /code >}}

This command will run a local server on `http://localhost:3000` and will create the following:

- the main MCP server on the `/mcp` endpoint
- a collection of widgets built with Flowbite and React used as tools

## Connect with NGROK

In order to expose the server to AI clients such as ChatGPT, Gemini or Claude we need to host the MCP server.

Install `ngrok` on your computer using Homebrew and run the following command:

{{< code lang="bash" >}}
ngrok http 3000
{{< /code >}}

This will host the MCP server on a URL similar to this one:

{{< code lang="bash" >}}
# this is just an example
https://3785c5ddc4b6.ngrok-free.app/mcp
{{< /code >}}

You will now be able to use this URL to create an application for ChatGPT, Claude, Gemini, and for any MCP clients.

Don't forget to add the `/mcp` endpoint to the URL generated by NGROK.

## Install on AI providers

Use the following guides to connect your MCP app to major AI providers like ChatGPT, Claude, and Gemini.

### ChatGPT apps

Make sure that you have a paid plan to create an application on ChatGPT.

1. Go to Settings > Connectors
2. Scroll down and click on "Advanced Settings"
3. Enable Developer mode
4. Go back to the Settings > Connectors page, and click on "Create in the Browser Connectors"
5. Add a custom connector with the MCP Server URL: `[NGROK_FORWARDING_URL]/mcp`
6. Click on "Create to add the MCP server as a Connector"
7. To use your connector in the chat, click "+"" then "More" and select it.

### Claude Web

Make sure that you have a paid plan to create an application on Claude.

1. Go to Settings > Connectors
2. Find the "Connectors" section
3. Click on "Add custom connector" at the bottom of the section
4. Add your connector's remote MCP server URL: [NGROK_FORWARDING_URL]/mcp
5. Finish configuring your connector and click "Add"
6. To enable connectors, use the "Search and tools button" on the lower left of the chat interface.

### Gemini CLI

Run the following command in your terminal:

{{< code lang="bash" >}}
gemini mcp add --transport http  "[NGROK_FORWARDING_URL]/mcp"
{{< /code >}}

Use `/mcp` in the Gemini CLI terminal to view your recently added MCP server status and discovered tools.

### Cursor

Add your MCP server to Cursor by opening the `mcp.json` file and configure it using `mcpServers`.

{{< code lang="bash" >}}
{
  "mcpServers": {
    "": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}
{{< /code >}}

### VS Code

To add your MCP server to VS Code you need to open the `.vscode/mcp.json` file and configure `servers`.

{{< code lang="bash" >}}
{
  "servers": {
    "": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}
{{< /code >}}

### Claude Code

MCP servers are stored at `~/.claude.json` in Claude Code. Use the CLI to add your MCP app:

{{< code lang="bash" >}}
claude mcp add --transport http  "[NGROK_FORWARDING_URL]/mcp"
{{< /code >}}

### Mistral AI

1. Open the side panel and expand Intelligence > Connectors
2. Click "+ Add Connector" on the right side of the page
3. In the MCP Connectors directory, click the "Custom MCP Connector tab"
4. Enter a name for the connector and the following server URL: `[NGROK_FORWARDING_URL]/mcp`
5. Finish configuring your connector and click "Create"
6. To use the connector, click the "Tools" button below the chat input and enable it in the "Connectors" section.

### Codex

MCP servers in Codex are located at `~/.codex/config.toml` and you can install your MCP app using the CLI:

{{< code lang="bash" >}}
codex mcp add  --url "[NGROK_FORWARDING_URL]/mcp"
{{< /code >}}

## Create a widget

Creating a new widget means setting up the server side where we can set up the input data that comes from the AI client (which is the user prompt itself) and the web component which is the front-end widget where we show the output (such as a chart, data table, or just text).

### Server component

If you want to create a new widget yourself, then first create a new file inside the `server/src/widgets` folder and add the following code that creates a basic server side tool which returns a string as output:

{{< code lang="javascript" icon="file" file="widgets/basic-text-server.tsx" >}}
import { z } from "zod";

// Basic Answer widget configuration
export const basicTextWidget = {
  name: "basic-text" as const,
  metadata: {
    description: "Basic Text",
  },
  toolConfig: {
    description: "Show a text message based on a question.",
    inputSchema: {
      question: z.string().describe("The user's question."),
    },
  },
  handler: async () => {
    try {
      const answer = "Hello, world!";
      return {
        structuredContent: { answer },
        content: [],
        isError: false,
      };
    } catch (error) {
      return {
        content: [{ type: "text" as const, text: `Error: ${error}` }],
        isError: true,
      };
    }
  },
};
{{< /code >}}

### Web component

Then create the front-end part of the widget inside the `web/src/widgets` folder where you can use React code to create the markup of the widget and use the server data, which in this case is a basic text coming from our server component:

{{< code lang="javascript" icon="file" file="web/src/widgets/basic-text.tsx" >}}
import "@/index.css";

import { mountWidget } from "skybridge/web";
import { useToolInfo } from "../helpers";

function BasicTextWidget() {
  const { input, output } = useToolInfo<"basic-text">();
  if (!output) {
    return (
      
    
          
          Loading...
      
    
    );
  }

  return (
    
    
      
    Question: {input.question}
    
      
    Answer: {output.answer}
    
    
    
  );
}

export default BasicTextWidget;

mountWidget();
{{< /code >}}

Finally, register the widget in the `server.ts` file:

{{< code lang="javascript" icon="file" file="server.ts" >}}
import { McpServer } from "skybridge/server";
import { basicTextWidget } from "./widgets/basic-text-server.js";

const server = new McpServer(
  {
    name: "mcp-ui-components",
    version: "0.0.1",
  },
  { capabilities: {} }
)
  .registerWidget(
    basicTextWidget.name,
    basicTextWidget.metadata,
    basicTextWidget.toolConfig,
    basicTextWidget.handler
  )
{{< /code >}}

## Customize theming

Flowbite allows you to easily customize the appearance of the UI components from the MCP apps by using the [theming options](https://flowbite.com/docs/customize/theming/) based on CSS variables from Tailwind.

Select one of the predefined themes from Flowbite or customize the variables yourself in the `index.css` file:

{{< code lang="css" icon="file" file="index.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}



================================================
FILE: content/getting-started/mcp.md
================================================
---
layout: docs
title: Tailwind CSS MCP Server - Flowbite
description: Get started with the official MCP server for Flowbite to integrate UI components into your AI development workflow from Cursor, Windsurf, Claude and other MCP client providers
group: getting-started
toc: true

previous: TypeScript
previousLink: getting-started/typescript/
next: LLM
nextLink: getting-started/llm/
---

MCP (Model-Context-Protocol) is a new way to structure a communication protocol between MCP servers (Flowbite MCP) and MCP clients (ie. Windsurf, Cursor). It enables adding additional context to your AI development workflow by integrating resources and tools specific to your project.

Flowbite MCP is an open-source server that adds the right amount of context to the LLM providers which improves the quality of UI generation in code - whether it's HTML, React, Svelte, or other frameworks.

Additionally, we also developed tools to convert Figma layers to code relevant to your codebase using Flowbite and Tailwind CSS and also other tools such as generating theme files based on branded colors.

## Install Flowbite MCP

The easiest way to install the Flowbite MCP is using NPX:

{{< code lang="bash" >}}
npx flowbite-mcp
{{< /code >}}

You can also run `npx flowbite-mcp --help` to show a list of helpful options.

## Requirements

If you want to use the Figma to code converter tool, you need to get a [personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) from Figma and set it as an environment variable. Otherwise, Flowbite MCP is specifically built for a project that would use Tailwind CSS, Flowbite and optionally Figma for prototyping.

## Configuring MCP client

An MCP client is a software tool such as Cursor, Windsurf or Claude Code that you use for AI development.

Most of these tools supports MCP servers out of the box and you need to update a JSON file that contains the configuration for the MCP servers.

### Cursor

[![Install MCP Server](https://cursor.com/deeplink/mcp-install-dark.svg)](https://cursor.com/en-US/install-mcp?name=flowbite&config=eyJlbnYiOnsiRklHTUFfQUNDRVNTX1RPS0VOIjoiWU9VUl9QRVJTT05BTF9GSUdNQV9BQ0NFU1NfVE9LRU4ifSwiY29tbWFuZCI6Im5weCAteSBmbG93Yml0ZS1tY3AifQ%3D%3D)

Cursor is one of the most popular IDEs for AI development for software engineers and web development. 

To set up Flowbite MCP with Cursor, open the `mcp.json` and add the following configuration:

{{< code lang="javascript" icon="file" file="mcp.json" >}}
{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}
{{< /code >}}

### Windsurf

Windsurf is the second most popular IDE for AI development and the configuration is similar to Cursor. 

Update the `mcp_config.json` file with the following configuration:

{{< code lang="javascript" icon="file" file="mcp_config.json" >}}
{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}
{{< /code >}}

### Claude Code

To install Flowbite MCP in Claude Desktop you need to configure the `claude_desktop_config.json` file:

{{< code lang="javascript" icon="file" file="mcp_config.json" >}}
{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}
{{< /code >}}

If you'd like to request a new integration or have any questions, please open an issue on our [GitHub repository](https://github.com/themesberg/flowbite-mcp).

## Flowbite MCP tools

Use the tools from Flowbite MCP to enhance your AI development workflow.

### Convert Figma to code

With Flowbite MCP you can now convert [Figma layers](https://flowbite.com/figma/) to code by prompting any AI provider. 

Currently, we recommend either Gemini 3, GPT 5 or Sonnet 4.5 for the highest quality code conversions and based on the complexity of the designs, you need to follow up with "reparation prompts".

Here's a prompt example that you can use to convert Figma design to code:

{{< code lang="html" file="Chat interface" >}}
use flowbite mcp to convert this figma  to code
{{< /code >}}

Note: to get the node link from Figma, all you need to do is:

1. Select the Figma layer in your project
2. Right click and select `Copy/paste as`
3. Select `Copy link to selection`

We recommend using the offical [Flowbite Design System](https://flowbite.com/figma/) as a solid foundation for your UI generation.

### Generate theme file

Since we released [theming support](https://flowbite.com/docs/customize/theming/) for Flowbite by providing a better way to customize UI using variables we also built a tool in Flowbite MCP to generate a theme file based on a brand color and a general description of the UI that you'd like to use in your project.

Here's a prompt example that you can use:

{{< code lang="html" file="Chat interface" >}}
use flowbite mcp to generate a theme file using the "#0000FF" brand color
and create a professional, enterprise, clean looking UI (ie. Jira, Facebook)
{{< /code >}}

## Local development

If you'd like to extend Flowbite MCP or contribute to the project, you can run it locally as a server.

We recommend cloning the repository from GitHub, installing the dependencies, building and then running the server.

Using the native MCP inspector tool can also be a great way to debug and test the server.

{{< code lang="bash" >}}
# Clone the repository
git clone https://github.com/themesberg/flowbite-mcp.git
cd flowbite-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in stdio mode (for Claude Desktop, Cursor)
npm start

# Run inspector
npm run start inspector
{{< /code >}}

### Transport modes

Flowbite MCP supports both stdio and http transport modes if you want to run it locally as a server.

Use the `--mode` option to set either `http` or `stdio` transport mode.

{{< code lang="bash" >}}
# Run in HTTP server mode for production
npx flowbite-mcp --mode http --port 3000
{{< /code >}}

Additionally, you can also set the `--port` option to choose a different port for the HTTP server.

### Docker configuration

Flowbite MCP also has a Docker configuration file that you can use to run it as a container.

{{< code lang="bash" >}}
# Build and run with Docker Compose (recommended)
docker-compose up -d

# Check health
curl http://localhost:3000/health

# View logs
docker-compose logs -f

# Stop
docker-compose down
{{< /code >}}

## Contributing

[Flowbite MCP](https://github.com/themesberg/flowbite-mcp) is open-source under the MIT license and contributions are more than welcome to the project.

================================================
FILE: content/getting-started/meteor-js.md
================================================
---
layout: docs
title: Tailwind CSS Meteor.js - Flowbite
description: Learn how to install Tailwind CSS with Flowbite for your Meteor.js project to build full-stack JavaScript or TypeScript web, mobile, and desktop applications
group: getting-started
toc: true
requires_meteorjs: true

previous: Remix
previousLink: getting-started/remix/
next: Gatsby
nextLink: getting-started/gatsby/
---

[Meteor.js](https://meteor.com/) is a full-stack JavaScript platform for developing modern web and mobile applications. Meteor includes a key set of technologies for building connected-client reactive applications, a build tool, and a curated set of packages from the Node.js and general JavaScript community.

- Meteor allows you to develop in one language, JavaScript, in all environments: application server, web browser, and mobile device.

- Meteor uses data on the wire, meaning the server sends data, not HTML, and the client renders it.

- Meteor embraces the ecosystem, bringing the best parts of the extremely active JavaScript community to you in a careful and considered way.

- Meteor provides full stack reactivity, allowing your UI to seamlessly reflect the true state of the world with minimal development effort.

Using both Meteor.js, Tailwind CSS and Flowbite can help you get started building modern UI web applications by leveraging the extensive framework features of Meteor.js, the utility-first approach of the Tailwind CSS framework and the open-source UI components from the Flowbite Library.

## Getting started

The fastest way to get started is using our project creation CLI, which sets up a new Meteor project with Flowbite React, Tailwind CSS, and all necessary configurations.

## Create a Meteor.js project

Use the following command from the Flowbite React CLI toolkit:

{{< code lang="bash" >}}
npx create-flowbite-react@latest -t meteorjs
{{< /code >}}

This will create a new Meteor project, install and configure Tailwind CSS, set up Flowbite React and its dependencies, configure dark mode and also add example components for you to get started.

## Add to existing project

If you already have a Meteor project and want to add Flowbite React, you can use our initialization CLI:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This command will install Flowbite React and configure Tailwind with the Flowbite plugin.

## Custom installation

If you prefer to set everything up manually or need more control over the configuration, follow these steps.

### Create a project

The first step is to create a new Meteor.js project using their CLI toolkit:

{{< code lang="bash" >}}
meteor create meteor-project
cd meteor-project
{{< /code >}}

If you prefer using TypeScript, then add the `--typescript` flag to the command:

{{< code lang="bash" >}}
meteor create meteor-project --typescript
cd meteor-project
{{< /code >}}

Now that you have a new Meteor.js project, you can proceed with installing Tailwind CSS.

### Install Tailwind CSS

The next step is to now install Tailwind CSS (v4) using NPM:

{{< code lang="bash" >}}
npm install -D tailwindcss @tailwindcss/postcss postcss postcss-load-config
{{< /code >}}

Create a `postcss.config.mjs` file inside the root directory of your Meteor.js project:

{{< code lang="bash" >}}
touch postcss.config.mjs
{{< /code >}}

Add `@tailwindcss/postcss` to your `postcss.config.mjs` file:

{{< code lang="javascript" file="postcss.config.mjs" icon="file" >}}
/** @type {import('postcss-load-config').Config} */
const config = {
    plugins: {
        '@tailwindcss/postcss': {},
    },
};
export default config;
{{< /code >}}

Update the css file `client/main.css` to include Tailwind CSS:

{{< code lang="css" file="client/main.css" icon="file" >}}
@import 'tailwindcss';
{{< /code >}}

Now that you have installed and configured Tailwind CSS, you can now proceed with installing Flowbite React.

### Install Flowbite React

To easily install Flowbite React you can use our official CLI toolkit:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This command installs Flowbite React and configures it with Tailwind CSS.

## React components

Now that you have succesfully installed Flowbite React, Meteor.js and Tailwind CSS you can start using our components such as buttons, dropdowns, modal, navbars, and more:

{{< code lang="javascript" file="imports/ui/App.tsx" icon="file" >}}
// imports/ui/App.tsx (or .jsx)
import { Button } from 'flowbite-react';
import React from 'react';

export const App = () => (
    <>
        
    
);
{{< /code >}}

Check out the [official documentation](https://flowbite-react.com) to learn more about the components and how to use them.

## Theme customization

Flowbite React offers an advanced system of customizing your components and templates using the new [theming engine](https://flowbite-react.com/docs/customize/theme). You can style components by directly using the `className` attribute of the component, but also by passing a theme object to the `` component.

For example, here is a simple way you can update a button component:

{{< code lang="javascript" file="App.tsx" icon="file" >}}
import { Button } from "flowbite-react";

function App() {
  return ;
}
{{< /code >}}

Additionally, you can also use the `createTheme` helper to create a theme object that you can then pass on to the `` component with which you can style subcomponents too:

{{< code lang="javascript" file="App.tsx" icon="file" >}}
import { Button, createTheme, ThemeProvider } from "flowbite-react";

const customTheme = createTheme({
  button: {
    color: {
      primary: "bg-red-500 hover:bg-red-600",
      secondary: "bg-blue-500 hover:bg-blue-600",
    },
    size: {
      lg: "px-6 py-3 text-lg",
    },
  },
});

function App() {
  return (
    
      
      
    
  );
}
{{< /code >}}

## Open-source community

The Flowbite React UI library is a free, open-source project licensed under MIT. You can access the source code on [GitHub](https://github.com/themesberg/flowbite-react) and collaborate with our developer community to contribute.

## Support development

If you’d like to support our open-source work, consider exploring the [pro version](https://flowbite.com/pro/) of Flowbite, which includes 400+ components and templates, a Figma design system, an admin dashboard, and more.

================================================
FILE: content/getting-started/next-js.md
================================================
---
layout: docs
title: Tailwind CSS Next.js - Flowbite
description: Learn how to install Tailwind CSS with Flowbite for your Next.js project and start developing with the most popular React-based framework built by Vercel
group: getting-started
toc: true
requires_nextjs: true

previous: React
previousLink: getting-started/react/
next: Vue
nextLink: getting-started/vue/
---

[Next.js](https://nextjs.org/) is a popular web development framework based on the React library that enables server-side rendering and generating static websites improving development time and website performance.

This technology is being used by hundreds of thousands of developers and companies such as Vercel, Netflix, TikTok, Twitch, Hulu, Nike and HBO Max since its original release in 2016.

## Getting started

The fastest way you can get started with Flowbite React and Next.js is by using our project creation CLI.

## Create a Next.js project

Use the following command to create a new Next.js project:

{{< code lang="bash" >}}
npx create-flowbite-react@latest -t nextjs
{{< /code >}}

This will create a new project configured with Next.js,Tailwind CSS (v4) and Flowbite React and it also sets up the dark mode configuration and a couple of example components.

## Add to existing project

If you already have a Next.js project and want to add Flowbite React, you can use our initialization CLI:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This command will install Flowbite React and its dependencies, configure Tailwind CSS to include Flowbite React plugin, and set up necessary configurations.

## Custom installation

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

### Create new project

Use the CLI toolkit from Vercel to create a new Next.js project and include Tailwind CSS when prompted:

{{< code lang="bash" >}}
npx create-next-app@latest
{{< /code >}}

Now you can proceed with installing the Flowbite React UI component library.

### Install Flowbite React

You can easily install Flowbite React by using the official CLI toolkit:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This will install Flowbite React with all dependencies and configures Tailwind to include the Flowbite plugin.

### Adding dark mode

If you want to properly configure dark mode and prevent page flickering before hydration, then you need to add the `ThemeModeScript` to your root layout.

Add the following code to the app router:

{{< code lang="javascript" file="app/layout.tsx" icon="file" >}}
// app/layout.tsx
import { ThemeModeScript } from 'flowbite-react';

export default function RootLayout({ children }) {
    return (
        
            
                
            
            {children}
        
    );
}
{{< /code >}}

And the following code to the page router:

{{< code lang="javascript" file="pages/_document.tsx" icon="file" >}}
// pages/_document.tsx
import { ThemeModeScript } from 'flowbite-react';

export default function Document() {
    return (
        
            
                
            
            
                
    
                
            
        
    );
}
{{< /code >}}

Congratulations! You have now installed and configured Flowbite React in your Next.js application.

## Next.js components

Now that you have successfully installed Flowbite React you can start using the components from the library:

{{< code lang="javascript" file="app/page.tsx" icon="file" >}}
// app/page.tsx
import { Button } from 'flowbite-react';

export default function Page() {
    return ;
}
{{< /code >}}

You can check out all of the UI components from the [Flowbite React](https://flowbite-react.com) library.

## Theme customization

Flowbite React offers an advanced system of customizing your components and templates using the new [theming engine](https://flowbite-react.com/docs/customize/theme). You can style components by directly using the `className` attribute of the component, but also by passing a theme object to the `` component.

For example, here is a simple way you can update a button component:

{{< code lang="javascript" file="app.tsx" icon="file" >}}
import { Button } from "flowbite-react";

function App() {
  return ;
}
{{< /code >}}

Additionally, you can also use the `createTheme` helper to create a theme object that you can then pass on to the `` component with which you can style subcomponents too:

{{< code lang="javascript" file="app.tsx" icon="file" >}}
import { Button, createTheme, ThemeProvider } from "flowbite-react";

const customTheme = createTheme({
  button: {
    color: {
      primary: "bg-red-500 hover:bg-red-600",
      secondary: "bg-blue-500 hover:bg-blue-600",
    },
    size: {
      lg: "px-6 py-3 text-lg",
    },
  },
});

function App() {
  return (
    
      
      
    
  );
}
{{< /code >}}

## Open-source community

The Flowbite React UI library is a free and open-source project under the MIT license. You can find the source code on [GitHub](https://github.com/themesberg/flowbite-react) and contribute to the project together with our community of developers.

## Support development

If you would like to support our open-source work, then you can check out the [pro version](https://flowbite.com/pro/) of Flowbite which brings you over 400+ components and templates, a Figma design system, admin dashboard, and more.

================================================
FILE: content/getting-started/nuxt-js.md
================================================
---
layout: docs
title: Tailwind CSS Nuxt - Flowbite
description: Learn how to install Tailwind CSS with Flowbite for your Nuxt 3 project and start developing with the most popular Vue-based framework inspired by Next.js
group: getting-started
toc: true
requires_nuxtjs: true

previous: Vue
previousLink: getting-started/vue/
next: Svelte
nextLink: getting-started/svelte/
---

[Nuxt](https://nuxt.com/) is a free and open-source JavaScript framework based on Vue.js that helps you develop modern web applications using SSR (server-side rendering) which provides a faster load, better SEO (search engine optimization), and better caching capabilities.

The framework was inspired by Vercel's Next.js framework built with React and it is being used by large companies such as Ecosia, Upwork, NASA, Appsumo, and CDN JS.

If you follow this guide you will learn how to install the latest version 3 of Nuxt with Tailwind CSS v4 and Flowbite and also show you how to use the TypeScript version.

## Create a Nuxt project

Before continuing make sure that you have Node.js and NPM installed on your local machine.

1. Create a new Nuxt project by running the following command in your terminal:

{{< code lang="bash" >}}
npx nuxi init flowbite-app
cd flowbite-app
{{< /code >}}

2. Install the project dependencies by executing the following command:

{{< code lang="bash" >}}
npm install
{{< /code >}}

3. Run the following command to start a local development server on `http://localhost:3000/`:

{{< code lang="bash" >}}
npm run dev
{{< /code >}}

This will make the Nuxt project accessible via the browser.

## Install Tailwind CSS

Now that you have locally set up a Nuxt project we will proceed by installing Tailwind CSS.

1. Require and install the NuxtTailwind module by installing it via NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/vite --save
{{< /code >}}

2. Configure the Nuxt configuration file to include the Tailwind module:

{{< code lang="javascript" file="nuxt.config.ts" icon="file" >}}
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/input.css'], // you'll have to create this file
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
});
{{< /code >}}

3. Create a new CSS file `./assets/css/input.css` and import Tailwind:

{{< code lang="css" file="input.css" icon="file" >}}
@import "tailwindcss";
{{< /code >}}

Tailwind CSS is now configured in your project and if you add the utility classes anywhere in your Vue template files the CSS will be generated and included.

## Install Flowbite

After installing both Nuxt and Tailwind CSS inside your project we can proceed by installing Flowbite.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

## Flowbite components

Now that you have successfully installed Nuxt, Tailwind CSS and Flowbite you can start importing and using components from the open-source library of [Flowbite](https://flowbite.com) such as modals, navbars, tables, dropdowns, and more.

Let's use the }}#javascript-behaviour">Modal component as an example and copy-paste the markup from the documentation inside your `app.vue` page:

{{< code lang="html" file="app.vue" icon="file" >}}

{{< /code >}}

### Data attributes

You can automatically make the interactive components work by importing the init functions from the Flowbite package using the onMounted lifecycle method from Nuxt.

When using Flowbite you need to make sure that the client side JavaScript is executed only after the page is fully loaded. This is why we recommend you to create a `useFlowbite.js` file inside the `composables` folder:

{{< code lang="javascript" file="useFlowbite.js" icon="file" >}}
// composables/useFlowbite.js

export function useFlowbite(callback) {
  if (process.client) {
    import('flowbite').then((flowbite) => {
      callback(flowbite);
    });
  }
}
{{< /code >}}

**Important**: if you are using SSR make sure that this is the only way you're importing Flowbite in your Nuxt application to prevent the document object not being available on the server side.

Then you can import the `useFlowbite` function inside your Nuxt page and use it to initialize the components:

{{< code lang="javascript" file="app.vue" icon="file" >}}



{{< /code >}}

Alternatively, here's a full list of available functions to use to initialise the components separately:

{{< code lang="javascript" file="app.vue" icon="file" >}}

{{< /code >}}

Although this will make sure all of the interactive components will work with data attributes from Flowbite, we actually recommend only initializing the ones that you use for every page to optimize load speed.

Check out the [starter guide's](https://github.com/themesberg/tailwind-nuxt-starter) `Events.vue` file to see it in action.

### JavaScript API

To make the component interactive we need to import the Modal object from Flowbite and set up the object parameters, options, and methods to show or hide the modal based on the button click.

{{< code lang="javascript" file="app.vue" icon="file" >}}

{{< /code >}}

As you can see we use the onMounted() lifecycle method from Vue 3 to query for the elements that we need to create a modal component and then programmatically use the methods such as showing or hiding the modal.

{{< code lang="javascript" file="app.vue" icon="file" >}}
// add your own logic and then show the modal
modal.show();

// or you can hide it
modal.hide();
{{< /code >}}

Every interactive component page that requires JavaScript has documentation on Flowbite showing you the available parameters, options, and methods that you can use.

### Using types

Flowbite also supports TypeScript as of v1.6.0 and it allows us to use type declarations and interfaces for the objects, parameters, and option values for the JavaScript API.

You can import these types or interfaces like this:

{{< code lang="javascript" file="app.vue" icon="file" >}}
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

// other code
{{< /code >}}

Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you’re using the correct types of parameters and methods.

When creating a new modal you can set the ModalInterface as the main type:

{{< code lang="javascript" file="app.vue" icon="file" >}}
const modal: ModalInterface = new Modal($modalElement, modalOptions);
{{< /code >}}

All of the Flowbite components also support type declaration for the options object. Here's an example:

{{< code lang="javascript" file="app.vue" icon="file" >}}
const modalOptions: ModalOptions = {
    placement: 'top-right'
}

const modal: ModalInterface = new Modal($modalElement, modalOptions);
{{< /code >}}

Using types can be very beneficial because it makes sure that you only use the allowed types and values for the options that are available. For example, if you used a value such as `yellow` for the placement object, which is a color, TypeScript will throw an error because it does not meet the type requirements from Flowbite.

Here's the full code using types with TypeScript:

{{< code lang="javascript" file="app.vue" icon="file" >}}
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

const $buttonElement: HTMLElement = document.querySelector('#button');
const $modalElement: HTMLElement = document.querySelector('#modal');

const modalOptions: ModalOptions = {
    placement: 'top-right'
}

const modal: ModalInterface = new Modal($modalElement, modalOptions);
$buttonElement.addEventListener('click', () => modal.toggle());

modal.show();
{{< /code >}}

Learn more about using }}#javascript-behaviour">Flowbite with TypeScript on the official docs page.

## Nuxt Starter Project

We have created a free and open-source [Tailwind CSS and Nuxt starter project](https://github.com/themesberg/tailwind-nuxt-starter) showcasing all of the interactive UI components from Flowbite to help you get started building web applications.

## Flowbite Vue Library

We also started working on a [standalone Flowbite Vue 3 UI component library](https://github.com/themesberg/flowbite-vue) which when launched in a stable version will be the recommended way of working in a Vue 3 or Nuxt environment. Contributions are more than welcome!

================================================
FILE: content/getting-started/phoenix.md
================================================
---
layout: docs
title: Tailwind CSS Phoenix (Elixir) - Flowbite
description: Learn how to install Flowbite with Phoenix and Tailwind CSS to start building rich and interactive web applications based on the Elixir programming language
group: getting-started
toc: true
requires_phoenix: true

previous: Ruby on Rails
previousLink: getting-started/rails/
next: Django
nextLink: getting-started/django/
---

[Phoenix](https://www.phoenixframework.org/) is a popular open-source web development framework based on the Elixir programming language that leverages the Model-View-Controller (MVC) architecture and it can be a viable alternative compared to other back-end framework languages such as Ruby on Rails, Django, or even Flask.

The Phoenix framework and the Elixir programming language are used by quite a few well-established companies and websites such as Pinterest, Moz, Financial Times, Toyota, and even Discord.

By following this guide you will learn how to create a new Phoenix project powered by Elixir, install and set up the Tailwind CSS framework, and finally install Flowbite to leverage the open-source UI components.

## Requirements

Before getting started you need to have both [Elixir](https://elixir-lang.org/), the [Hex](https://hex.pm/) package manager, the [PostgreSQL](https://www.postgresql.org/) relational database server and [Node.js](https://nodejs.org/) installed on your local computer to be able to follow through this guide.

### Install Elixir

If you're using macOS you can use Homebrew to install Elixir in your terminal:

{{< code lang="bash" >}}
brew install elixir
{{< /code >}}

Alternatively, if you're on a Windows device you can install Elixir using Scoop:

{{< code lang="bash" >}}
scoop install erlang
scoop install elixir
{{< /code >}}

You can run `elixir -v` in your terminal to confirm that Elixir has been successfully installed.

Read more about the [Elixir installation guide](https://elixir-lang.org/install.html) for more details if needed.

### Install Hex

Make sure that the Hex package manager is also available. Install it by running the following command:

{{< code lang="bash" >}}
mix local.hex
{{< /code >}}

If you already had Hex locally installed this command will upgrade it to the latest version.

### Install PostgreSQL

To install the open-source PostgreSQL (optional) relational database server we recommend checking out the official [installation guides](https://wiki.postgresql.org/wiki/Detailed_installation_guides) where you can learn how to install the software based on your operating system and device.

If you have Homebrew available you can install PostgreSQL via the terminal:

{{< code lang="bash" >}}
brew install postgresql
{{< /code >}}

Alternatively, you can also use Scoop if you're running on a Windows device:

{{< code lang="bash" >}}
scoop install postgresql
{{< /code >}}

After you've installed PostgreSQL you need to start the server:

{{< code lang="bash" >}}
brew services start postgresql
{{< /code >}}

Additionally, you can connect via the terminal using:

{{< code lang="bash" >}}
psql postgres
{{< /code >}}

Now that you have PostgreSQL installed we can proceed with the other requirements.

### App generator

Now that you have both Elixir and Hex installed you need to set up the Phoenix application generator by running the following command in your terminal:

{{< code lang="bash" >}}
mix archive.install hex phx_new
{{< /code >}}

Make sure that you press "Yes" to all prompts.

## Create a Phoenix project

Now that you have all of the required languages and tools installed you can create a new Phoenix project.
This command will create a fresh installation of a Phoenix application with a folder structure that already includes examples of the MVC pattern including controllers, view templates, and data models.

Using the application generator, you can create a new Phoenix project and make sure that you press "Yes" when prompted to install the local dependencies.

Use this command if you have Postgresql installed:

{{< code lang="bash" >}}
# requires Postgres installed on your machine
mix phx.new my_app
cd my_app/
{{< /code >}}

Alternatively, use the command below to create a Phoenix project without database configurations or generate a project configured with SQLite:

{{< code lang="bash" >}}
# Create Phoenix project without database
mix phx.new my_app --no-ecto
cd my_app/
{{< /code >}}

Or use this command to set up a database with SQLite preconfigured:

{{< code lang="bash" >}}
# Create Phoenix project with SQLite
mix phx.new my_app --database sqlite3
cd my_app/
{{< /code >}}

This command will create a fresh installation of a Phoenix application with a folder structure that already includes examples of the MVC pattern including controllers, view templates, and data models.

2. Run the command below to setup your generated Phoenix project:

{{< code lang="bash" >}}
mix setup
{{< /code >}}

If you used a command that generates a Phoenix project with database configurations, make sure that you have a `postgres` SUPERUSER and a `postgres` database. You can create them first by running the following SQL command while logged into PostgreSQL via the terminal by running `psql postgres`:

{{< code lang="bash" >}}
CREATE USER postgres SUPERUSER;
CREATE DATABASE postgres WITH OWNER postgres;
exit
{{< /code >}}

The `mix ecto.setup` will create a new database for your Phoenix application.

3. Create a local server by running the following command in your terminal:

{{< code lang="bash" >}}
mix phx.server
{{< /code >}}

This will make the Phoenix project available via the browser on `http://localhost:4000`.

## Install Tailwind CSS

[Tailwind CSS](https://tailwindcss.com) is a popular and open-source utility-first CSS framework that allows you to use a huge collection of utility classes directly inside your HTML without having to touch your CSS or create class name constructs - allowing you to focus on developing websites fast and efficiently.

If you are installing [Phoenix version 1.7](https://phoenixframework.org/blog/phoenix-1.7-final-released) or later you can skip this part and go directly to the Flowbite installation guide because Tailwind CSS is automatically configured.

1. Install the Tailwind plugin inside the `mix.exs` file:

{{< code lang="elixir" file="mix.exs" icon="file" >}}
defp deps do
[
    # other dependencies
    {:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
]
end
{{< /code >}}

2. Configure the input and output files inside the `config.exs` file:

{{< code lang="elixir" file="config.exs" icon="file" >}}
config :tailwind, version: "3.2.7", default: [
  args: ~w(
    --config=tailwind.config.js
    --input=css/app.css
    --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
]
{{< /code >}}

You can also set the version of Tailwind CSS that you want to download.

3. Integrate the compilation of Tailwind CSS on deployment inside `mix.esx`:

{{< code lang="elixir" file="mix.exs" icon="file" >}}
defp aliases do
    [
      # other scripts
      "assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"],
    ]
end
{{< /code >}}

4. Inside your `dev.exs` file set up a watcher to compile Tailwind CSS:

{{< code lang="elixir" file="dev.exs" icon="file" >}}
watchers: [
    # other watchers
    tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]
{{< /code >}}

5. Install the official Tailwind CLI and generate a `tailwind.config.js` file:

{{< code lang="bash" >}}
mix tailwind.install
{{< /code >}}

You may have to run `mix deps.get` if the command doesn't install Tailwind CSS right away.

6. Remove the default CSS styles and import the Tailwind directives inside the `./assets/css/app.css` file:

{{< code lang="css" file="app.css" icon="file" >}}
@import "tailwindcss";
{{< /code >}}

7. Restart the server using `mix phx.server` and add some Tailwind CSS classes inside the `index.html.heex` file:

{{< code lang="html" file="index.html.heex" icon="file" >}}

    
  
    <%= gettext "Welcome to %{name}!", name: "Phoenix" %>
    
  
    Peace of mind from prototype to production
    

    
{{< /code >}}

You can now use a collection of open-source UI components based on Tailwind CSS from the [Flowbite Library](https://flowbite.com/docs/getting-started/introduction/) and website sections from the [Flowbite Blocks](https://flowbite.com/blocks/) collection including CRUD layouts, marketing sections, blog layouts, and more.

Now that you have installed both Phoenix and Tailwind CSS we can proceed by installing Flowbite to enable interactivity for the UI components from Flowbite based on JavaScript.

## Install Flowbite

### ESBuild

[Flowbite](https://flowbite.com) is a free and open-source ecosystem of UI component libraries that use the utility-first classes from Tailwind CSS to leverage building interactive, accessible, and commonly used UI components such as dropdowns, navbars, modals, datepickers that can help you build websites even faster.

1. Create a `package.json` file using `npm init` inside the `./assets/` folder and then install the Flowbite package using NPM:

{{< code lang="bash" >}}
npm install flowbite
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" icon="file" file="input.css" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" icon="file" file="input.css" >}}
@source "../node_modules/flowbite";
{{< /code >}}

5. Finally, import the Flowbite JS package inside the default `./assets/js/app.js` file.
   
Because of how Phoenix LiveView works, you will need to import a version of Flowbite which supports the `phx:page-loading-stop` event listeners instead of `load`. 

This will enable the interactive elements like dropdowns, modals, and navbars to work by hooking the event listeners and actions to the data attributes whenever a new LiveView page is loaded, after `navigate`, `patch` or `redirect`.

To do this add the line below to your `app.js` file:

{{< code lang="javascript" file="app.js" icon="file" >}}
// ...

import "flowbite/dist/flowbite.phoenix.js";

// other Phoenix packages
{{< /code >}}
### Include via CDN

Alternatively to all of the above you can also include the JavaScript via CDN:

{{< code lang="html" file="index.html" icon="file" >}}
// include via CDN

{{< /code >}}

This will work for both LiveViews and regular Views.


You can also check out the [Flowbite Quickstart](https://flowbite.com/docs/getting-started/quickstart/) guide to learn how you can set up the Javascript using CDN, via bundling or even using TypeScript.


## Flowbite components

Now that we have a Phoenix project with Tailwind CSS and Flowbite installed we can finally leverage the three technologies to build websites. 

In this section, you will learn how to set up a landing page using the [Flowbite Blocks](https://flowbite.com/blocks/) collection that relies on the open-source Flowbite Library UI components.

1. Go to the `root.html.heex` file and change the default `
    ` tag with a [Flowbite Header](https://flowbite.com/blocks/marketing/header/) component:

{{< code lang="html" file="root.html.heex" icon="file" >}}

    
    

    
{{< /code >}}

If you check out your browser you'll see the component at the top part of your page with an already responsive hamburger menu on mobile devices.

2. Let's find a [hero section](https://flowbite.com/blocks/marketing/hero/) from the Flowbite Blocks collection and add it inside the `index.html.heex` file:

{{< code lang="html" file="index.html.heex" icon="file" >}}

    
    
    
        
            New Flowbite is out! See what's new
            
        
        
    We invest in the world’s potential
    
        
    Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
    
        
    
            
                Learn more
                
            
            
                
                Watch video
            
        
    
        
    
            FEATURED IN
            
    
                
                    
                        
                        
                        
                        
                        
                        
                        
                        
                        
                    
                
                
                    
                        
                        
                        
                    
                
                
                    
                        
                        
                        
                        
                    
                
            
    
        
    
    
    

    
{{< /code >}}

Remove the default `container` class from the `app.html.heex` file to enable the built-in containers.

3. Let's add one of the [content sections](https://flowbite.com/blocks/marketing/content/) right after the hero section:

{{< code lang="html" file="index.html.heex" icon="file" >}}

    
    
    
        
    
            
    We didn't reinvent the wheel
    
            
    We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need. Small enough to be simple and quick, but big enough to deliver the scope you want at the pace you need.
    
            
    We are strategists, designers and developers. Innovators and problem solvers. Small enough to be simple and quick.
    
        
    
        
    
            office content 1
            office content 2
        
    
    
    

    
{{< /code >}}

4. Furthermore, we can copy one of the [feature sections](https://flowbite.com/blocks/marketing/feature/) and add it next in the line:

{{< code lang="html" file="index.html.heex" icon="file" >}}

    
  
    
      
    
          
    Designed for business teams like yours
    
          
    Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
    
      
    
      
    
          
    
              
    
                  
              
    
              
    Marketing
    
              
    Plan it, create it, launch it. Collaborate seamlessly with all  the organization and hit your marketing goals every month with our marketing plan.
    
          
    
          
    
              
    
                  
              
    
              
    Legal
    
              
    Protect your organization, devices and stay compliant with our structured workflows and custom permissions made for you.
    
          
    
          
    
              
    
                  
              
    
              
    Business Automation
    
              
    Auto-assign tasks, send Slack messages, and much more. Now power up with hundreds of new templates to help you get started.
    
          
    
          
    
              
    
                  
              
    
              
    Finance
    
              
    Audit-proof software built for critical financial operations like month-end close and quarterly budgeting.
    
          
    
          
    
              
    
                  
              
    
              
    Enterprise Design
    
              
    Craft beautiful, delightful experiences for both marketing and product with real cross-company collaboration.
    
          
    
          
    
              
    
                  
              
    
              
    Operations
    
              
    Keep your company’s lights on with customizable, iterative, and structured workflows built for all efficient teams and individual.
    
          
    
      
    
  
    

    
{{< /code >}}

5. Before the end of the page we probably want to add a [CTA section](https://flowbite.com/blocks/marketing/cta/):

{{< code lang="html" file="index.html.heex" icon="file" >}}

    
    
    
        dashboard image
        
        
    
            
    Let's create more tools and ideas that brings us together.
    
            
    Flowbite helps you connect with friends and communities of people who share your interests. Connecting with your friends and family as well as discovering new ones is easy with features like Groups.
    
            
                Get started
                
            
        
    
    
    

    
{{< /code >}}

6. Finally, we can finish the landing page by adding one of the [footer components](https://flowbite.com/blocks/marketing/footer/) from Flowbite:

{{< code lang="html" >}}

{{< /code >}}

You can check out the full collection of website sections by browsing the [Flowbite Blocks](https://flowbite.com/blocks/) collection which includes not only marketing sections, but also application UI layouts, CRUD pages, blog templates, and more.

## Datepicker plugin

Since the release of version `2.4.0` of Flowbite the Datepicker component is part of the main package so it should work out of the box without any additional setup.

### Versions prior to 2.4.0

To use the }}">Flowbite Datepicker plugin using JavaScript you will need to include it into your project via NPM:

{{< code lang="bash" >}}
npm install flowbite-datepicker --save
{{< /code >}}

After you've installed the NPM library, you will need to import the `Datepicker` module in your `app.js` file:

{{< code lang="javascript" file="app.js" icon="file" >}}
import Datepicker from 'flowbite-datepicker/Datepicker';
{{< /code >}}

Initialize a new element using the `Datepicker` constructor in `app.js` file and optionally add custom options based on your needs:

{{< code lang="javascript" file="app.js" icon="file" >}}
Hooks = {}

Hooks.Datepicker = {
    mounted() {
        const datepickerEl = this.el;
        new Datepicker(datepickerEl, {
            // options
        });
    },
    updated() {
        this.mounted();
    }
}
{{< /code >}}

Add hooks to your livesocket:

{{< code lang="javascript" file="app.js" icon="file" >}}
let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken }, hooks: Hooks })
{{< /code >}}

Then to your input field add the `Datepicker` `phx-hook` to initialize the datepicker:

{{< code lang="html" file="index.html.heex" icon="file" >}}
  
{{< /code >}}

## Phoenix starter project

The awesome open-source community from Flowbite built a [Phoenix starter project](https://github.com/themesberg/tailwind-phoenix-starter) with Tailwind CSS and Flowbite already configured so that you can use build websites even faster with the most popular utility-first CSS framework and the open-source UI components and website sections from Flowbite.

================================================
FILE: content/getting-started/quickstart.md
================================================
---
layout: docs
title: Flowbite - Quickstart
description: Get started with Flowbite by including it into your project using NPM or CDN
group: getting-started
toc: true

previous: Introduction
previousLink: getting-started/introduction/
next: JavaScript
nextLink: getting-started/javascript/
---

Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.

## Getting started

Flowbite can be easily integrated into your project through NPM. It functions as a plugin for Tailwind CSS and offers both a data attributes interface and a JavaScript API for powering interactive UI components.

### Install using NPM

Make sure that you have Node.js and Tailwind CSS installed. This guide works with Tailwind v4.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" icon="file" file="input.css" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" icon="file" file="input.css" >}}
@source "../node_modules/flowbite";
{{< /code >}}

5. Include the JavaScript code that powers the interactive elements before the end of your `` tag:

{{< code lang="html" icon="file" file="index.html" >}}

{{< /code >}}

Learn more about the Flowbite JavaScript API and functionalities in the [JavaScript section](https://flowbite.com/docs/getting-started/javascript/).

If you have and old project with Tailwind CSS v3 then [check out this guide](#tailwind-css-v3-to-v4) to learn how to upgrade to v4.

### Include using CDN

The quickest way to get started working with Flowbite is to include the CSS and JS into your project via CDN.

Require the following minified stylesheet inside the `head` tag:

{{< code lang="html" icon="file" file="index.html" >}}

{{< /code >}}

And include the following JavaScript file before the end of the `body` element:

{{< code lang="html" icon="file" file="index.html" >}}

{{< /code >}}

Please remember that the best way to work with Tailwind CSS and Flowbite is by purging the CSS classes.

### Bundled JavaScript

One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box.

You can directly import the main JavaScript file inside your bundled `app-bundle.js` file like this:

{{< code lang="javascript" icon="file" file="app.js" >}}
import 'flowbite';
{{< /code >}}

This file has access to all of the components and it automatically applies event listeners to the data attributes.

### Data attributes

The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.

For example, to set up a modal component all you need to do is use `data-modal-target` and `data-modal-{toggle|show|hide}` to toggle, show, or hide the component by clicking on any trigger element.

### Init functions

You can also use the init functions to set up the event listeners yourself. Here's an example how you can do it with Vue or Nuxt:

{{< code lang="javascript" icon="file" file="app.js" >}}



{{< /code >}}

The `initFlowbite` function sets up all of the init functions for dropdowns, modals, navbars, tooltips and so on to hook onto the data attributes. Alternatively, you can also initialise each component category class separately with `initDropdowns` or `initModals`.

You can view more examples by browsing the [components from Flowbite](#components).

### ESM and CJS

Flowbite also offers an API for using the components programmatically and it supports both CJS and ESM for JavaScript which can be helpful if you need to expand the default capabilities of the data attributes interface and get access to function callbacks.

Here's an example how you can import and create a new Modal component inside JavaScript:

{{< code lang="javascript" icon="file" file="app.js" >}}
import { Modal } from 'flowbite'

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

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

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

modal.show();
{{< /code >}}

Check out the JavaScript behaviour section of each component's page to learn how you can use this.

### TypeScript

Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.

Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:

{{< code lang="javascript" icon="file" file="app.ts" >}}
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

// other code
{{< /code >}}

Learn more about Flowbite and TypeScript in the [quickstart guide](https://flowbite.com/docs/getting-started/typescript/).

## Tailwind CSS v3 to v4

If you want to upgrade v3 from Tailwind CSS with Flowbite you have to follow the v4 upgrade guide.

1. Install the next versions of Tailwind CSS and Flowbite using NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/postcss postcss
{{< /code >}}

2. Add the PostCSS plugin inside the `postcss.config.js` file:

{{< code lang="bash" icon="file" file="postcss.config.js" >}}
export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};
{{< /code >}}

3. Remove the old directives in your main CSS file and import Tailwind:

{{< code lang="css" icon="file" file="input.css" >}}
@import "tailwindcss";
{{< /code >}}

4. Use the `@config` directive to import the old configuration file from your project:

{{< code lang="css" icon="file" file="input.css" >}}
/* add this to copy the configuration settings from your project */
@config "../tailwind.config.js";
{{< /code >}}

5. Compile the source CSS file using NPX:

{{< code lang="bash" >}}
npx @tailwindcss/cli -i input.css -o output.css
{{< /code >}}

Now you should be good to go! Check the deprecated changes from v3 to learn more about the new features.

## Tailwind CSS v3

We recommend you to follow the upgrade guide from v3 to v4 since Flowbite works with both.

## Tailwind CSS v2

Flowbite works with the 2.x version of Tailwind CSS.

## WindiCSS

Flowbite also works with WindiCSS by including the plugin inside the `windi.config.js` file:

{{< code lang="javascript" icon="file" file="windi.config.js" >}}
plugins: [
    require('flowbite/plugin-windicss')
],
{{< /code >}}

## Figma design system

The components from Flowbite are first conceptualized and designed in Figma using the latest features such as variants, auto-layout, grids, responsive layouts, and more.

Learn more by checking out Flowbite's Figma design system and start designing your Tailwind CSS projects before actually coding them.

## TypeScript

If you want to use types for the interactive elements you can do that because since `v1.6.0` Flowbite also supports TypeScript.

Learn how to }}">install Tailwind CSS and Flowbite with TypeScript.


    
  {{< requires_react >}}

    

## React

If you're using React as a front-end library you can also use the components from Flowbite including the interactive ones such as the dropdowns, modals, and tooltips as long as you install Tailwind CSS and Flowbite in an existing project.

Learn how to }}">install Tailwind CSS and Flowbite with React.


    
  {{< requires_nextjs >}}

    

## Next.js

If you're using React as a front-end library and Next.js as a framework you can also use the components from Flowbite React such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS.

Learn how to }}">install Tailwind CSS and Flowbite with Next.js and React.


    
  {{< requires_vue >}}

    

## Vue.js

The components from Flowbite can also be used any new or existing Vue 3 projects as long as you install Tailwind CSS and Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Vue.js.


    
  {{< requires_nuxtjs >}}

    

## Nuxt

If you're using Vue 3 as a front-end library and Nuxt as a framework you can also use the components from Flowbite Vue such as the modals, dropdowns, and navbars to speed up your development time coupled with the utility classes from Tailwind CSS.

Learn how to }}">install Tailwind CSS and Flowbite with Nuxt and Vue 3.


    
  {{< requires_laravel >}}

    

## Laravel

If you're running a Laravel application you can easily set up Tailwind CSS and Flowbite and start developing user interfaces based on the utility-first classes and components.

Learn how to }}">install Tailwind CSS and Flowbite with Laravel.


    
  {{< requires_svelte >}}

    

## Svelte

If you're using a Svelte application you can install a standalone Flowbite Svelte library and start developing modern websites using the components from Flowbite and the utility classes from Tailwind CSS.

Learn how to }}">install Tailwind CSS and Flowbite with Svelte.


    
  {{< requires_ruby >}}

    

## Ruby on Rails

If you're using a Ruby on Rails project you can install Tailwind CSS with Flowbite and start building web pages using the utility-first classes and the interactive UI compnonents from Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Ruby on Rails.


    
  {{< requires_django >}}

    

## Django

Check out the Django integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing even faster using the UI components from Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Django.


    
  {{< requires_flask >}}

    

## Flask

Check out the Flask integration guide with Tailwind CSS and Flowbite to set up all technologies and start developing with a micro framework combined with the UI components from Flowbite.

Learn how to }}">install Tailwind CSS and Flowbite with Flask.

## Github repository

The source files are also available to be cloned or downloaded from the official FlowBite Github repository. Don't forget to give it a star if you appreciate the project.


================================================
FILE: content/getting-started/qwik.md
================================================
---
layout: docs
title: Tailwind CSS Qwik - Flowbite
description: Learn how to create a Qwik project and install Tailwind CSS to instantly build scalable and interactive web apps using the UI components from Flowbite
group: getting-started
toc: true
requires_qwik: true

previous: SolidJS
previousLink: getting-started/solid-js/
next: Laravel
nextLink: getting-started/laravel/
---

[Qwik](https://qwik.builder.io/) is a free and open-source front-end framework built by the team behind Builder that allows you to build instant-loading, scalable and interactive web apps by leveraging the precision lazy-loading feature by asynchronously loading component rendering, tasks, listeners, and styles.

The framework was first released on July 18th, 2021 by Adam Bradley and Miško Hevery and has a large community of active developers with a popular GitHub repository with over 18k stars and has a showcase of websites such as Builder.io, Reflact.app, Soundy.cloud and more that rely on Qwik for building websites.

By following this guide you will learn how to create a new Qwik project, install and configure Tailwind CSS and proceed by installing Flowbite to start leveraging the open-source UI components to build interactive and instant-loading websites faster.

## Requirements

Before getting started make sure that you have [Node.js v16.8](https://nodejs.org/en) or higher available on your local machine and we also recommend to install the [Qwik VS Code Extension](https://marketplace.visualstudio.com/items?itemName=johnreemar.vscode-qwik-snippets) to enable Qwik snippets.

## Create a Qwik project

1. Create a new project by running the following command in your terminal:

{{< code lang="bash" >}}
npm create qwik@latest
{{< /code >}}

The custom CLI (command line interface) from Qwik will prompt you with some questions on how you want your project to be configured - follow the steps until you have a fully working directory.

2. Start a local development server by running:

{{< code lang="bash" >}}
npm run start
{{< /code >}}

You should now be able to access a boilerplate Qwik project on `http://localhost:5173/` from your local browser and start developing with the framework.

## Install Tailwind CSS

Tailwind CSS is a popular utility-first CSS framework that allows you to quickly build website user interfaces by directly writing the CSS and styles in your HTML templates via the rich collection of utility classes.

The easiest way to set up Tailwind CSS within your Qwik project is to run a starter script command:

{{< code lang="bash" >}}
npm run qwik add tailwind
{{< /code >}}

This command will automatically set up the following:

- install Tailwind CSS and its dependencies
- modify the `src/global.css` file to import the Tailwind module

By restarting the sever you will now be able to use the utility-first classes from Tailwind CSS.

## Install Flowbite

[Flowbite](https://flowbite.com) is a popular open-source UI component library that is built on top of the Tailwind CSS framework leveraging the utility-first class approach with custom interactive JavaScript that allows you to use and customize a collection of components like dropdowns, navbars, modals, and more.

Follow the next steps to install and set up Flowbite in your Qwik project:

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `global.css` CSS file:

{{< code lang="css" file="src/global.css" icon="file" >}}
@import "flowbite/src/themes/default";
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="src/global.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="src/global.css" icon="file" >}}
@source "../node_modules/flowbite";
{{< /code >}}

5. Finally, in the `src/root.tsx` file import the Flowbite JavaScript file inside your Qwik project to start using interactive components that require JavaScript such as the navbars, dropdowns, drawers, and more:

{{< code lang="javascript" file="src/root.tsx" icon="file" >}}
import { component$, useVisibleTask$ } from "@builder.io/qwik";
import {
  QwikCityProvider,
  RouterOutlet,
  ServiceWorkerRegister,
} from "@builder.io/qwik-city";
import { RouterHead } from "./components/router-head/router-head";
import { isDev } from "@builder.io/qwik";

// import the Flowbite module
import { initFlowbite } from "flowbite";

import "./global.css";

export default component$(() => {
  /**
   * The root of a QwikCity site always start with the  component,
   * immediately followed by the document's  and .
   *
   * Don't remove the `` and `` elements.
   */

  // initialise the event listeners for the data attributes on render
  useVisibleTask$(() => {
    initFlowbite();
  });

  return (
    
      
        
        {!isDev && (
          
        )}
        
      
      
        
        {!isDev && }
      
    
  );
});

{{< /code >}}

Congratulations! Now you can start using all of the UI components from the Flowbite Library inside your Qwik project together with Tailwind CSS and build websites and user interfaces even faster.

## UI components

By installing and configuring Flowbite in your Qwik project you can now directly copy and paste any [UI component from the library](https://flowbite.com/docs/getting-started/introduction/) and the [blocks collection](https://flowbite.com/blocks/) into your view files.

Check out one of the [navbar components](https://flowbite.com/docs/components/navbar/) from Flowbite and add it inside your Qwik project for navigation:

{{< code lang="javascript" file="src/components/Navbar.jsx" icon="file" >}}
export default header$(() => {
  return (
  
  );
});
{{< /code >}}

Another example is the [modal component](https://flowbite.com/docs/components/modal/) which you could use for a seamless authentication experience:

{{< code lang="javascript" file="src/components/Modal.jsx" icon="file" >}}
export default modal$(() => {
  return (
    
    
        

        
    
    
  );
});
{{< /code >}}

Lastly, you can also copy-paste whole [blocks of code](https://flowbite.com/blocks/marketing/hero/) such as hero, footer, header, and feature sections:

{{< code lang="javascript" file="src/components/Hero.jsx" icon="file" >}}
export default hero$(() => {
  return (
    
    
        
    
            
                New Flowbite is out! See what's new 
                
            
            
    We invest in the world’s potential
    
            
    Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
    
            
    
                
                    Learn more
                    
                
                
                    
                    Watch video
                  
            
    
            
    
                FEATURED IN
                
    
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                            
                                                
                    
                    
                        
                            
                            
                            
                                               
                    
                    
                        
                            
                            
                            
                            
                                                                           
                             
                
    
            
     
        
    
    
    
  );
});
{{< /code >}}

Here's a full list of UI components, sections, and templates resources you can leverage from Flowbite:

- [Flowbite Library](https://flowbite.com/docs/getting-started/introduction/)
- [Flowbite Blocks](https://flowbite.com)
- [Flowbite Dashboard](https://github.com/themesberg/flowbite-admin-dashboard)
- [Flowbite Pro](https://flowbite.com/pro/)

## Qwik starter project

The open-source community from Flowbite has created a [Qwik starter project](https://github.com/themesberg/tailwind-qwik-starter) that has Tailwind CSS and Flowbite already installed and includes a showcase of some of the UI components already configured.

## Qwik components

You can check out the whole collection of Flowbite components built with Qwik and Tailwind CSS by checking out the [GitHub repository](https://github.com/qwikerx/flowbite-qwik) and the [Flowbite Qwik](https://flowbite-qwik.com) official documentation.


================================================
FILE: content/getting-started/rails.md
================================================
---
layout: docs
title: Tailwind CSS Ruby on Rails - Flowbite
description: Learn how to install Tailwind CSS with Flowbite for your Ruby on Rails project and start developing modern web applications based on the full-stack framework
group: getting-started
toc: true
requires_rails: true

previous: Symfony
previousLink: getting-started/symfony/
next: Phoenix (Elixir)
nextLink: getting-started/phoenix/
---

[Ruby on Rails](https://rubyonrails.org/) is an open-source full-stack web application framework that runs server-side written in Ruby and built by the creators of Basecamp based on a model-view-controller architecture.

Popular websites such as GitHub, Shopify, Twitch, Dribbble, AirBnB, and Coinbase are all based on the Ruby on Rails framework and it is continued to be used by thousands of companies and developers.

In this guide, you will learn how to set up Ruby on Rails with Tailwind CSS and install Flowbite to start using the UI components built with the utility classes from Tailwind CSS.

## Create a new project

Follow the next steps to get started with a Ruby on Rails project and install Tailwind CSS and Flowbite. 

Make sure that you have [Node.js](https://nodejs.org/en/) and [Ruby](https://www.ruby-lang.org/en/documentation/installation/) installed on your machine before continuing.

1. Run the following command to install the `rails` gem from Ruby:

{{< code lang="bash" >}}
gem install rails
{{< /code >}}

2. Create a new Ruby on Rails application if you don't already have one:

{{< code lang="bash" >}}
rails new flowbite-app
cd flowbite-app
{{< /code >}}

Now that you have created a new project you can proceed by setting up Tailwind CSS.

## Install Tailwind CSS

Since Tailwind v4, it's really easy to install Tailwind CSS with Rails, because we no longer need to have a custom `tailwind.config.js` file. Instead, everything is configured in your main CSS file.

1. Install the official `tailwindcss-rails` gems:

{{< code lang="bash" >}}
./bin/bundle add tailwindcss-ruby
./bin/bundle add tailwindcss-rails
{{< /code >}}

2. Run the install command to set up the Tailwind configuration files:

{{< code lang="bash" >}}
./bin/rails tailwindcss:install
{{< /code >}}

Now that Tailwind CSS has been successfully installed you can proceed by installing Flowbite.

## Install Flowbite

1. Install Flowbite by running the following command in your terminal:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `application.css` CSS file:

{{< code lang="css" file="application.css" icon="file" >}}
@import "flowbite/src/themes/default";
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="application.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="application.css" icon="file" >}}
@source "../../../node_modules/flowbite";
{{< /code >}}

### Turbo load support

Flowbite provides custom event listeners for turbo load support if you import the `flowbite.turbo.js` file. Check out the following guides to learn more how to integrate the JavasScript file that powers the interactive components with Importmap or ESBuild.

### Importmap

Importmap is the default way of handling JavaScript on Rails 7. In order to support turbo load from importmaps you have to pin the `flowbite.turbo.js` file from a CDN where the `turbo:load` event listeners are added instead of `load`.

1. Add the following line inside your `importmap.rb` file:

{{< code lang="ruby" file="importmap.rb" icon="file" >}}
pin "flowbite", to: "https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.turbo.min.js"
{{< /code >}}

2. Then you need to import `flowbite` inside your `application.js` file:

{{< code lang="javascript" file="application.js" icon="file" >}}
import 'flowbite';
{{< /code >}}

This will enable the interactive elements like dropdowns, modals, and navbars work by hooking the event listeners and actions to the data attributes whenever a new page is loaded in your application.

### ESBuild

If you use ESBuild to Bundle your JavaScript on Rails, you will need to import a version of Flowbite which supports the `turbo:load` event listeners instead of `load`. To do this **add the line below** to your `application.js` file:

{{< code lang="javascript" file="application.js" icon="file" >}}
import "flowbite/dist/flowbite.turbo.js";
{{< /code >}}

### Standard JS (no turbo)

If you decide not to use turbo load then you can follow these steps:

1. Run this command to pin Flowbite in your `importmap.rb` file:

{{< code lang="bash" >}}
./bin/importmap pin flowbite
{{< /code >}}

2. Then you need to include Flowbite inside your `application.js` file:

{{< code lang="javascript" file="application.js" icon="file" >}}
import 'flowbite';
{{< /code >}}

### Include via CDN

Alternatively to all of the above you can also include the JavaScript via CDN:

{{< code lang="html" file="index.html" icon="file" >}}
// include via CDN for turbo support


// include via CDN without turbo support

{{< /code >}}

### Datepicker

Since the release of version `2.4.0` of Flowbite the Datepicker component is now part of the main package so you don't need to include `datepicker.turbo.js` separately. It will work out of the box.

### Versions prior to 2.4.0

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

Include the following JavaScript file to support the datepicker component:

{{< code lang="ruby" file="importmap.rb" icon="file" >}}
pin "flowbite-datepicker", to: "https://cdn.jsdelivr.net/npm/flowbite@2.3.0/dist/datepicker.turbo.min.js"
{{< /code >}}

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

{{< code lang="javascript" file="application.js" icon="file" >}}
import 'flowbite-datepicker';
import 'flowbite/dist/datepicker.turbo.js';
{{< /code >}}

## Building your project

Run the following command to start a local server and build the source files:

{{< code lang="bash" >}}
./bin/dev
{{< /code >}}

This will create a local server and you will be able to access the pages on `localhost:3000`.

You can also run `rails tailwindcss:build` to compile Tailwind CSS.

## Create a homepage

First of all, you need to delete the default `index.html` file inside the `public/` directory and then follow these steps:

1. Create a new `pages/` directory inside the `app/views/` directory.
2. Create a new `home.html.erb` file inside the `app/views/pages/` directory.
3. Choose one of the components from Flowbite (ie. a tooltip) and copy-paste it inside the newly created file:

{{< code lang="html" file="home.html.erb" icon="file" >}}


{{< /code >}}

4. Create a new controller called `pages_controller.rb` inside the `app/controllers/` directory and add the following code inside of it:

{{< code lang="ruby" file="pages_controller.rb" icon="file" >}}
class PagesController < ApplicationController
  def home
  end
end
{{< /code >}}

5. Set the homepage as the root page inside the `routes.rb` file inside the `config/` directory:

{{< code lang="ruby" file="routes.rb" icon="file" >}}
root to: 'pages#home'
{{< /code >}}

If you have run `./bin/dev` to start a local server you should see the changes on `localhost:3000/` and the utility classes from Tailwind CSS should work and the interactive components from Flowbite should also be functional.

## Rails starter project

We have released an open-source [Ruby on Rails project with Tailwind CSS and Flowbite](https://github.com/themesberg/tailwind-rails-starter) that you can use to get starter with a new project where we have showcased most of the components from Flowbite.

================================================
FILE: content/getting-started/react.md
================================================
---
layout: docs
title: Tailwind CSS React - Flowbite
description: Learn how to install Tailwind CSS with Flowbite for your React project and start developing modern web applications using interactive elements based on utility classes
group: getting-started
toc: true
requires_react: true

previous: Changelog
previousLink: getting-started/changelog/
next: Next.js
nextLink: getting-started/next-js/
---

[React](https://react.dev/) is one of the most popular front-end libraries in the world used by websites such as Facebook, Instagram, Yahoo Mail, Dropbox, and more built by the Meta (formerly Facebook) company.

Coupled with Tailwind CSS and the React components from Flowbite you will be able to develop applications faster than ever based on the [Flowbite React](https://flowbite-react.com) library using advanced theming functionalities and React specific components and methodologies.

## Getting started

You can easily install or add Flowbite React to an existing project with our new CLI toolkit.

## Create a React project

Use our project creation CLI to scaffold a new application with Flowbite React already configured:

{{< code lang="bash" >}}
npx create-flowbite-react@latest
{{< /code >}}

This will create a new project with React, Flowbite, and Tailwind CSS (v4) ready to use.

## Add to existing project

For existing projects, use the Flowbite React CLI to set up and configure everything automatically:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This will add Flowbite React and configure Tailwind CSS to an existing React project.

## Integration Guides

Flowbite React is a UI component library that can be integrated with many other technologies and libraries such as Next.js, Astro, Gatsby, Laravel, Remix and more.

Check out [this page](https://flowbite-react.com/docs/getting-started/quickstart) to learn how to get started with each integration.

## React components

Flowbite React offers a wide variety of UI components such as buttons, dropdowns, modals, datepickers, and more that you can plug and play into your application. Check out the [Flowbite React docs](https://flowbite-react.com/docs/components/button) for more details.

## Theme customization

Flowbite React offers an advanced system of customizing your components and templates using the new [theming engine](https://flowbite-react.com/docs/customize/theme). You can style components by directly using the `className` attribute of the component, but also by passing a theme object to the `` component.

For example, here is a simple way you can update a button component:

{{< code lang="javascript" file="app.jsx" icon="file" >}}
import { Button } from "flowbite-react";

function App() {
  return ;
}
{{< /code >}}

Additionally, you can also use the `createTheme` helper to create a theme object that you can then pass on to the `` component with which you can style subcomponents too:

{{< code lang="javascript" file="app.jsx" icon="file" >}}
import { Button, createTheme, ThemeProvider } from "flowbite-react";

const customTheme = createTheme({
  button: {
    color: {
      primary: "bg-red-500 hover:bg-red-600",
      secondary: "bg-blue-500 hover:bg-blue-600",
    },
    size: {
      lg: "px-6 py-3 text-lg",
    },
  },
});

function App() {
  return (
    
      
      
    
  );
}
{{< /code >}}

## Storybook

Flowbite React also has a [Storybook](https://storybook.flowbite-react.com/) version which you can use to preview and test components in isolation.

## Open-source community

The Flowbite React UI library is an open-source project under the MIT license. You can access the source code on [GitHub](https://github.com/themesberg/flowbite-react) and collaborate with our community of developers to contribute to its growth.

## Support development

If you’d like to support our open-source work, you can explore the [pro version](https://flowbite.com/pro/) of Flowbite, which offers 400+ components and templates, a Figma design system, an admin dashboard, and more.

================================================
FILE: content/getting-started/remix.md
================================================
---
layout: docs
title: Tailwind CSS Remix - Flowbite
description: Learn how to install Remix with Tailwind CSS and the UI components from Flowbite to leverage quicker page loads with a full-stack web framework built by Shopify
group: getting-started
toc: true
requires_remix: true

previous: Astro
previousLink: getting-started/astro/
next: Meteor.js
nextLink: getting-started/meteor-js/
---

[Remix](https://remix.run/) is a full-stack web framework based on React that allows you to build websites with quicker page load by leveraging distributed systems and using the native Web Fetch API to load content from the server.

The Remix framework is being used by hundreds of thousands of developers and large companies one of which is Shopify which actually acquired it on October 31st, 2022.

Follow the next steps in this guide to learn how to create a new Remix project and install and setup Tailwind CSS together with the UI components from Flowbite.

## Requirements

Before getting started make sure you that have [Node.js](https://nodejs.org/en/) and NPM installed on your local machine to be able to install the required packages including Remix, Tailwind CSS and Flowbite.

## Getting started

The fastest way to get started is using our project creation CLI, which sets up a new Remix project with Flowbite React, Tailwind CSS, and all necessary configurations:

{{< code lang="bash" >}}
npx create-flowbite-react@latest -t remix
{{< /code >}}

This command will create a new Remix project, install Tailwind CSS (v4), Flowbite React with all its dependencies, and set up dark mode support with a couple of example components to get you started.

## Add to existing project

If you already have a Remix project and want to add Flowbite React, you can use our initialization CLI:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This command will automatically install Flowbite React and its dependencies and configure the Flowbite plugin with Tailwind within an existing Remix project.

## Custom installation

If you prefer to set everything up manually or need more control over the configuration, follow these steps.

### Create new project

Create a new Remix project using the official CLI toolkit:

{{< code lang="bash" >}}
npx create-remix@latest
{{< /code >}}

This command will create a fresh new Remix project.

### Install Flowbite React

You can now proceed with installing Flowbite React:

{{< code lang="bash" >}}
npx flowbite-react@latest init
{{< /code >}}

This command will install Flowbite React and configure Tailwind and Vite with the Flowbite plugin.

### Add dark mode

In server-side rendered applications like Remix, to avoid page flicker (if `dark` mode is set) before Remix hydrates the content, the `ThemeModeScript` component must be rendered in the `` tag. The component renders a script tag that sets `dark` or removes `dark` from the `` element before hydration occurs.

Import and render `ThemeModeScript` in `app/root.tsx` the `` tag:

{{< code lang="javascript" file="app/root.tsx" icon="file" >}}
import { ThemeModeScript } from 'flowbite-react';

export default function Layout() {
    return (
        
            
                {/* ... */}
                
            
            {/* ... */}
        
    );
}
{{< /code >}}

Congratulations! You have now installed and configured Flowbite React within a Remix project.

## Remix components

Now that you have successfully installed Flowbite React you can start using the components from the library:

{{< code lang="javascript" file="app/routes/_index.tsx" icon="file" >}}
// app/routes/_index.tsx

import { Button } from 'flowbite-react';

export default function Index() {
    return ;
}
{{< /code >}}

Check out the [Flowbite React documentation](https://flowbite-react.com/) to learn more about the components and how to use them.

## Theme customization

Flowbite React offers an advanced system of customizing your components and templates using the new [theming engine](https://flowbite-react.com/docs/customize/theme). You can style components by directly using the `className` attribute of the component, but also by passing a theme object to the `` component.

For example, here is a simple way you can update a button component:

{{< code lang="javascript" file="app/routes/_index.tsx" icon="file" >}}
import { Button } from "flowbite-react";

function App() {
  return ;
}
{{< /code >}}

Additionally, you can also use the `createTheme` helper to create a theme object that you can then pass on to the `` component with which you can style subcomponents too:

{{< code lang="javascript" file="app/routes/_index.tsx" icon="file" >}}
import { Button, createTheme, ThemeProvider } from "flowbite-react";

const customTheme = createTheme({
  button: {
    color: {
      primary: "bg-red-500 hover:bg-red-600",
      secondary: "bg-blue-500 hover:bg-blue-600",
    },
    size: {
      lg: "px-6 py-3 text-lg",
    },
  },
});

function App() {
  return (
    
      
      
    
  );
}
{{< /code >}}

## Open-source community

The Flowbite React UI library is an open-source project available for free under the MIT license. Its source code is hosted on [GitHub](https://github.com/themesberg/flowbite-react), where you can collaborate and contribute alongside our developer community.

## Support development

If you’d like to support our open-source efforts, consider exploring the [pro version](https://flowbite.com/pro/) of Flowbite, which includes 400+ components and templates, a Figma design system, an admin dashboard, and more.

================================================
FILE: content/getting-started/solid-js.md
================================================
---
layout: docs
title: Tailwind CSS SolidJS - Flowbite
description: Learn how to install SolidJS with Tailwind CSS and Flowbite and get started with building web applications with a simple and performant reactive JavaScript library
group: getting-started
toc: true
requires_solidjs: true

previous: Gatsby
previousLink: getting-started/gatsby/
next: Qwik
nextLink: getting-started/qwik/
---

[SolidJS](https://www.solidjs.com/) is a popular and open-source declarative JavaScript library that empowers reactive UI interfaces for the web that ensures a performant benchmark, leverages the flexibility of JSX and also provides support for TypeScript, Astro, and Vite.

The SolidJS library is used by many web developers and smaller companies and it was even spotted being used in OpenAI's ChatGPT interface used for artificial intelligence UI/UX interactivity.

By following the steps from this guide you will learn how to create a new project using SolidJS, install and set up Tailwind CSS to leverage the utility classes and finally install and integrate the free and open-source UI components from Flowbite.

## Requirements

Before getting started make sure that you have [Node.js](https://nodejs.org/en/) installed on your local machine to be able to install both SolidJS, Tailwind CSS and Flowbite.

## Create a SolidJS project

1. Execute the following command in your terminal to create a new SolidJS project using Vite Templates:

{{< code lang="bash" >}}
npx degit solidjs/templates/js flowbite-app
cd flowbite-app
{{< /code >}}

This command will create a boilerplate project that sets up a basic project structure and dependency files.

2. Install the project dependencies using NPM:

{{< code lang="bash" >}}
npm install
{{< /code >}}

3. Execute the following command to create a local development server:

{{< code lang="bash" >}}
npm run dev
{{< /code >}}

The newly created SolidJS project will now be accessible via the browser on `http://localhost:3000`.

4. Create a production build by running the following command in your terminal or deployment pipeline:

{{< code lang="bash" >}}
npm run build
{{< /code >}}

You now have a working SolidJS project configuration installed and can now proceed with installing Tailwind CSS and Flowbite to build web UI interfaces even faster.

## Install Tailwind CSS

[Tailwind CSS](https://tailwindcss.com/) is the most popular utility-first CSS framework leveraging PostCSS and utility classes inside your templates to speed up UI development.

1. Install Tailwind CSS using NPM and executing the following command in your terminal:

{{< code lang="bash" >}}
npm install --save-dev tailwindcss @tailwindcss/postcss postcss
{{< /code >}}

2. Create a new `postcss.config.mjs` configuration file and at the following code:
   
{{< code lang="javascript" file="postcss.config.mjs" icon="file" >}}
// postcss.config.mjs
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}
{{< /code >}}

3. Import the default Tailwind CSS directive inside the `./src/index.css` default CSS file from SolidJS:

{{< code lang="css" file="src/index.css" icon="file" >}}
@import "tailwindcss";
{{< /code >}}

4. Restart your local development server by running `npm run dev` and you can now use the utility-first classes inside your SolidJS project by testing it out in your `App.jsx` file:

{{< code lang="javascript" file="src/App.jsx" icon="file" >}}
function App() {
  return (
    
    
      
    
        logo
        
    
          Edit src/App.jsx and save to reload.
        
    
        
          Learn Solid, Tailwind CSS and Flowbite
        
      
    
    
    
  );
}

export default App;
{{< /code >}}

You now have both SolidJS and Tailwind CSS successfully installed and configured in your local project and we can now proceed by setting up the UI components from Flowbite.

## Install Flowbite

[Flowbite](https://flowbite.com) is a popular and open-source UI component library built on top of the classes from Tailwind CSS and it can help you kickstart building websites and applications by leveraging interactive UI components such as navbars, modals, dropdowns, datepickers, and more.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `index.css` CSS file:

{{< code lang="css" file="src/index.css" icon="file" >}}
@import "flowbite/src/themes/default";
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="src/index.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="src/index.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

Now that you have installed Flowbite you can start using the UI components from the documentation inside your SolidJS project.

## Flowbite components

All of the interactive and non-interactive components from Flowbite can now be used so let's first start by adding the [Modal component](https://flowbite.com/docs/components/modal/) by creating a new `Modal.jsx` component.

The most important part is that you need to import the `initFlowbite()` function from Flowbite and then call this function using the `onMount` hook method from SolidJS so that the interactive data attributes events can be initialized.

{{< code lang="javascript" file="src/components/Modal.jsx" icon="file" >}}
import logo from './logo.svg';
import styles from './App.module.css';

import { initFlowbite } from 'flowbite';
import { onMount } from 'solid-js';

function Modal() {
  onMount(() => {
    initFlowbite();
  });

  return (
    
    
      

      
    
    
  );
}

export default App;
{{< /code >}}

This example adds a button which when clicked it will open a modal component with a title, description, and close button.

Let's now show a [tooltip indicator](https://flowbite.com/docs/components/tooltips/) when hovering over the button to provide extra information:

{{< code lang="html" file="src/components/Modal.jsx" icon="file" >}}



{{< /code >}}

Finally, let's add an [accordion component](https://flowbite.com/docs/components/accordion/) inside the modal:

{{< code lang="html" file="src/components/Modal.jsx" icon="file" >}}

    
  
    
    
  
    
  
  
    
    
  
    
  
  
    
    
  
    
  

    
{{< /code >}}

These examples should give you a pretty good idea how you can leverage the UI components from Flowbite together with Tailwind CSS and SolidJS to build performant and reactive web applications.

## SolidJS starter project

The open-source community from Flowbite created a [SolidJS starter project](https://github.com/themesberg/tailwind-solidjs-starter) that follows the steps from this guide that you can use to quickly start using these three technologies for your next project.

================================================
FILE: content/getting-started/svelte.md
================================================
---
layout: docs
title: Tailwind CSS Svelte - Flowbite
description: Learn how to install Tailwind CSS with Flowbite for your Svelte project and start developing modern web applications using interactive elements based on utility classes
group: getting-started
toc: true
requires_svelte: true

previous: Nuxt
previousLink: getting-started/nuxt-js/
next: Angular
nextLink: getting-started/angular/
---

This page will guide you through installing Tailwind CSS with Flowbite for your Svelte project, so you can start developing modern web applications using interactive elements based on utility classes.

## Introduction

Svelte is a modern and growing front-end compiler. Developers build boilerplate-free components using languages HTML, CSS and JavaScript. Svelte compiles your code to tiny, framework-less vanilla JS.

[Flowbite Svelte](https://flowbite-svelte.com/) is an official Flowbite component library for Svelte that allows you to use interactive components with ease. Tailwind CSS, on the other hand, is a utility-first CSS framework that helps you quickly build custom user interfaces.

Together, Tailwind CSS and Flowbite Svelte can help you create modern and interactive web applications in a fraction of the time it would take to do it from scratch.

## Install Svelte

Before we can start using Tailwind CSS and Flowbite Svelte, we need to install Svelte. There are two ways to do this: using SvelteKit or using Svelte.

### SvelteKit

To install SvelteKit, run the following commands:

{{< code lang="bash" >}}
npm create svelte@latest my-app
cd my-app
pnpm i
{{< /code >}}

This will create a new SvelteKit application inside the `my-app` directory.

### Svelte

To install Svelte, run the following commands:

{{< code lang="bash" >}}
npm create vite@latest myapp -- --template svelte
cd myapp
pnpm i
{{< /code >}}

This command will create a new Svelte application using Vite.

## Install Tailwind CSS 

Next, we need to install Tailwind CSS.

{{< code lang="bash" >}}
cd myapp
npx svelte-add@latest tailwindcss
pnpm i
{{< /code >}}

This command will add and configure Tailwind CSS inside your Svelte project.

## Install Flowbite

Now, we can install Flowbite with Svelte and their dependencies. [Flowbite Svelte](https://flowbite-svelte.com) is an official Flowbite UI component library recommended for usage with Svelte with native interactivity handles.

Install the Flowbite packages and dependencies using `pnpm`:

{{< code lang="bash" >}}
pnpm i flowbite flowbite-svelte tailwind-merge @popperjs/core
{{< /code >}}

We also need to update the `tailwind.config.js` file with the following details:

{{< code lang="javascript" file="tailwind.config.js" icon="file" >}}
const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
  ],

  plugins: [
    require('flowbite/plugin')
  ],

  darkMode: 'class',
  
  theme: {
    extend: {
      colors: {
        // flowbite-svelte
        primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B'},
      }
    }
  }
};

module.exports = config;
{{< /code >}}

This ensures that the Tailwind CSS compiler will know what dynamic classes have to be added and also configures some custom CSS from Flowbite.

## Flowbite Svelte components

Now that everything is installed, we can start using Flowbite Svelte components in our Svelte project.

The navbar component is a great way to display a list of navigation links at the top of your page. Here's an example of how to use it:

{{< code lang="html" file="Navbar.svelte" icon="file" >}}



  
    Flowbite Logo
    
      Flowbite
    
  
  
  
    Home
    About
    Services
    Pricing
    Contact
  

{{< /code >}}

The navbar component has several customization options, such as dropdowns, search bars, CTA buttons, and sticky navbars. For more examples, check out the [navbar component page](https://flowbite-svelte.com/docs/components/navbar).

Alternatively, you can also choose of the [mega menu](https://flowbite-svelte.com/docs/components/mega-menu) components from Flowbite Svelte.

The modal component is perfect for showing interactive dialogs and notifications. Here's an example of how to use it:

{{< code lang="html" file="Modal.svelte" icon="file" >}}




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

The modal component has various customization options, such as different types of modals, buttons, and other interactive elements. For more examples, check out the [modal component page](https://flowbite-svelte.com/docs/components/modal).

The footer component is a useful way to display valuable information to your users, such as sitemap links, a copyright notice, and a logo.

{{< code lang="html" file="Footer.svelte" icon="file" >}}



    
  
  
    About
    Privacy Policy
    Licensing
    Contact
  

    
{{< /code >}}

The footer component also has several customization options, such as adding logos, social media links, and sitemap links. For more examples, check out the [footer component page](https://flowbite-svelte.com/docs/components/footer).

## Flowbite Svelte starters

The awesome open-source community has created a couple of starter projects that you can use to get up and running with Flowbite Svelte quicker with templates and boilerplate starters:

- [Flowbite SvelteKit starter](https://github.com/shinokada/flowbite-svelte-starter)
- [Svelte TS starter](https://github.com/shinokada/svelte-ts-starter)
- [Svelte starter](https://github.com/shinokada/svelte-starter)
- [Laravel, Inertia, Svelte, Typescript with Flowbite starter](https://github.com/ZekyTheWolf/LIST-Starter)



## Flowbite Svelte blocks

The [Flowbite Svelte Blocks](https://flowbite-svelte-blocks.vercel.app/) collection is a great resource for free UI components for marketing, applications, and publishers built with the Flowbite Svelte library. 

There are various examples to explore, making it an excellent resource for inspiration and learning.

## UI Component Library

The [Flowbite Svelte library](https://github.com/themesberg/flowbite-svelte) offers more than 130 components, including interactive elements, navigation menus, modals, forms, footers, typograpy, and much more. These components are built with Svelte and Tailwind CSS, making them easy to use and customize in your web application. 

You can save time and effort by not having to build these components from scratch. Check out the [Flowbite Svelte Library](https://flowbite-svelte.com/) to explore all the available components.

## Contributing

The [Flowbite Svelte](https://github.com/themesberg/flowbite-svelte) library on GitHub is an open-source project and many developers contribute to the project by adding new components and improving the current codebase. 

Contributing is a great way by saying thank you or building up your developer portfolio.


================================================
FILE: content/getting-started/symfony.md
================================================
---
layout: docs
title: Tailwind CSS Symfony (PHP) - Flowbite
description: Learn how to install Flowbite with Symfony and Tailwind CSS to use a free and open-source PHP web application framework developed by SensioLabs SAS
group: getting-started
toc: true
requires_symfony: true

previous: Laravel
previousLink: getting-started/laravel/
next: Ruby on Rails
nextLink: getting-started/rails/
---

[Symfony](https://symfony.com/) is one of the definitive web application frameworks in the PHP ecosystem offering over 50 standalone PHP components and an MVC framework for your web application that you can use to build complex applications, website pages and even API services.

The Symfony PHP framework was first launched as an open-source software back in 2005 by SensioLabs SAS and it is currently used by numerous companies and frameworks including Laravel, Spotify, BlaBlaCar, Trivago, Dailymotion and more.

Follow the steps from this guide to learn how to create a new Symfony project on your local computer, install and configure the Tailwind CSS framework, and finally install Flowbite and leverage the open-source UI components to build websites even faster.

## Requirements

Make sure that before you get started you have both [PHP](https://www.php.net/) (v8.1 or higher), [Composer](https://getcomposer.org/download/) and [Node.js](https://nodejs.org/en/) installed on your local environment so that Symfony, Tailwind CSS and Flowbite can be properly set up and configured.

## Create a Symfony project

The most straightforward approach for creating a new Symfony project is to use the official [Symfony CLI](https://symfony.com/download) installer which you can easily install on macOS and Linux devices using Homebrew:

{{< code lang="bash" >}}
brew install symfony-cli/tap/symfony-cli
{{< /code >}}

For devices running on Windows you can also install the Symfony CLI using Scoop:

{{< code lang="bash" >}}
scoop install symfony-cli
{{< /code >}}

Now that you have the CLI available you can proceed by creating a new project.

1. Create a new Symfony project by running the following command inside your terminal:

{{< code lang="bash" >}}
symfony new --webapp flowbite-app
{{< /code >}}

This command will create a new folder with a fresh Symfony project installation inside.

2. Change the current working directory to the newly created project folder:

{{< code lang="bash" >}}
cd flowbite-app
{{< /code >}}

3. Install the recommended Symfony Webpack Encore bundle to enable front-end integration via Composer and remove the default dependencies:

{{< code lang="bash" >}}
composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle
composer require symfony/webpack-encore-bundle
{{< /code >}}

4. Run the following command in your terminal to start a local web server:

{{< code lang="bash" >}}
symfony server:start
{{< /code >}}

This command will make the web application accessible via the browser on `http://localhost:8000`.

To deploy your application on a server we recommend you to check out the official [production deployment tools and bundlers](https://symfony.com/doc/current/deployment.html) that Symfony provides out-of-the-box, such as Deployer, Ansistrano, or Fabric.

Now that you have a working Symfony application on your local computer we can proceed with installing and setting up Tailwind CSS.

## Install Tailwind CSS

[Tailwind CSS](https://tailwindcss.com/) is a popular and open-source utility-first CSS framework that allows you to code styles directly inside your HTML based on preconfigured classes that will speed up your UI front-end development.

1. Run the following command to require and install Tailwind CSS and PostCSS via NPM:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/postcss postcss postcss-loader --save-dev
{{< /code >}}

2. Import the base Tailwind directive inside the default `./assets/styles/app.css` file:

{{< code lang="css" file="app.css" icon="file" >}}
@import "tailwindcss";
{{< /code >}}

3. Enable the PostCSS loader plugin by adding it to the Webpack config file:

{{< code lang="javascript" file="webpack.config.js" icon="file" >}}
// webpack.config.js
Encore
    // other plugins

    .enablePostCssLoader()

    // ... more plugins
{{< /code >}}

4. Create a new `postcss.config.mjs` file in the root folder and add the following configuration:

{{< code lang="javascript" file="postcss.config.mjs" icon="file" >}}
export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
{{< /code >}}

5. Run the following command to compile the front-end assets via Webpack:

{{< code lang="bash" >}}
npm run watch
{{< /code >}}

6. Let's create a new homepage entry file by configuring the Symfony routes file:

{{< code lang="yaml" file="routes.yml" icon="file" >}}
// ./config/routes.yml

index:
    path: /
    controller: App\Controller\DefaultController::index
{{< /code >}}

7. Create a new `DefaultController` and set up the path for a new Twig template file:

{{< code lang="php" file="DefaultController.php" icon="file" >}}
render('index.html.twig', []);
    }
}
{{< /code >}}

8. Create a new `index.html.twig` inside the templates folder and add a couple of [header](https://flowbite.com/blocks/marketing/header/) and [hero](https://flowbite.com/blocks/marketing/hero/) sections from the Flowbite Blocks collection:

{{< code lang="html" file="index.html.twig" icon="file" >}}
{% extends 'base.html.twig' %}

{% block body %}
    
    
        
    
    
    
    
        
    
            
                New Flowbite is out! See what's new 
                
            
            
    We invest in the world’s potential
    
            
    Here at Flowbite we focus on markets where technology, innovation, and capital can unlock long-term value and drive economic growth.
    
            
    
                
                    Learn more
                    
                
                
                    
                    Watch video
                  
            
    
            
    
                FEATURED IN
                
    
                    
                        
                            
                            
                            
                            
                            
                            
                            
                            
                            
                                                
                    
                    
                        
                            
                            
                            
                                               
                    
                    
                        
                            
                            
                            
                            
                                                                           
                             
                
    
            
     
        
    
    
    
{% endblock %}
{{< /code >}}

A brand new header and hero section should now be visible on the homepage of your Symfony application's local development server supporting Tailwind CSS. Let's now proceed by installing Flowbite to enable interactive UI components.

## Install Flowbite

[Flowbite](https://flowbite.com) is a free and popular open-source UI component library built on top of the utility-classes from Tailwind CSS featuring interactive UI elements such as dropdowns, navbars, modals and also an ecosystem of website sections, templates, plugins, tools, and more that you can leverage to build websites even faster.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `app.css` CSS file:

{{< code lang="css" file="app.css" icon="file" >}}
@import "flowbite/src/themes/default";
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="app.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="app.css" icon="file" >}}
@source "../../node_modules/flowbite";
{{< /code >}}

Inside the `./assets/app.js` file you can import the Flowbite package to enable interactivity of the UI components:

{{< code lang="javascript" file="app.js" icon="file" >}}
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap';

// enable the interactive UI components from Flowbite
import 'flowbite';
{{< /code >}}

This will enable all of the interactive and dynamic UI components such as the dropdowns, modals, navbars, and others to work out of the box. Webpack will automatically bundle the final JavaScript file which improves speed and performance.

Check out the [Flowbite Quickstart](https://flowbite.com/docs/getting-started/quickstart/) guide to learn about the different ways you can set up the JS interactivity whether that's via CDN, using the data attributes interface, leveraging TypeScript or programmatically working with the UI components and object classes.

## Symfony UX Turbo

Flowbite provides custom event listeners for turbo load support if you import the `flowbite.turbo.js` file. Check out the following guides to learn more how to integrate the JavasScript file that powers the interactive components with Webpack Encore.

If you use Symfony UX Turbo, you will need to import a version of Flowbite which supports the `turbo:load` event listeners instead of `load`. To do this **add the lines below** to your `./assets/app.js` file:

{{< code lang="javascript" file="app.js" icon="file" >}}
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap';

// enable the interactive UI components from Flowbite with Turbo
import 'flowbite/dist/flowbite.turbo.js';
{{< /code >}}

## Flowbite components

Now that you have all of the technologies successfully set up in your Symfony project you can finally start building websites quickly and efficiently leveraging both the utility classes from Tailwind CSS, the pre-built UI components from Flowbite and the framework structure from Symfony.

Let's start by adding a simple [modal authentication component](https://flowbite.com/docs/components/modal/#form-element) from the Flowbite Library when clicking on the login button from the header:

{{< code lang="html" file="index.html.twig" icon="file" >}}




 
{{< /code >}}

After setting up the `data-modal-target="{modalId}"` and `data-modal-toggle="{modalId}"` data attributes for the button component and copy-pasting the modal example, clicking on the login button will now show a modal element with a user sign-in form that you can use to authenticate users directly from your homepage.

You can check out the full collection of UI components by visiting [Flowbite Blocks](https://flowbite.com/blocks/) and [Flowbite Library](https://flowbite.com/docs/getting-started/introduction/).

## Flowbite Bundle

An unofficial [Flowbite Bundle](https://github.com/talesfromadev/flowbite-bundle) is available, providing an integrated form theme for Symfony as well as specific form types.

## Symfony starter project

The awesome open-source community from Flowbite created a [Symfony and Tailwind CSS starter project](https://github.com/themesberg/tailwind-symfony-starter) that you can use to skip this integration guide and use it as starting point for your future Symfony, Tailwind CSS and Flowbite projects.


================================================
FILE: content/getting-started/typescript.md
================================================
---
layout: docs
title: Tailwind CSS TypeScript - Flowbite
description: Learn how to install Tailwind CSS and Flowbite with TypeScript to use optional static typing for JavaScript to make your code more scalable and maintainable
group: getting-started
toc: true
requires_typescript: true

previous: JavaScript API
previousLink: getting-started/javascript/
next: LLM
nextLink: getting-started/llm/
---

[TypeScript](https://www.typescriptlang.org/) is a free and open-source programming language that helps improve the scalability, maintainability, and readability of code. It does this by adding optional static typing to JavaScript. 

It is developed and maintained by Microsoft and used by companies such as Slack, Bitpanda, Accenture, Medium, and many more to help them scale code better.

This guide will teach you how to set up Tailwind CSS and the Flowbite library with TypeScript and also show you how you can use the components from Flowbite to power your Tailwind CSS application with integrated types and interfaces.

## Create a new project

Follow the next steps to learn how to install TypeScript and Tailwind CSS in a local project. Before continuing make sure that you have Node.js installed locally on your computer.

1. Create a new project and run the following command to create a `package.json` file in the root folder:

{{< code lang="bash" >}}
npm init
{{< /code >}}

This is where we will add the project dependencies and the script commands.

## Install TypeScript

By following the official [TypeScript guide](https://www.typescriptlang.org/download) we will install and set it up in our project using NPM.

2. Run the following command to install and require TypeScript as a dependency in your `package.json` file:

{{< code lang="bash" >}}
npm install --save-dev typescript
{{< /code >}}

3. Create a new `tsconfig.json` file by running the following command:

{{< code lang="bash" >}}
npx tsc --init
{{< /code >}}

4. Replace the content of the `tsconfig.json` file using the following code:

{{< code lang="javascript" icon="file" file="tsconfig.json" >}}
{
  "compilerOptions": {
      "lib": ["dom", "es2015"],
      "outDir": "./lib/cjs/",
      "sourceMap": true,
      "declaration": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "allowJs": true,
      "moduleResolution": "node"
  },
  "include": ["src/**/*.ts*"],
  "exclude": ["node_modules", "dist", "lib"]
}
{{< /code >}}

Here's a breakdown of what each option key-value pair represents:

- `lib` - this option specifies which libraries we want TypeScript to support
- `outDir` - this options tells the TS compiler where to export the compiled code
- `sourceMap` - enables source maps to be generated
- `declaration` - generates declaration files after compiling if true
- `noImplicitAny` - prevents using the any type by throwing an error (this is best practice)
- `module` - specifies the module system to use when generating JS code from the TypeScript source code
- `target` - specifies the JavaScript version to which the TypeScript code should be transpiled
- `allowJs` - specifies whether the compiler should include JS files in the project
- `moduleResolution` - specifies the strategy that the compiler should use to resolve module names
- `include` - specifies which are the source files TypeScript should compile 
- `exclude` - specifies which folders should TypeScript ignore when compiling

After setting up the TypeScript configuration file we can now write some code.

5. Set up the folder structure for your TypeScript files by creating a new `src/` folder and creating an `index.ts` file inside of it with the following code:

{{< code lang="javascript" icon="file" file="index.ts" >}}
const text: string = 'Hello TypeScript';
console.log(text);
{{< /code >}}

This code already uses a type declaration which will help us verify if the compiler works properly.

### Webpack bundler

In order to compile the TypeScript code into JavaScript that is supported by modern browsers we will have to install [Webpack](https://webpack.js.org/) and bundle the source code into one final JavaScript file that we will later include in our HTML templates.

6. Install Webpack and the necessary plugins by executing the following command in your terminal:

{{< code lang="bash" >}}
npm i -D webpack webpack-cli typescript ts-loader
{{< /code >}}

7. Create a new `webpack.config.js` file and add the following content:

{{< code lang="javascript" icon="file" file="webpack.config.js" >}}
//webpack.config.js
const path = require('path');

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  entry: {
    main: "./src/index.ts",
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: "app-bundle.js" // <--- Will be compiled to this single file
  },
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/,
        loader: "ts-loader"
      }
    ]
  }
};
{{< /code >}}

8. Run the following command to watch for changes and compile the TypeScript source code into browser-compatible JavaScript code:

{{< code lang="bash" >}}
npx webpack --watch
{{< /code >}}

This will generate an `app-bundle.js` named JavaScript file that you can now include inside your HTML templates. To check out if it works you can create a new `index.html` file and open it inside your browser.

{{< code lang="html" icon="file" file="index.html" >}}



    
    
    
    Document
    


    
    Hello Tailwind CSS!
    
    


{{< /code >}}

### CommonJS

By default the compiled code will be CJS as specified in the `tsconfig.json` file.

Compile the code by running the following command in your terminal:

{{< code lang="bash" >}}
npx tsc
{{< /code >}}

This will generate a new `lib/` folder with CJS (CommonJS) compiled JavaScript code that we will later include in our templates.

### ECMAScript modules

If you want to compile for ESM instead of CJS you can use the following command instead:

{{< code lang="bash" >}}
npx tsc -m es6 --outDir lib/esm
{{< /code >}}

Now that we have successfully configured TypeScript and also compiled the source code we have to install and configure Tailwind CSS.

Run the following command to install and require Tailwind CSS in your `package.json` file:

{{< code lang="bash" >}}
npm install -D tailwindcss
{{< /code >}}

## Install Tailwind CSS

9. Install the Tailwind CSS packages by running the following command in your terminal:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/cli
{{< /code >}}

10. Create a new `input.css` file inside the `src/` folder and import all of the basic Tailwind CSS directives:

{{< code lang="css" icon="file" file="input.css" >}}
@import "tailwindcss";
{{< /code >}}

11. Compile the code when changes are made by using the following command:

{{< code lang="bash" >}}
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
{{< /code >}}

12. Open the `index.html` file inside the root folder of your project with the following basic setup where we include all of the compiled code including the new `output.css` file:

{{< code lang="html" icon="file" file="index.html" >}}



    
    
    
    Document
    


    
    Hello Tailwind CSS!
    
    


{{< /code >}}

Now open the `index.html` file in your browser and you should see the text larger because of the `text-4xl` utility class and also see a "Hello TypeScript" message inside your developer console.

## Install Flowbite

You can start using the open-source and interactive components from Flowbite which are based on Tailwind CSS and support TypeScript types by following the next steps.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" icon="file" file="input.css" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" icon="file" file="input.css" >}}
@source "../node_modules/flowbite";
{{< /code >}}

## Flowbite components

Now that you have set up TypeScript, Tailwind CSS, and Flowbite you can start using this stack to build scalable websites using a large collection of UI components from Flowbite which support type declarations.

One example would be to use the }}#javascript-behaviour">Modal component and using its methods and options to programmatically show or hide the element.

First of all we need to make sure that we have the correct HTML element set up in our templates - we can use this markup and add it inside the `index.html` file:

{{< code lang="html" icon="file" file="index.html" >}}



{{< /code >}}

As you can see we added a unique ID for the button element that the parent modal element to be able to set event listeners to them later on. After having this markup put in place we need to open the `index.ts` file and import the Modal class from the Flowbite package and set up the event listeners:

{{< code lang="javascript" icon="file" file="index.ts" >}}
import { Modal } from 'flowbite'

// select the two elements that we'll work with
const $buttonElement: HTMLElement = document.querySelector('#button');
const $modalElement: HTMLElement = document.querySelector('#modal');

// create a new modal component
const modal = new Modal($modalElement);

// toggle the visibility of the modal when clicking on the button
$buttonElement.addEventListener('click', () => modal.toggle());
{{< /code >}}

Alternatively, you can also call on the available methods of the Modal class such as `show()` or `hide()` to add the logic inside your TypeScript files instead.

{{< code lang="javascript" icon="file" file="index.ts" >}}
// add your own logic and then show the modal
modal.show();
{{< /code >}}

This example will show the modal without having to click the button since the logic has been added in TypeScript directly.

### Using Types

Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.

Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the `ModalOptions` and `ModalInterface`:

{{< code lang="javascript" icon="file" file="index.ts" >}}
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

// other code
{{< /code >}}

Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you're using the correct types of parameters and methods.

When creating a new modal you can set the `ModalInterface` as the main type:

{{< code lang="javascript" icon="file" file="index.ts" >}}
const modal: ModalInterface = new Modal($modalElement, modalOptions);
{{< /code >}}

Flowbite also supports type definitions for the options object so if you want to set the placement of the modal based on types, here's how you would do that:

{{< code lang="javascript" icon="file" file="index.ts" >}}
const modalOptions: ModalOptions = {
    placement: 'top-right'
}

const modal: ModalInterface = new Modal($modalElement, modalOptions);
{{< /code >}}

Why are these types useful, though? Because if you don't set the correct value for the `placement` key, for example you set `right` instead of `top-right` or `bottom-right` TypeScript will throw an error saying that it is not a correct option.

Here's the full code using the types from Flowbite for the modal definition:

{{< code lang="javascript" icon="file" file="index.ts" >}}
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

const $buttonElement: HTMLElement = document.querySelector('#button');
const $modalElement: HTMLElement = document.querySelector('#modal');

const modalOptions: ModalOptions = {
    placement: 'top-right'
}

const modal: ModalInterface = new Modal($modalElement, modalOptions);
$buttonElement.addEventListener('click', () => modal.toggle());

modal.show();
{{< /code >}}

Using the types from TypeScript with the Flowbite components will ensure a more scalable and bug-free code down the line.

## TypeScript Starter Project

We have built a [Tailwind CSS TypeScript Starter](https://github.com/themesberg/tailwind-typescript-starter) project on GitHub that uses the configuration above with some pre-built scripts and examples that can help you to get started faster.

================================================
FILE: content/getting-started/vue.md
================================================
---
layout: docs
title: Tailwind CSS Vue - Flowbite
description: Learn how to install and set up Tailwind CSS with Flowbite for your Vue 3 project and start developing modern web applications with interactive components
group: getting-started
toc: true
requires_vue: true

previous: Next.js
previousLink: getting-started/next-js/
next: Nuxt
nextLink: getting-started/nuxt-js/
---

Vue.js is a popular front-end library based on reactivity and declarative rendering used by websites such as Behance, Nintendo, Gitlab, Font Awesome, and more that you can use to build modern web applications.

By installing Tailwind CSS and Flowbite you can build your project even faster using the utility-first approach from Tailwind and the interactive UI components from Flowbite, such as modals, tables, dropdowns, datepickers, and more.

## Create a Vue project

Follow the next steps to install Tailwind CSS (with v4) and Flowbite with Vue 3 and Vite.

1. Create a new Vite project running the following commands in your terminal:

{{< code lang="bash" >}}
npm create vite@latest flowbite-app -- --template vue
cd flowbite-app
{{< /code >}}

## Install Tailwind CSS

This guide uses the newest version of Tailwind CSS v4 which brings many improvements.

1. Install Tailwind CSS using Vite via the terminal:

{{< code lang="bash" >}}
npm install tailwindcss @tailwindcss/vite --save
{{< /code >}}

2. Add the Tailwind plugin inside your `vite.config.js` file:

{{< code lang="javascript" file="vite.config.js" icon="file" >}}
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(), 
    tailwindcss()
  ],
})
{{< /code >}}

3. Import the `tailwind` module inside your `style.css` file:

{{< code lang="bash" >}}
@import "tailwindcss";
{{< /code >}}

You have now installed both Tailwind CSS and Vue and can proceed with the next steps.

## Install Flowbite

The UI components from Flowbite can help you save time building websites with Vue and Tailwind. Make sure that you follow the next steps to ensure that you install both the CSS and JavaScript dependencies.

1. Install Flowbite as a dependency using NPM by running the following command:

{{< code lang="bash" >}}
npm install flowbite --save
{{< /code >}}

2. Import the default theme variables from Flowbite inside your main `input.css` CSS file:

{{< code lang="css" icon="file" file="input.css" >}}
/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/
{{< /code >}}

3. Import the Flowbite plugin file in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@plugin "flowbite/plugin";
{{< /code >}}

4. Configure the source files of Flowbite in your CSS:

{{< code lang="css" file="input.css" icon="file" >}}
@source "../node_modules/flowbite";
{{< /code >}}

4. Start a local development server by running the following command in your terminal:

{{< code lang="bash" >}}
npm run dev
{{< /code >}}

If you want to build the project then you can run `npm run build`.

## Flowbite components

Now that you have successfully installed Vue 3, Tailwind CSS and Flowbite you can start importing and using the components from Flowbite such as the navbars, modals, dropdowns, and more.

We can use the }}#javascript-behaviour">Modal component as an example and copy the HTML markup and add it inside our Vue 3 template file:


{{< code lang="vue" file="App.vue" icon="file" >}}

{{< /code >}}

### Data attributes

You can by default make the interactive components work by importing the "init" functions from the Flowbite package using the based on the onMounted lifecycle method from Vue 3.

Here's an example how you can initialise the components based on data attributes with Vue 3:

{{< code lang="vue" file="App.vue" icon="file" >}}



{{< /code >}}

Alternatively, here's the full list of available functions to use to initialise the components separately:

{{< code lang="vue" file="App.vue" icon="file" >}}

{{< /code >}}

Even though this will make sure all of the interactive components will work with data attributes from Flowbite, we actually recommend only initializing the ones that you use for every page to optimize load speed.

Check out the [starter guide's](https://github.com/themesberg/tailwind-vue-starter) `Events.vue` file to see it in action.

### JavaScript API

To start using the interactive components from Flowbite together with Vue 3 and Tailwind CSS you can import them inside your Vue files and initiate the object based on the onMounted method from Vue.

Here's an example showing how you can use the Modal component:

{{< code lang="vue" file="App.vue" icon="file" >}}



{{< /code >}}

Alternatively, here's the full list of available functions to use to initialise the components separately:

{{< code lang="vue" file="App.vue" icon="file" >}}

{{< /code >}}

As you can see we have imported the Modal component from the Flowbite package and we used the onMounted method to set up the event listeners to make sure that the templates have loaded and will work even with tools such as the Vue Router as you switch between the views.

Here's the HTML markup that you need to add inside the `