Showing preview only (6,992K chars total). Download the full file or copy to clipboard to get everything.
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
================================================
<p>
<a href="https://flowbite.com" >
<img alt="Flowbite - Tailwind CSS components" width="350" src="https://flowbite.s3.amazonaws.com/github/logo-github.png">
</a><br>
Build websites even faster with components on top of Tailwind CSS
</p>
<p>
<a href="https://discord.com/invite/4eeurUVvTy"><img src="https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord" alt="Discord"></a>
<a href="https://www.npmjs.com/package/flowbite"><img src="https://img.shields.io/npm/dt/flowbite.svg" alt="Total Downloads"></a>
<a href="https://github.com/themesberg/flowbite/releases"><img src="https://img.shields.io/npm/v/flowbite.svg" alt="Latest Release"></a>
<a href="https://flowbite.com/docs/getting-started/license/"><img src="https://img.shields.io/badge/license-MIT-blue" alt="License"></a>
</p>
------
## 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 <a href="https://nodejs.org/en/" rel="nofollow" target="_blank">Node.js</a> and <a href="https://tailwindcss.com/docs/installation/using-postcss" rel="nofollow" target="_blank">Tailwind CSS</a> 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 `<body>` tag:
```
<script src="../path/to/flowbite/dist/flowbite.min.js"></script>
```
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
<link href="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.css" rel="stylesheet" />
```
And include the following JavaScript file before the end of the `body` element:
```html
<script src="https://cdn.jsdelivr.net/npm/flowbite@{{< current_version >}}/dist/flowbite.min.js"></script>
```
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
<button data-modal-target="defaultModal" data-modal-toggle="defaultModal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" type="button">
Toggle modal
</button>
<!-- Main modal -->
<div id="defaultModal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow-sm dark:bg-gray-700">
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600 border-gray-200">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
Terms of Service
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
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.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
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.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button data-modal-hide="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-hide="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
```
#### 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:
```
<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'
// initialize components based on data attribute selectors
onMounted(() => {
initFlowbite();
})
</script>
<template>
// Modal HTML markup with data attributes from Flowbite
</template>
```
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.
<table>
<tr>
<td width="33.3333%">Alerts</td>
<td width="33.3333%">Badge</td>
<td width="33.3333%">Breadcrumbs</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/alerts/">
<img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/badge/">
<img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/breadcrumb/">
<img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Buttons</td>
<td width="33.3333%">Button group</td>
<td width="33.3333%">Cards</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/buttons/">
<img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/button-group/">
<img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/card/">
<img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Dropdown</td>
<td width="33.3333%">Forms</td>
<td width="33.3333%">List group</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/dropdowns/">
<img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/forms/">
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/list-group/">
<img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Typography</td>
<td width="33.3333%">Modal</td>
<td width="33.3333%">Tabs</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/typography/">
<img alt="Tailwind CSS Typography" src="https://flowbite.s3.amazonaws.com/github/typography.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/modal/">
<img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/tabs/">
<img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Navbar</td>
<td width="33.3333%">Pagination</td>
<td width="33.3333%">Timeline</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/navbar/">
<img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/pagination/">
<img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/timeline/">
<img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Progress bar</td>
<td width="33.3333%">Tables</td>
<td width="33.3333%">Toast</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/progress/">
<img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/tables/">
<img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/toast/">
<img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Tooltips</td>
<td width="33.3333%">Datepicker</td>
<td width="33.3333%">Spinner</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/tooltips/">
<img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/datepicker/">
<img alt="Tailwind CSS Datepicker" src="https://flowbite.s3.amazonaws.com/github/datepicker.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/spinner/">
<img alt="Tailwind CSS Spinner" src="https://flowbite.s3.amazonaws.com/github/spinner.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Footer</td>
<td width="33.3333%">Accordion</td>
<td width="33.3333%">Sidebar</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/footer/">
<img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/accordion/">
<img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/sidebar/">
<img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Carousel</td>
<td width="33.3333%">Avatar</td>
<td width="33.3333%">Rating</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/carousel/">
<img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/avatar/">
<img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/rating/">
<img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Input Field</td>
<td width="33.3333%">File Input</td>
<td width="33.3333%">Search Input</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/input-field/">
<img alt="Tailwind CSS Input Field" src="https://flowbite.s3.amazonaws.com/github/input-field.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/file-input/">
<img alt="Tailwind CSS File Input" src="https://flowbite.s3.amazonaws.com/github/file-input.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/search-input/">
<img alt="Tailwind CSS Search Input" src="https://flowbite.s3.amazonaws.com/github/search-input.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Select</td>
<td width="33.3333%">Textarea</td>
<td width="33.3333%">Checkbox</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/select/">
<img alt="Tailwind CSS Select" src="https://flowbite.s3.amazonaws.com/github/select.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/textarea/">
<img alt="Tailwind CSS Textarea" src="https://flowbite.s3.amazonaws.com/github/textarea.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/checkbox/">
<img alt="Tailwind CSS Checkbox" src="https://flowbite.s3.amazonaws.com/github/checkbox.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Radio</td>
<td width="33.3333%">Toggle</td>
<td width="33.3333%">Range Slider</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/radio/">
<img alt="Tailwind CSS Radio" src="https://flowbite.s3.amazonaws.com/github/radio.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/toggle/">
<img alt="Tailwind CSS Toggle" src="https://flowbite.s3.amazonaws.com/github/toggle.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/range/">
<img alt="Tailwind CSS Range Slider" src="https://flowbite.s3.amazonaws.com/github/range-slider.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Floating Label</td>
<td width="33.3333%">Mega Menu</td>
<td width="33.3333%">Skeleton</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/floating-label/">
<img alt="Tailwind CSS Floating Label" src="https://flowbite.s3.amazonaws.com/github/floating-label.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/mega-menu/">
<img alt="Tailwind CSS Mega Menu" src="https://flowbite.s3.amazonaws.com/github/mega-menu.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/skeleton/">
<img alt="Tailwind CSS Skeleton" src="https://flowbite.s3.amazonaws.com/github/skeleton.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">KBD (keyboard)</td>
<td width="33.3333%">Drawer (offcanvas)</td>
<td width="33.3333%">Popover</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/kbd/">
<img alt="Tailwind CSS KBD (Keyboard)" src="https://flowbite.s3.amazonaws.com/github/kbd.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/drawer/">
<img alt="Tailwind CSS Drawer (offcanvas)" src="https://flowbite.s3.amazonaws.com/github/drawer.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/popover/">
<img alt="Tailwind CSS Popover" src="https://flowbite.s3.amazonaws.com/github/popover.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Video</td>
<td width="33.3333%">Heading</td>
<td width="33.3333%">Paragraph</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/video/">
<img alt="Tailwind CSS Video" src="https://flowbite.s3.amazonaws.com/github/video.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/headings/">
<img alt="Tailwind CSS Heading" src="https://flowbite.s3.amazonaws.com/github/heading.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/paragraphs/">
<img alt="Tailwind CSS Paragraph" src="https://flowbite.s3.amazonaws.com/github/paragraph.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Blockquote</td>
<td width="33.3333%">Image</td>
<td width="33.3333%">List</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/blockquote/">
<img alt="Tailwind CSS Blockquote" src="https://flowbite.s3.amazonaws.com/github/blockquote.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/images/">
<img alt="Tailwind CSS Image" src="https://flowbite.s3.amazonaws.com/github/image.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/lists/">
<img alt="Tailwind CSS List" src="https://flowbite.s3.amazonaws.com/github/list.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Link</td>
<td width="33.3333%">Text</td>
<td width="33.3333%">Horizontal line (HR)</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/links/">
<img alt="Tailwind CSS Link" src="https://flowbite.s3.amazonaws.com/github/link.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/text/">
<img alt="Tailwind CSS Text" src="https://flowbite.s3.amazonaws.com/github/text.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/typography/hr/">
<img alt="Tailwind CSS HR" src="https://flowbite.s3.amazonaws.com/github/hr.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Speed Dial</td>
<td width="33.3333%">Stepper</td>
<td width="33.3333%">Indicators</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/speed-dial/">
<img alt="Tailwind CSS Speed Dial" src="https://flowbite.s3.amazonaws.com/github/dial.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/stepper/">
<img alt="Tailwind CSS Stepper" src="https://flowbite.s3.amazonaws.com/github/stepper.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/indicators/">
<img alt="Tailwind CSS Indicators" src="https://flowbite.s3.amazonaws.com/github/indicators.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Bottom Navigation</td>
<td width="33.3333%">Sticky Banner</td>
<td width="33.3333%">Gallery (Masonry)</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/bottom-navigation/">
<img alt="Tailwind CSS Bottom Navigation Bar" src="https://flowbite.s3.amazonaws.com/github/bottom-bar.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/banner/">
<img alt="Tailwind CSS Bottom Sticky Banner" src="https://flowbite.s3.amazonaws.com/github/banner.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/gallery/">
<img alt="Tailwind CSS Image Gallery (Masonry)" src="https://flowbite.s3.amazonaws.com/github/gallery.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Jumbotron</td>
<td width="33.3333%">Device mockups</td>
<td width="33.3333%">Charts</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/jumbotron/">
<img alt="Tailwind CSS Jumbotron" src="https://flowbite.s3.amazonaws.com/github/jumbotron.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/device-mockups/">
<img alt="Tailwind CSS Device Mockups" src="https://flowbite.s3.amazonaws.com/github/device-mockups.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/plugins/charts/">
<img alt="Tailwind CSS Charts" src="https://flowbite.s3.amazonaws.com/github/charts.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">Number Input</td>
<td width="33.3333%">Phone Input</td>
<td width="33.3333%">Chat Bubble</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/number-input/">
<img alt="Tailwind CSS Number Input" src="https://flowbite.s3.amazonaws.com/github/number-input.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/phone-input/">
<img alt="Tailwind CSS Phone Input" src="https://flowbite.s3.amazonaws.com/github/phone-input.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/chat-bubble/">
<img alt="Tailwind CSS Chat Bubble" src="https://flowbite.s3.amazonaws.com/github/chat-bubble.jpg">
</a>
</td>
</tr>
</tr>
<tr>
<td width="33.3333%">Copy to Clipboard</td>
<td width="33.3333%">Timepicker</td>
<td width="33.3333%">DataTables</td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/clipboard/">
<img alt="Tailwind CSS Clipboard" src="https://flowbite.s3.amazonaws.com/github/clipboard.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/forms/timepicker/">
<img alt="Tailwind CSS Timepicker" src="https://flowbite.s3.amazonaws.com/github/timepicker.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/plugins/datatables/">
<img alt="Tailwind CSS DataTables" src="https://flowbite.s3.amazonaws.com/github/datatables.jpg">
</a>
</td>
</tr>
<tr>
<td width="33.3333%">WYSIWYG Editor</td>
<td width="33.3333%">QR Code</td>
<td width="33.3333%"></td>
</tr>
<tr>
<td width="33.3333%">
<a href="https://flowbite.com/docs/plugins/wysiwyg/">
<img alt="Tailwind CSS WYSIWYG Text Editor" src="https://flowbite.s3.amazonaws.com/github/wysiwyg.jpg">
</a>
</td>
<td width="33.3333%">
<a href="https://flowbite.com/docs/components/qr-code/">
<img alt="Tailwind CSS QR Code" src="https://flowbite.s3.us-east-1.amazonaws.com/github/qrcode.jpg">
</a>
</td>
<td width="33.3333%"></td>
</tr>
</table>
## 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 >}}
<div id="accordion-collapse" data-accordion="collapse" class="rounded-base border border-default overflow-hidden shadow-xs">
<h2 id="accordion-collapse-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-collapse-body-1" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-collapse-heading-1">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-body">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-x-0 border-b-default border-t-0 hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-collapse-body-2" aria-expanded="false" aria-controls="accordion-collapse-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-collapse-body-2" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-collapse-heading-2">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-collapse-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-collapse-body-3" aria-expanded="false" aria-controls="accordion-collapse-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-collapse-body-3" class="hidden" aria-labelledby="accordion-collapse-heading-3">
<div class="p-4 md:p-5 border border-t-default border-b-0 border-x-0">
<p class="mb-2 text-body">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-body">Learn more about these technologies:</p>
<ul class="ps-5 text-body list-disc">
<li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /example >}}
## Separated cards
Use this example of an accordion with space delimitation between the accordion items.
{{< example github="components/accordion.md" show_dark=true >}}
<div id="accordion-card" data-accordion="collapse">
<h2 id="accordion-card-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-base shadow-xs border border-default hover:text-heading hover:bg-neutral-secondary-medium gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-1" aria-expanded="true" aria-controls="accordion-card-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-card-body-1" class="hidden border border-t-0 border-default rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-1">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-body">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-card-heading-2" class="mt-4">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-base shadow-xs border border-default hover:text-heading hover:bg-neutral-secondary-medium gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-2" aria-expanded="false" aria-controls="accordion-card-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-card-body-2" class="hidden border border-t-0 border-default rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-2">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-card-heading-3" class="mt-4">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-base shadow-xs border border-default hover:text-heading hover:bg-neutral-secondary-medium gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-3" aria-expanded="false" aria-controls="accordion-card-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-card-body-3" class="hidden border border-t-0 border-default rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-3">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-body">Learn more about these technologies:</p>
<ul class="ps-5 text-body list-disc">
<li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /example >}}
## Always open
Use the `data-accordion="open"` option to keep previously opened accordion elements unchanged.
{{< example github="components/accordion.md" show_dark=true >}}
<div id="accordion-open" data-accordion="open" class="rounded-base border border-default overflow-hidden shadow-xs">
<h2 id="accordion-open-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
<span class="flex items-center"><svg class="w-5 h-5 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>What is Flowbite?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-open-body-1" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-open-heading-1">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-body">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-open-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-x-0 border-b-default border-t-0 hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-open-body-2" aria-expanded="false" aria-controls="accordion-open-body-2">
<span class="flex items-center"><svg class="w-5 h-5 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-open-body-2" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-open-heading-2">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-open-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-open-body-3" aria-expanded="false" aria-controls="accordion-open-body-3">
<span class="flex items-center"><svg class="w-5 h-5 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg> What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-open-body-3" class="hidden" aria-labelledby="accordion-open-heading-3">
<div class="p-4 md:p-5 border border-t-default border-b-0 border-x-0">
<p class="mb-2 text-body">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-body">Learn more about these technologies:</p>
<ul class="ps-5 text-body list-disc">
<li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /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 >}}
<div id="accordion-color" data-accordion="collapse" class="rounded-base border border-default overflow-hidden shadow-xs">
<h2 id="accordion-color-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-fg-brand hover:bg-brand-softer gap-3" data-accordion-target="#accordion-color-body-1" aria-expanded="true" aria-controls="accordion-color-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-color-body-1" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-color-heading-1">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-body">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-color-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-x-0 border-b-default border-t-0 hover:text-fg-brand hover:bg-brand-softer gap-3" data-accordion-target="#accordion-color-body-2" aria-expanded="false" aria-controls="accordion-color-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-color-body-2" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-color-heading-2">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-color-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body hover:text-fg-brand hover:bg-brand-softer gap-3" data-accordion-target="#accordion-color-body-3" aria-expanded="false" aria-controls="accordion-color-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-color-body-3" class="hidden" aria-labelledby="accordion-color-heading-3">
<div class="p-4 md:p-5 border border-t-default border-b-0 border-x-0">
<p class="mb-2 text-body">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-body">Learn more about these technologies:</p>
<ul class="ps-5 text-body list-disc">
<li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /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 >}}
<div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-neutral-primary text-heading" data-inactive-classes="text-body">
<h2 id="accordion-flush-heading-1">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-flush-body-1" class="hidden" aria-labelledby="accordion-flush-heading-1">
<div class="py-5 border-b border-default text-body">
<p class="mb-2">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p>Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-flush-heading-2">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-flush-body-2" aria-expanded="false" aria-controls="accordion-flush-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
<div class="py-5 border-b border-default text-body">
<p class="mb-2">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p>Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-flush-heading-3">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-flush-body-3" aria-expanded="false" aria-controls="accordion-flush-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-flush-body-3" class="hidden" aria-labelledby="accordion-flush-heading-3">
<div class="py-5 text-body border-b border-default">
<p class="mb-2">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2">Learn more about these technologies:</p>
<ul class="ps-5 list-disc">
<li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /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 >}}
<div id="accordion-arrow" data-accordion="collapse" data-active-classes="bg-neutral-primary text-heading" data-inactive-classes="text-body">
<h2 id="accordion-arrow-heading-1">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-arrow-body-1" aria-expanded="true" aria-controls="accordion-arrow-body-1">
<span>Accordion without an arrow</span>
</button>
</h2>
<div id="accordion-arrow-body-1" class="hidden" aria-labelledby="accordion-arrow-heading-1">
<div class="py-5 border-b border-default text-body">
<p class="mb-2">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p>Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-arrow-heading-2">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-arrow-body-2" aria-expanded="false" aria-controls="accordion-arrow-body-2">
<span>Accordion with another icon</span>
<svg class="w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
</button>
</h2>
<div id="accordion-arrow-body-2" class="hidden" aria-labelledby="accordion-arrow-heading-2">
<div class="py-5 border-b border-default text-body">
<p class="mb-2">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p>Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-arrow-heading-3">
<button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-arrow-body-3" aria-expanded="false" aria-controls="accordion-arrow-body-3">
<span>Accordion without arrow rotation</span>
<svg class="w-5 h-5 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>
</button>
</h2>
<div id="accordion-arrow-body-3" class="hidden" aria-labelledby="accordion-arrow-heading-3">
<div class="py-5 text-body border-b border-default">
<p class="mb-2">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2">Learn more about these technologies:</p>
<ul class="ps-5 list-disc">
<li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /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 <a href="#javascript-behaviour">custom JavaScript</a>.
{{< example github="components/accordion.md" show_dark=true >}}
<div id="accordion-collapse-2" data-accordion="collapse" class="rounded-base border border-default overflow-hidden shadow-xs">
<h2 id="accordion-collapse-heading-6">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-collapse-body-6" aria-expanded="true" aria-controls="accordion-collapse-body-6">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-collapse-body-6" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default p-4 md:p-5" aria-labelledby="accordion-collapse-heading-6">
<p class="mb-2 text-body">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-body mb-4">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
<!-- Nested accordion -->
<div id="accordion-nested" data-accordion="collapse" class="rounded-base border border-default overflow-hidden shadow-xs">
<h2 id="accordion-nested-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-nested-body-1" aria-expanded="true" aria-controls="accordion-nested-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-nested-body-1" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-nested-heading-1">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-body">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-nested-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-x-0 border-b-default border-t-0 bg-neutral-primary-soft hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-nested-body-2" aria-expanded="false" aria-controls="accordion-nested-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-nested-body-2" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-nested-heading-2">
<div class="p-4 md:p-5">
<p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-body">Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-nested-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body bg-neutral-primary-soft hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-nested-body-3" aria-expanded="false" aria-controls="accordion-nested-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-nested-body-3" class="hidden" aria-labelledby="accordion-nested-heading-3">
<div class="p-4 md:p-5 border border-t-default border-b-0 border-x-0">
<p class="mb-2 text-body">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-body">Learn more about these technologies:</p>
<ul class="text-body ps-5 list-disc">
<li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
<!-- End of Nested accordion -->
</div>
<h2 id="accordion-collapse-heading-7">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body bg-neutral-primary-soft hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-collapse-body-7" aria-expanded="false" aria-controls="accordion-collapse-body-7">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-5 h-5 rotate-180 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m5 15 7-7 7 7"/></svg>
</button>
</h2>
<div id="accordion-collapse-body-7" class="hidden" aria-labelledby="accordion-collapse-heading-7">
<div class="p-4 md:p-5 border border-t-default border-b-0 border-x-0">
<p class="mb-2 text-body">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-body">Learn more about these technologies:</p>
<ul class="text-body list-disc ps-5">
<li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /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.
<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
<table class="w-full text-sm rtl:text-right text-body">
<thead class="bg-neutral-secondary-soft text-heading">
<tr class="text-xs font-medium uppercase">
<th scope="col" class="px-6 py-3">
Parameter
</th>
<th scope="col" class="px-6 py-3">
Type
</th>
<th scope="col" class="px-6 py-3">
Required
</th>
<th scope="col" class="px-6 py-3">
Description
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">accordionEl</code>
</td>
<td class="px-6 py-4">
Element
</td>
<td class="px-6 py-4">
Required
</td>
<td class="px-6 py-4">
The parent HTML element of the accordion component.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">items</code>
</td>
<td class="px-6 py-4">
Array
</td>
<td class="px-6 py-4">
Required
</td>
<td class="px-6 py-4">
Array of accordion items objects including the unique identifier, heading element, content element, and the active state.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">options</code>
</td>
<td class="px-6 py-4">
Object
</td>
<td class="px-6 py-4">
Optional
</td>
<td class="px-6 py-4">
Object of options that you can set to customize the style of the accordion items and set callback functions.
</td>
</tr>
<tr class="bg-neutral-primary">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">instanceOptions</code>
</td>
<td class="px-6 py-4">
Object
</td>
<td class="px-6 py-4">
Optional
</td>
<td class="px-6 py-4">
Object of options that allows you to set a custom ID for the instance that is being added to the <a href="https://flowbite.com/docs/getting-started/javascript/#instance-options" class="underline hover:no-underline">Instance Manager</a> and whether to override or not an existing instance.
</td>
</tr>
</tbody>
</table>
</div>
### Options
Use the following options as the second parameter for the Accordion object to customize the behaviour, styles, and to set callback functions.
<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
<table class="w-full text-sm rtl:text-right text-body">
<thead class="bg-neutral-secondary-soft text-heading">
<tr class="text-xs font-medium uppercase">
<th scope="col" class="px-6 py-3">
Option
</th>
<th scope="col" class="px-6 py-3">
Type
</th>
<th scope="col" class="px-6 py-3">
Description
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">alwaysOpen</code>
</td>
<td class="px-6 py-4">
Boolean
</td>
<td class="px-6 py-4">
If set to true then multiple accordion elements can be open at the same time. By default it's false.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">activeClasses</code>
</td>
<td class="px-6 py-4">
Array
</td>
<td class="px-6 py-4">
Set an array of Tailwind CSS class names to apply for the active accordion heading element.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">inactiveClasses</code>
</td>
<td class="px-6 py-4">
Array
</td>
<td class="px-6 py-4">
Apply an array of Tailwind CSS class names to apply for the inactive accordion heading elements.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">onOpen</code>
</td>
<td class="px-6 py-4">
Function
</td>
<td class="px-6 py-4">
Set a callback function when a new accordion item has been opened.
</td>
</tr>
<tr class="bg-neutral-primary">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">onClose</code>
</td>
<td class="px-6 py-4">
Function
</td>
<td class="px-6 py-4">
Set a callback function when a new accordion item has been closed.
</td>
</tr>
</tbody>
</table>
</div>
### Methods
Use the object methods on the Accordion object to programmatically open, close, or toggle the visibility of a given accordion item.
<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
<table class="w-full text-sm rtl:text-right text-body">
<thead class="bg-neutral-secondary-soft text-heading">
<tr class="text-xs font-medium uppercase">
<th scope="col" class="px-6 py-3">
Method
</th>
<th scope="col" class="px-6 py-3">
Description
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">toggle(id)</code>
</td>
<td class="px-6 py-4">
Use this function to toggle an accordion item based on its current state.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">open(id)</code>
</td>
<td class="px-6 py-4">
Use this function to open an accordion item based on the id.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">close(id)</code>
</td>
<td class="px-6 py-4">
Use this function to close an accordion item based on the id.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">updateOnOpen(callback)</code>
</td>
<td class="px-6 py-4">
Use this method to set a callback function when an accordion item has been opened.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">updateOnClose(callback)</code>
</td>
<td class="px-6 py-4">
Use this method to set a callback function when an accordion item has been closed.
</td>
</tr>
<tr class="bg-neutral-primary">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">updateOnToggle(callback)</code>
</td>
<td class="px-6 py-4">
Use this method to set a callback function when an accordion item has been toggled.
</td>
</tr>
</tbody>
</table>
</div>
### 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" >}}
<div id="accordion-example">
<h2 id="accordion-example-heading-1">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-b-0 border-default rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="true" aria-controls="accordion-example-body-1">
<span>What is Flowbite?</span>
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-example-body-1" class="hidden" aria-labelledby="accordion-example-heading-1">
<div class="p-5 border border-b-0 border-default dark:border-gray-700 dark:bg-gray-900">
<p class="mb-2 text-body">Flowbite is an open-source library of interactive components built on top of Tailwind CSS including buttons, dropdowns, modals, navbars, and more.</p>
<p class="text-body">Check out this guide to learn how to <a href="/docs/getting-started/introduction/" class="text-fg-brand hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
</div>
</div>
<h2 id="accordion-example-heading-2">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-b-0 border-default focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="false" aria-controls="accordion-example-body-2">
<span>Is there a Figma file available?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-example-body-2" class="hidden" aria-labelledby="accordion-example-heading-2">
<div class="p-5 border border-b-0 border-default dark:border-gray-700">
<p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
<p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
</div>
</div>
<h2 id="accordion-example-heading-3">
<button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-default focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="false" aria-controls="accordion-example-body-3">
<span>What are the differences between Flowbite and Tailwind UI?</span>
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</h2>
<div id="accordion-example-body-3" class="hidden" aria-labelledby="accordion-example-heading-3">
<div class="p-5 border border-t-0 border-default dark:border-gray-700">
<p class="mb-2 text-body">The main difference is that the core components from Flowbite are open source under the MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.</p>
<p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
<p class="mb-2 text-body">Learn more about these technologies:</p>
<ul class="ps-5 text-body list-disc dark:text-gray-400">
<li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
<li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
</ul>
</div>
</div>
</div>
{{< /code >}}
### TypeScript
If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration</a> 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 >}}
<div class="p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft" role="alert">
<span class="font-medium">Danger alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-fg-success-strong rounded-base bg-success-soft" role="alert">
<span class="font-medium">Success alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft" role="alert">
<span class="font-medium">Warning alert!</span> Change a few things up and try submitting again.
</div>
<div class="p-4 text-sm text-heading rounded-base bg-neutral-secondary-medium" role="alert">
<span class="font-medium">Dark alert!</span> Change a few things up and try submitting again.
</div>
{{< /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 >}}
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Info alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Danger alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-success-strong rounded-base bg-success-soft" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Success alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Warning alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 text-sm text-heading rounded-base bg-neutral-secondary-medium" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Dark alert!</span> Change a few things up and try submitting again.</p>
</div>
{{< /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 >}}
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer border border-brand-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Info alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft border border-danger-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Danger alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-success-strong rounded-base bg-success-soft border border-success-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Success alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft border border-warning-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Warning alert!</span> Change a few things up and try submitting again.</p>
</div>
<div class="flex items-start sm:items-center p-4 text-sm text-heading rounded-base bg-neutral-secondary-medium border border-default-medium" role="alert">
<svg class="w-4 h-4 me-2 shrink-0 mt-0.5 sm:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<p><span class="font-medium me-1">Dark alert!</span> Change a few things up and try submitting again.</p>
</div>
{{< /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 >}}
<div class="flex p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer border border-brand-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div>
<span class="font-medium">Ensure that these requirements are met:</span>
<ul class="mt-2 list-disc list-outside space-y-1 ps-2.5">
<li>At least 10 characters (and up to 100 characters)</li>
<li>At least one lowercase character</li>
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
</ul>
</div>
</div>
<div class="flex p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft border border-danger-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Danger</span>
<div>
<span class="font-medium">Ensure that these requirements are met:</span>
<ul class="mt-2 list-disc list-outside space-y-1 ps-2.5">
<li>At least 10 characters (and up to 100 characters)</li>
<li>At least one lowercase character</li>
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
</ul>
</div>
</div>
<div class="flex p-4 mb-4 text-sm text-fg-success-strong rounded-base bg-success-soft border border-success-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Success</span>
<div>
<span class="font-medium">Ensure that these requirements are met:</span>
<ul class="mt-2 list-disc list-outside space-y-1 ps-2.5">
<li>At least 10 characters (and up to 100 characters)</li>
<li>At least one lowercase character</li>
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
</ul>
</div>
</div>
<div class="flex p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft border border-warning-subtle" role="alert">
<svg class="w-4 h-4 me-2 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Success</span>
<div>
<span class="font-medium">Ensure that these requirements are met:</span>
<ul class="mt-2 list-disc list-outside space-y-1 ps-2.5">
<li>At least 10 characters (and up to 100 characters)</li>
<li>At least one lowercase character</li>
<li>Inclusion of at least one special character, e.g., ! @ # ?</li>
</ul>
</div>
</div>
{{< /example >}}
<div class="mt-8 -mb-5">
{{< requires_js >}}
</div>
## Dismissing
Use the following alert elements that are also dismissible.
{{< example github="components/alerts.md" show_dark=true >}}
<div id="alert-1" class="flex sm:items-center p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-brand-medium hover:bg-brand-soft inline-flex items-center justify-center h-8 w-8 shrink-0 shrink-0" data-dismiss-target="#alert-1" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-2" class="flex sm:items-center p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-danger-soft text-fg-danger-strong rounded focus:ring-2 focus:ring-danger-medium p-1.5 hover:bg-danger-medium inline-flex items-center justify-center h-8 w-8 shrink-0 shrink-0" data-dismiss-target="#alert-2" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-3" class="flex sm:items-center p-4 mb-4 text-sm text-fg-success-strong rounded-base bg-success-soft" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-success-medium p-1.5 hover:bg-success-medium inline-flex items-center justify-center h-8 w-8 shrink-0 shrink-0" data-dismiss-target="#alert-3" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-4" class="flex smitems-center flex items-center p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-warning-medium p-1.5 hover:bg-warning-medium inline-flex items-center justify-center h-8 w-8 shrink-0 shrink-0" data-dismiss-target="#alert-4" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-5" class="flex sm:items-center p-4 text-sm text-heading rounded-base bg-neutral-secondary-medium" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple dark alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-neutral-tertiary p-1.5 hover:bg-neutral-tertiary-medium inline-flex items-center justify-center h-8 w-8 shrink-0 shrink-0" data-dismiss-target="#alert-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
{{< /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 >}}
<div id="alert-border-1" class="flex sm:items-center p-4 mb-4 text-sm text-fg-brand-strong bg-brand-softer border-t-4 border-brand-subtle" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-brand-medium hover:bg-brand-soft inline-flex items-center justify-center h-8 w-8 shrink-0" data-dismiss-target="#alert-border-1" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-border-2" class="flex sm:items-center p-4 mb-4 text-sm text-fg-danger-strong bg-danger-soft border-t-4 border-danger-subtle" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-danger-soft text-fg-danger-strong rounded focus:ring-2 focus:ring-danger-medium p-1.5 hover:bg-danger-medium inline-flex items-center justify-center h-8 w-8 shrink-0" data-dismiss-target="#alert-border-2" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-border-3" class="flex sm:items-center p-4 mb-4 text-sm text-fg-success-strong bg-success-soft border-t-4 border-success-subtle" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-success-medium p-1.5 hover:bg-success-medium inline-flex items-center justify-center h-8 w-8 shrink-0" data-dismiss-target="#alert-border-3" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-border-4" class="flex sm:items-center p-4 mb-4 text-sm text-fg-warning bg-warning-soft border-t-4 border-warning-subtle" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple info alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-warning-medium p-1.5 hover:bg-warning-medium inline-flex items-center justify-center h-8 w-8 shrink-0" data-dismiss-target="#alert-border-4" aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div id="alert-border-5" class="flex sm:items-center p-4 text-sm text-heading bg-neutral-secondary-medium border-t-4 border-default-medium" role="alert">
<svg class="w-4 h-4 shrink-0 mt-0.5 md:mt-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<div class="ms-2 text-sm ">
A simple dark alert with an <a href="#" class="font-medium underline hover:no-underline">example link</a>. Give it a click if you like.
</div>
<button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-neutral-tertiary p-1.5 hover:bg-neutral-tertiary-medium inline-flex items-center justify-center h-8 w-8 shrink-0" data-dismiss-target="#alert-border-5" aria-label="Close">
<span class="sr-only">Dismiss</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
{{< /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 >}}
<div id="alert-additional-content-1" class="p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer border border-brand-subtle" role="alert">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="w-4 h-4 shrink-0 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<h3 class="font-medium">This is a info alert</h3>
</div>
<button type="button" data-dismiss-target="#alert-additional-content-1" aria-label="Close" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-brand-medium hover:bg-brand-soft inline-flex items-center justify-center h-8 w-8 shrink-0">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div class="mt-2 mb-4">
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
</div>
<button type="button" class="inline-flex items-center text-white bg-brand hover:bg-brand-strong box-border border border-transparent focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5 focus:outline-none">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/><path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
View more
</button>
</div>
<div id="alert-additional-content-2" class="p-4 mb-4 text-sm text-fg-danger-strong rounded-base bg-danger-soft border border-danger-subtle" role="alert">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="w-4 h-4 shrink-0 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<h3 class="font-medium">This is a danger alert</h3>
</div>
<button type="button" data-dismiss-target="#alert-additional-content-2" aria-label="Close" class="ms-auto -mx-1.5 -my-1.5 bg-danger-soft text-fg-danger-strong rounded focus:ring-2 focus:ring-danger-medium p-1.5 hover:bg-danger-medium inline-flex items-center justify-center h-8 w-8 shrink-0">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div class="mt-2 mb-4">
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
</div>
<button type="button" class="inline-flex items-center text-white bg-danger box-border border border-transparent hover:bg-danger-strong focus:ring-4 focus:ring-danger-medium shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5 focus:outline-none">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/><path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
View more
</button>
</div>
<div id="alert-additional-content-3" class="p-4 mb-4 text-sm text-fg-success-strong rounded-base bg-success-soft border border-success-subtle" role="alert">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="w-4 h-4 shrink-0 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<h3 class="font-medium">This is a success alert</h3>
</div>
<button type="button" data-dismiss-target="#alert-additional-content-3" aria-label="Close" class="ms-auto -mx-1.5 -my-1.5 bg-success-soft text-fg-success-strong rounded focus:ring-2 focus:ring-success-medium p-1.5 hover:bg-success-medium inline-flex items-center justify-center h-8 w-8 shrink-0">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div class="mt-2 mb-4">
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
</div>
<button type="button" class="inline-flex items-center text-white bg-success box-border border border-transparent hover:bg-success-strong focus:ring-4 focus:ring-success-medium shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5 focus:outline-none">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/><path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
View more
</button>
</div>
<div id="alert-additional-content-4" class="p-4 mb-4 text-sm text-fg-warning rounded-base bg-warning-soft border border-warning-subtle" role="alert">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="w-4 h-4 shrink-0 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<h3 class="font-medium">This is a warning alert</h3>
</div>
<button type="button" data-dismiss-target="#alert-additional-content-4" aria-label="Close" class="ms-auto -mx-1.5 -my-1.5 bg-warning-soft text-fg-warning-strong rounded focus:ring-2 focus:ring-warning-medium p-1.5 hover:bg-warning-medium inline-flex items-center justify-center h-8 w-8 shrink-0">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div class="mt-2 mb-4">
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
</div>
<button type="button" class="inline-flex items-center text-white bg-warning box-border border border-transparent hover:bg-warning-strong focus:ring-4 focus:ring-warning-medium shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5 focus:outline-none">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/><path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
View more
</button>
</div>
<div id="alert-additional-content-5" class="p-4 text-sm text-heading rounded-base bg-neutral-secondary-medium border border-default-medium" role="alert">
<div class="flex items-center justify-between">
<div class="flex items-center">
<svg class="w-4 h-4 shrink-0 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
<span class="sr-only">Info</span>
<h3 class="font-medium">This is a default alert</h3>
</div>
<button type="button" data-dismiss-target="#alert-additional-content-5" aria-label="Close" class="ms-auto -mx-1.5 -my-1.5 rounded focus:ring-2 focus:ring-neutral-tertiary p-1.5 hover:bg-neutral-tertiary-medium inline-flex items-center justify-center h-8 w-8 shrink-0">
<span class="sr-only">Close</span>
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
</button>
</div>
<div class="mt-2 mb-4">
More info about this info alert goes here. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
</div>
<button type="button" class="inline-flex items-center text-white bg-dark-soft box-border border border-transparent hover:bg-dark-strong focus:ring-4 focus:ring-neutral-tertiary shadow-xs font-medium leading-5 rounded-base text-xs px-3 py-1.5 focus:outline-none">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-width="2" d="M21 12c0 1.2-4.03 6-9 6s-9-4.8-9-6c0-1.2 4.03-6 9-6s9 4.8 9 6Z"/><path stroke="currentColor" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/></svg>
View more
</button>
</div>
{{< /example >}}
## Announcement alerts
Use this alert component to make announcements with a CTA link.
{{< example github="components/alerts.md" show_dark=true >}}
<div id="alert-small-1" class="w-auto inline-flex items-center p-1 pe-2 mb-4 text-sm text-fg-brand-strong rounded-full bg-brand-softer border border-brand-subtle" role="alert">
<span class="bg-brand-soft text-fg-brand-strong py-0.5 px-2 rounded-full">New</span>
<div class="ms-2 text-sm">
Great job! You've acknowledged this <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
</div>
<svg class="w-4 h-4 ms-1 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
</div>
<div id="alert-small-2" class="w-auto inline-flex items-center p-1 pe-2 mb-4 text-sm text-fg-danger-strong rounded-full bg-danger-soft border border-danger-subtle" role="alert">
<span class="bg-danger-medium text-fg-danger-strong py-0.5 px-2 rounded-full">New</span>
<div class="ms-2 text-sm">
Great job! You've acknowledged this <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
</div>
<svg class="w-4 h-4 ms-1 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
</div>
<div id="alert-small-3" class="w-auto inline-flex items-center p-1 pe-2 mb-4 text-sm text-fg-success-strong rounded-full bg-success-soft border border-success-subtle" role="alert">
<span class="bg-success-medium text-fg-success-strong py-0.5 px-2 rounded-full">New</span>
<div class="ms-2 text-sm">
Great job! You've acknowledged this <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
</div>
<svg class="w-4 h-4 ms-1 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
</div>
<div id="alert-small-4" class="w-auto inline-flex items-center p-1 pe-2 mb-4 text-sm text-fg-warning rounded-full bg-warning-soft border border-warning-subtle" role="alert">
<span class="bg-warning-medium text-fg-warning py-0.5 px-2 rounded-full">New</span>
<div class="ms-2 text-sm">
Great job! You've acknowledged this <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
</div>
<svg class="w-4 h-4 ms-1 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
</div>
<div id="alert-small-5" class="w-auto inline-flex items-center p-1 pe-2 mb-4 text-sm text-heading rounded-full bg-neutral-secondary-medium border border-default-medium" role="alert">
<span class="bg-neutral-quaternary text-heading py-0.5 px-2 rounded-full">New</span>
<div class="ms-2 text-sm">
Great job! You've acknowledged this <a href="#" class="font-medium underline hover:no-underline">significant</a> alert message.
</div>
<svg class="w-4 h-4 ms-1 shrink-0" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>
</div>
{{< /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.
<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
<table class="w-full text-sm text-left text-body">
<thead class="bg-neutral-secondary-soft">
<tr class="text-heading text-xs font-medium uppercase">
<th scope="col" class="px-6 py-3">
Parameter
</th>
<th scope="col" class="px-6 py-3">
Type
</th>
<th scope="col" class="px-6 py-3">
Required
</th>
<th scope="col" class="px-6 py-3">
Description
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">targetEl</code>
</td>
<td class="px-6 py-4">
Element
</td>
<td class="px-6 py-4">
Required
</td>
<td class="px-6 py-4">
Pass the element object that will be dismissed.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">triggerEl</code>
</td>
<td class="px-6 py-4">
Element
</td>
<td class="px-6 py-4">
Optional
</td>
<td class="px-6 py-4">
Pass the element object that will trigger the targetEl dismission on click.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">options</code>
</td>
<td class="px-6 py-4">
Object
</td>
<td class="px-6 py-4">
Optional
</td>
<td class="px-6 py-4">
Pass the options object to set the trigger element, transition, duration, timing classes of the dismiss animation and callback functions.
</td>
</tr>
<tr class="bg-neutral-primary">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">instanceOptions</code>
</td>
<td class="px-6 py-4">
Object
</td>
<td class="px-6 py-4">
Optional
</td>
<td class="px-6 py-4">
Object of options that allows you to set a custom ID for the instance that is being added to the <a href="https://flowbite.com/docs/getting-started/javascript/#instance-options" class="underline hover:no-underline">Instance Manager</a> and whether to override or not an existing instance.
</td>
</tr>
</tbody>
</table>
</div>
### 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.
<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
<table class="w-full text-sm text-left text-body0">
<thead class="bg-neutral-secondary-soft">
<tr class="text-heading text-xs font-medium uppercase">
<th scope="col" class="px-6 py-3">
Option
</th>
<th scope="col" class="px-6 py-3">
Type
</th>
<th scope="col" class="px-6 py-3">
Description
</th>
</tr>
</thead>
<tbody class="text-body">
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">transition</code>
</td>
<td class="px-6 py-4 font-medium">
String
</td>
<td class="px-6 py-4">
Use one of the Transition Property utility classes from Tailwind CSS to set transition type for the main element. The default value is <code class="text-fg-brand">transition-opacity</code>.
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">duration</code>
</td>
<td class="px-6 py-4 font-medium">
Integer
</td>
<td class="px-6 py-4">
Set the duration of the dismissing animation. The default value is <code class="text-fg-brand">300</code> (300 milliseconds).
</td>
</tr>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">timing</code>
</td>
<td class="px-6 py-4 font-medium">
String
</td>
<td class="px-6 py-4">
Set the transition timing function utility class from Tailwind CSS. The default value is <code class="text-fg-brand">ease-out</code>.
</td>
</tr>
<tr class="bg-neutral-primary">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">onHide</code>
</td>
<td class="px-6 py-4 font-medium">
Function
</td>
<td class="px-6 py-4">
Set a callback function when the item has been dismissed.
</td>
</tr>
</tbody>
</table>
</div>
### Methods
Use the following methods on the Dismiss object to programmatically manipulate the behaviour.
<div class="relative my-10 overflow-x-auto shadow-xs rounded-base border border-default">
<table class="w-full text-sm text-left text-body">
<thead class="text-heading bg-neutral-secondary-soft">
<tr class="text-xs font-medium uppercase">
<th scope="col" class="px-6 py-3">
Method
</th>
<th scope="col" class="px-6 py-3">
Description
</th>
</tr>
</thead>
<tbody>
<tr class="border-b bg-neutral-primary border-default">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">hide()</code>
</td>
<td class="px-6 py-4">
Use this method on the Dismiss object to hide the target element.
</td>
</tr>
<tr class="bg-neutral-primary">
<td class="px-6 py-4 font-medium">
<code class="text-fg-brand">updateOnHide(callback)</code>
</td>
<td class="px-6 py-4">
Use this method to set the callback function when the item has been dismissed.
</td>
</tr>
</tbody>
</table>
</div>
### 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" >}}
<button id="triggerElement" type="button" class="text-white bg-brand box-border border border-transparent hover:bg-brand-strong focus:ring-4 focus:ring-brand-medium shadow-xs font-medium leading-5 rounded-base text-sm px-4 py-2.5 focus:outline-none">Hide alert</button>
<div id="targetElement" class="p-4 mb-4 text-sm text-fg-brand-strong rounded-base bg-brand-softer" role="alert">
<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.
</div>
{{< /code >}}
### TypeScript
If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration</a> 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 >}}
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="Rounded avatar">
<img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="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 >}}
<img class="w-10 h-10 p-1 rounded-full ring-2 ring-default" src="/docs/images/people/profile-picture-5.jpg" alt="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 >}}
<div class="relative w-10 h-10 overflow-hidden bg-neutral-secondary-medium rounded-full">
<svg class="absolute w-12 h-12 text-body-subtle -left-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
</div>
{{< /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 >}}
<div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-neutral-tertiary rounded-full">
<span class="font-medium text-body">JL</span>
</div>
{{< /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 >}}
<div>
<div id="tooltip-jese" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
Jese Leos
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<img data-tooltip-target="tooltip-jese" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Medium avatar">
</div>
<div>
<div id="tooltip-roberta" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
Roberta Casas
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<img data-tooltip-target="tooltip-roberta" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-4.jpg" alt="Medium avatar">
</div>
<div>
<div id="tooltip-bonnie" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-dark rounded-base shadow-xs opacity-0 tooltip">
Bonnie Green
<div class="tooltip-arrow" data-popper-arrow></div>
</div>
<img data-tooltip-target="tooltip-bonnie" class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-3.jpg" alt="Medium avatar">
</div>
{{< /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 >}}
<div class="relative">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
<span class="top-0 left-7 absolute w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
</div>
<div class="relative">
<img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="">
<span class="absolute top-0 left-8 transform -translate-y-1/2 w-3.5 h-3.5 bg-danger border-2 border-buffer rounded-full"></span>
</div>
<div class="relative">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
<span class="bottom-0 left-7 absolute w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
</div>
<div class="relative">
<img class="w-10 h-10 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="">
<span class="absolute bottom-0 left-8 transform translate-y-1/4 w-3.5 h-3.5 bg-success border-2 border-buffer rounded-full"></span>
</div>
{{< /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 >}}
<div class="flex -space-x-4 rtl:space-x-reverse">
<img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
<img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
<img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
<img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-4.jpg" alt="">
</div>
<div class="flex -space-x-4 rtl:space-x-reverse">
<img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
<img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-2.jpg" alt="">
<img class="w-10 h-10 border-2 border-buffer rounded-full" src="/docs/images/people/profile-picture-3.jpg" alt="">
<a class="flex items-center justify-center w-10 h-10 text-xs font-medium text-white bg-dark-strong border-2 border-buffer rounded-full" href="#">+99</a>
</div>
{{< /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 >}}
<div class="flex items-center gap-2.5">
<img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-5.jpg" alt="">
<div class="font-medium text-heading">
<div>Jese Leos</div>
<div class="text-sm font-normal text-body">Joined in August 2014</div>
</div>
</div>
{{< /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" >}}
<img id="avatarButton" type="button" data-dropdown-toggle="userDropdown" data-dropdown-placement="bottom-start" class="w-10 h-10 rounded-full cursor-pointer" src="/docs/images/people/profile-picture-5.jpg" alt="User dropdown">
<!-- Dropdown menu -->
<div id="userDropdown" class="z-10 hidden bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-44">
<div class="px-4 py-3 border-b border-default-medium text-sm text-heading">
<div class="font-medium">Bonnie Green</div>
<div class="truncate">name@flowbite.com</div>
</div>
<ul class="p-2 text-sm text-body font-medium" aria-labelledby="avatarButton">
<li>
<a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Dashboard</a>
</li>
<li>
<a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Settings</a>
</li>
<li>
<a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded-md">Earnings</a>
</li>
<li>
<a href="#" class="block w-full p-2 hover:bg-neutral-tertiary-medium text-fg-danger rounded-md">Sign out</a>
</li>
</ul>
</div>
{{< /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 >}}
<img class="w-4.5 h-4.5 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Extra small avatar">
<img class="w-6 h-6 rounded-sm" src="/docs/images/people/profile-picture-5.jpg" alt="Small avatar">
<img class="w-8 h-8 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Base avatar">
<img class="w-11 h-11 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="Large avatar">
<img class="w-14 h-14 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="xl avatar">
<img class="w-16 h-16 rounded-base" src="/docs/images/people/profile-picture-5.jpg" alt="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 >}}
<span class="bg-brand-softer text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">Brand</span>
<span class="bg-neutral-primary-soft text-heading text-xs font-medium px-1.5 py-0.5 rounded">Alternative</span>
<span class="bg-neutral-secondary-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">Gray</span>
<span class="bg-danger-soft text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">Danger</span>
<span class="bg-success-soft text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">Success</span>
<span class="bg-warning-soft text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">Warning</span>
{{< /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 >}}
<span class="bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">Brand</span>
<span class="bg-neutral-primary-soft border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded">Alternative</span>
<span class="bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">Gray</span>
<span class="bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">Danger</span>
<span class="bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">Success</span>
<span class="bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">Warning</span>
{{< /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 >}}
<span class="bg-brand-softer text-fg-brand-strong text-sm font-medium px-2 py-1 rounded">Brand</span>
<span class="bg-neutral-primary-soft text-heading text-sm font-medium px-2 py-1 rounded">Alternative</span>
<span class="bg-neutral-secondary-medium text-heading text-sm font-medium px-2 py-1 rounded">Gray</span>
<span class="bg-danger-soft text-fg-danger-strong text-sm font-medium px-2 py-1 rounded">Danger</span>
<span class="bg-success-soft text-fg-success-strong text-sm font-medium px-2 py-1 rounded">Success</span>
<span class="bg-warning-soft text-fg-warning text-sm font-medium px-2 py-1 rounded">Warning</span>
{{< /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 >}}
<span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-brand-subtle text-fg-brand-strong text-sm font-medium rounded bg-brand-softer">Brand</span>
<span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-default text-heading text-sm font-medium rounded bg-neutral-primary-soft">Alternative</span>
<span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-default-medium text-heading text-sm font-medium rounded bg-neutral-secondary-medium">Gray</span>
<span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-danger-subtle text-fg-danger-strong text-sm font-medium rounded bg-danger-soft">Danger</span>
<span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-success-subtle text-fg-success-strong text-sm font-medium rounded bg-success-soft">Success</span>
<span class="inline-flex items-center px-2 py-1 ring-1 ring-inset ring-warning-subtle text-fg-warning text-sm font-medium rounded bg-warning-soft">Warning</span>
{{< /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 >}}
<span class="bg-brand-softer text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Brand</span>
<span class="bg-neutral-primary-soft text-heading text-xs font-medium px-1.5 py-0.5 rounded-fullm">Alternative</span>
<span class="bg-neutral-secondary-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded-full">Gray</span>
<span class="bg-danger-soft text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Danger</span>
<span class="bg-success-soft text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Success</span>
<span class="bg-warning-soft text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded-full">Warning</span>
{{< /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 >}}
<span class="bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Brand</span>
<span class="bg-neutral-primary-soft border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded-full">Alternative</span>
<span class="bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded-full">Gray</span>
<span class="bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Danger</span>
<span class="bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded-full">Success</span>
<span class="bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded-full">Warning</span>
{{< /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 >}}
<a href="#" class="bg-brand-softer hover:bg-brand-soft border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">Brand</a>
<a href="#" class="bg-neutral-primary-soft hover:bg-neutral-secondary-medium border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded">Alternative</a>
<a href="#" class="bg-neutral-secondary-medium hover:bg-neutral-tertiary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">Gray</a>
<a href="#" class="bg-danger-soft hover:bg-danger-medium border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">Danger</a>
<a href="#" class="bg-success-soft hover:bg-success-medium border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">Success</a>
<a href="#" class="bg-warning-soft hover:bg-warning-medium border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">Warning</a>
{{< /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 >}}
<span class="flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">
<svg class="w-3 h-3 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="flex items-center bg-neutral-primary-soft border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded">
<svg class="w-3 h-3 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="flex items-center bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">
<svg class="w-3 h-3 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="flex items-center bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">
<svg class="w-3 h-3 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="flex items-center bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">
<svg class="w-3 h-3 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="flex items-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">
<svg class="w-3 h-3 me-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins agong
</span>
{{< /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 >}}
<span class="inline-flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-sm font-medium leading-none px-2 py-1 rounded">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="inline-flex items-center bg-neutral-primary-soft border border-default text-heading text-sm font-medium leading-none px-2 py-1 rounded">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="inline-flex items-center bg-neutral-secondary-medium border border-default-medium text-heading text-sm font-medium leading-none px-2 py-1 rounded">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="inline-flex items-center bg-danger-soft border border-danger-subtle text-fg-danger-strong text-sm font-medium leading-none px-2 py-1 rounded">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="inline-flex items-center bg-success-soft border border-success-subtle text-fg-success-strong text-sm font-medium leading-none px-2 py-1 rounded">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins ago
</span>
<span class="inline-flex items-center bg-warning-soft border border-warning-subtle text-fg-warning text-sm font-medium leading-none px-2 py-1 rounded">
<svg class="w-3.5 h-3.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
2 mins agong
</span>
{{< /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 >}}
<span class="flex items-center justify-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium h-5 w-5 rounded-full">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-neutral-primary-soft border border-default text-heading text-xs font-medium h-5 w-5 rounded-full">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium h-5 w-5 rounded-full">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium h-5 w-5 rounded-full">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium h-5 w-5 rounded-full">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium h-5 w-5 rounded-full">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
{{< /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 >}}
<span class="flex items-center justify-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium h-6 w-6 rounded-full">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-neutral-primary-soft border border-default text-heading text-xs font-medium h-6 w-6 rounded-full">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium h-6 w-6 rounded-full">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium h-6 w-6 rounded-full">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium h-6 w-6 rounded-full">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
<span class="flex items-center justify-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium h-6 w-6 rounded-full">
<svg class="w-3.5 h-3.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/></svg>
</span>
{{< /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 >}}
<span class="flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded">
<span class="h-1.5 w-1.5 bg-fg-brand-strong rounded-full me-1"></span>
2 mins ago
</span>
<span class="flex items-center bg-neutral-primary-soft border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded">
<span class="h-1.5 w-1.5 bg-heading rounded-full me-1"></span>
2 mins ago
</span>
<span class="flex items-center bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded">
<span class="h-1.5 w-1.5 bg-heading rounded-full me-1"></span>
2 mins ago
</span>
<span class="flex items-center bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded">
<span class="h-1.5 w-1.5 bg-fg-danger-strong rounded-full me-1"></span>
2 mins ago
</span>
<span class="flex items-center bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded">
<span class="h-1.5 w-1.5 bg-fg-success-strong rounded-full me-1"></span>
2 mins ago
</span>
<span class="flex items-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded">
<span class="h-1.5 w-1.5 bg-fg-warning rounded-full me-1"></span>
2 mins agong
</span>
{{< /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 >}}
<span class="flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium px-1.5 py-0.5 rounded gap-1">
<svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-fg-brand" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#1C64F2"/></svg>
<span>2 mins ago</span>
</span>
<span class="flex items-center bg-neutral-primary-soft border border-default text-heading text-xs font-medium px-1.5 py-0.5 rounded gap-1">
<svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-neutral-tertiary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#6A7282"/></svg>
<span>2 mins ago</span>
</span>
<span class="flex items-center bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium px-1.5 py-0.5 rounded gap-1">
<svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-neutral-quaternary" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#6A7282"/></svg>
<span>2 mins ago</span>
</span>
<span class="flex items-center bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium px-1.5 py-0.5 rounded gap-1">
<svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-danger-medium" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#C70036"/></svg>
<span>2 mins ago</span>
</span>
<span class="flex items-center bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium px-1.5 py-0.5 rounded gap-1">
<svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-success-medium" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#009966"/></svg>
<span>2 mins ago</span>
</span>
<span class="flex items-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium px-1.5 py-0.5 rounded gap-1">
<svg aria-hidden="true" role="status" class="w-3 h-3 me-1 animate-spin text-warning-medium" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/><path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="#D03801"/></svg>
<span>2 mins ago</span>
</span>
{{< /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 >}}
<span id="badge-dismiss-brand" class="inline-flex items-center bg-brand-softer border border-brand-subtle text-fg-brand-strong text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
<span>Brand</span>
<button type="button" class="inline-flex items-center p-0.5 text-sm bg-transparent rounded-xs hover:bg-brand-soft" data-dismiss-target="#badge-dismiss-brand" aria-label="Remove">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-alternative" class="inline-flex items-center bg-neutral-primary-soft border border-default text-heading text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
<span>Alternative</span>
<button type="button" class="inline-flex items-center p-0.5 text-sm bg-transparent rounded-xs hover:bg-neutral-tertiary" data-dismiss-target="#badge-dismiss-alternative" aria-label="Remove">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-gray" class="inline-flex items-center bg-neutral-secondary-medium border border-default-medium text-heading text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
<span>Gray</span>
<button type="button" class="inline-flex items-center p-0.5 text-sm bg-transparent rounded-xs hover:bg-neutral-quaternary" data-dismiss-target="#badge-dismiss-gray" aria-label="Remove">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-danger" class="inline-flex items-center bg-danger-soft border border-danger-subtle text-fg-danger-strong text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
<span>Danger</span>
<button type="button" class="inline-flex items-center p-0.5 text-sm bg-transparent rounded-xs hover:bg-danger-medium" data-dismiss-target="#badge-dismiss-danger" aria-label="Remove">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-success" class="inline-flex items-center bg-success-soft border border-success-subtle text-fg-success-strong text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
<span>Success</span>
<button type="button" class="inline-flex items-center p-0.5 text-sm bg-transparent rounded-xs hover:bg-success-medium" data-dismiss-target="#badge-dismiss-success" aria-label="Remove">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/></svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-warning" class="inline-flex items-center bg-warning-soft border border-warning-subtle text-fg-warning text-xs font-medium ps-1.5 pe-0.5 py-0.5 rounded gap-1">
<span>
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
SYMBOL INDEX (295 symbols across 48 files)
FILE: src/components/accordion/index.ts
class Accordion (line 21) | class Accordion implements AccordionInterface {
method constructor (line 29) | constructor(
method init (line 51) | init() {
method destroy (line 72) | destroy() {
method removeInstance (line 84) | removeInstance() {
method destroyAndRemoveInstance (line 88) | destroyAndRemoveInstance() {
method getItem (line 93) | getItem(id: string) {
method open (line 97) | open(id: string) {
method toggle (line 140) | toggle(id: string) {
method close (line 153) | close(id: string) {
method updateOnOpen (line 175) | updateOnOpen(callback: () => void) {
method updateOnClose (line 179) | updateOnClose(callback: () => void) {
method updateOnToggle (line 183) | updateOnToggle(callback: () => void) {
function initAccordions (line 188) | function initAccordions() {
FILE: src/components/accordion/interface.ts
type AccordionInterface (line 5) | interface AccordionInterface {
FILE: src/components/accordion/types.ts
type AccordionItem (line 3) | type AccordionItem = {
type AccordionOptions (line 12) | type AccordionOptions = {
FILE: src/components/carousel/index.ts
class Carousel (line 31) | class Carousel implements CarouselInterface {
method constructor (line 42) | constructor(
method init (line 75) | init() {
method destroy (line 103) | destroy() {
method removeInstance (line 109) | removeInstance() {
method destroyAndRemoveInstance (line 113) | destroyAndRemoveInstance() {
method getItem (line 118) | getItem(position: number) {
method slideTo (line 126) | slideTo(position: number) {
method next (line 152) | next() {
method prev (line 172) | prev() {
method _rotate (line 193) | _rotate(rotationItems: RotationItems) {
method cycle (line 247) | cycle() {
method pause (line 258) | pause() {
method getActiveItem (line 265) | getActiveItem() {
method _setActiveItem (line 273) | _setActiveItem(item: CarouselItem) {
method updateOnNext (line 298) | updateOnNext(callback: () => void) {
method updateOnPrev (line 302) | updateOnPrev(callback: () => void) {
method updateOnChange (line 306) | updateOnChange(callback: () => void) {
function initCarousels (line 311) | function initCarousels() {
FILE: src/components/carousel/interface.ts
type CarouselInterface (line 8) | interface CarouselInterface {
FILE: src/components/carousel/types.ts
type CarouselItem (line 3) | type CarouselItem = {
type IndicatorItem (line 8) | type IndicatorItem = {
type RotationItems (line 13) | type RotationItems = {
type CarouselOptions (line 19) | type CarouselOptions = {
FILE: src/components/clipboard/index.ts
class CopyClipboard (line 18) | class CopyClipboard implements CopyClipboardInterface {
method constructor (line 27) | constructor(
method init (line 51) | init() {
method destroy (line 69) | destroy() {
method removeInstance (line 81) | removeInstance() {
method destroyAndRemoveInstance (line 85) | destroyAndRemoveInstance() {
method getTargetValue (line 90) | getTargetValue() {
method copy (line 104) | copy() {
method decodeHTML (line 132) | decodeHTML(html: string) {
method updateOnCopyCallback (line 138) | updateOnCopyCallback(callback: () => void) {
function initCopyClipboards (line 143) | function initCopyClipboards() {
FILE: src/components/clipboard/interface.ts
type CopyClipboardInterface (line 3) | interface CopyClipboardInterface {
FILE: src/components/clipboard/types.ts
type CopyClipboardOptions (line 3) | type CopyClipboardOptions = {
FILE: src/components/collapse/index.ts
class Collapse (line 18) | class Collapse implements CollapseInterface {
method constructor (line 27) | constructor(
method init (line 50) | init() {
method destroy (line 69) | destroy() {
method removeInstance (line 76) | removeInstance() {
method destroyAndRemoveInstance (line 80) | destroyAndRemoveInstance() {
method collapse (line 85) | collapse() {
method expand (line 96) | expand() {
method toggle (line 107) | toggle() {
method updateOnCollapse (line 117) | updateOnCollapse(callback: () => void) {
method updateOnExpand (line 121) | updateOnExpand(callback: () => void) {
method updateOnToggle (line 125) | updateOnToggle(callback: () => void) {
function initCollapses (line 130) | function initCollapses() {
FILE: src/components/collapse/interface.ts
type CollapseInterface (line 3) | interface CollapseInterface {
FILE: src/components/collapse/types.ts
type CollapseOptions (line 3) | type CollapseOptions = {
FILE: src/components/datepicker/index.ts
class Datepicker (line 34) | class Datepicker implements DatepickerInterface {
method constructor (line 41) | constructor(
method init (line 62) | init() {
method destroy (line 80) | destroy() {
method removeInstance (line 87) | removeInstance() {
method destroyAndRemoveInstance (line 92) | destroyAndRemoveInstance() {
method getDatepickerInstance (line 97) | getDatepickerInstance() {
method getDate (line 101) | getDate() {
method setDate (line 117) | setDate(date: any) {
method show (line 133) | show() {
method hide (line 138) | hide() {
method _getDatepickerOptions (line 143) | _getDatepickerOptions(options: DatepickerOptions) {
method updateOnShow (line 186) | updateOnShow(callback: () => void) {
method updateOnHide (line 190) | updateOnHide(callback: () => void) {
function initDatepickers (line 195) | function initDatepickers() {
FILE: src/components/datepicker/interface.ts
type DatepickerInterface (line 4) | interface DatepickerInterface {
FILE: src/components/datepicker/types.ts
type DatepickerOptions (line 4) | interface DatepickerOptions {
FILE: src/components/dial/index.ts
class Dial (line 19) | class Dial implements DialInterface {
method constructor (line 30) | constructor(
method init (line 55) | init() {
method destroy (line 83) | destroy() {
method removeInstance (line 102) | removeInstance() {
method destroyAndRemoveInstance (line 106) | destroyAndRemoveInstance() {
method hide (line 111) | hide() {
method show (line 122) | show() {
method toggle (line 133) | toggle() {
method isHidden (line 141) | isHidden() {
method isVisible (line 145) | isVisible() {
method _getTriggerEventTypes (line 149) | _getTriggerEventTypes(triggerType: DialTriggerType) {
method updateOnShow (line 174) | updateOnShow(callback: () => void) {
method updateOnHide (line 178) | updateOnHide(callback: () => void) {
method updateOnToggle (line 182) | updateOnToggle(callback: () => void) {
function initDials (line 187) | function initDials() {
FILE: src/components/dial/interface.ts
type DialInterface (line 3) | interface DialInterface {
FILE: src/components/dial/types.ts
type DialTriggerType (line 3) | type DialTriggerType = 'click' | 'hover' | 'none';
type DialTriggerEventTypes (line 5) | type DialTriggerEventTypes = {
type DialOptions (line 10) | type DialOptions = {
FILE: src/components/dismiss/index.ts
class Dismiss (line 19) | class Dismiss implements DismissInterface {
method constructor (line 27) | constructor(
method init (line 49) | init() {
method destroy (line 59) | destroy() {
method removeInstance (line 66) | removeInstance() {
method destroyAndRemoveInstance (line 70) | destroyAndRemoveInstance() {
method hide (line 75) | hide() {
method updateOnHide (line 90) | updateOnHide(callback: () => void) {
function initDismisses (line 95) | function initDismisses() {
FILE: src/components/dismiss/interface.ts
type DismissInterface (line 3) | interface DismissInterface {
FILE: src/components/dismiss/types.ts
type DismissOptions (line 3) | type DismissOptions = {
FILE: src/components/drawer/index.ts
class Drawer (line 24) | class Drawer implements DrawerInterface {
method constructor (line 34) | constructor(
method init (line 55) | init() {
method destroy (line 83) | destroy() {
method removeInstance (line 95) | removeInstance() {
method destroyAndRemoveInstance (line 99) | destroyAndRemoveInstance() {
method hide (line 104) | hide() {
method show (line 151) | show() {
method toggle (line 197) | toggle() {
method _createBackdrop (line 205) | _createBackdrop() {
method _destroyBackdropEl (line 219) | _destroyBackdropEl() {
method _getPlacementClasses (line 228) | _getPlacementClasses(placement: string): PlacementClasses {
method isHidden (line 269) | isHidden() {
method isVisible (line 273) | isVisible() {
method addEventListenerInstance (line 277) | addEventListenerInstance(
method removeAllEventListenerInstances (line 289) | removeAllEventListenerInstances() {
method getAllEventListenerInstances (line 299) | getAllEventListenerInstances() {
method updateOnShow (line 303) | updateOnShow(callback: () => void) {
method updateOnHide (line 307) | updateOnHide(callback: () => void) {
method updateOnToggle (line 311) | updateOnToggle(callback: () => void) {
function initDrawers (line 316) | function initDrawers() {
FILE: src/components/drawer/interface.ts
type DrawerInterface (line 3) | interface DrawerInterface {
FILE: src/components/drawer/types.ts
type DrawerOptions (line 3) | type DrawerOptions = {
type PlacementClasses (line 15) | type PlacementClasses = {
FILE: src/components/dropdown/index.ts
class Dropdown (line 29) | class Dropdown implements DropdownInterface {
method constructor (line 43) | constructor(
method init (line 67) | init() {
method destroy (line 75) | destroy() {
method removeInstance (line 108) | removeInstance() {
method destroyAndRemoveInstance (line 112) | destroyAndRemoveInstance() {
method _setupEventListeners (line 117) | _setupEventListeners() {
method _createPopperInstance (line 172) | _createPopperInstance() {
method _setupClickOutsideListener (line 189) | _setupClickOutsideListener() {
method _removeClickOutsideListener (line 200) | _removeClickOutsideListener() {
method _handleClickOutside (line 208) | _handleClickOutside(ev: Event, targetEl: HTMLElement) {
method _getTriggerEvents (line 239) | _getTriggerEvents() {
method toggle (line 264) | toggle() {
method isVisible (line 273) | isVisible() {
method show (line 277) | show() {
method hide (line 301) | hide() {
method updateOnShow (line 323) | updateOnShow(callback: () => void) {
method updateOnHide (line 327) | updateOnHide(callback: () => void) {
method updateOnToggle (line 331) | updateOnToggle(callback: () => void) {
function initDropdowns (line 336) | function initDropdowns() {
FILE: src/components/dropdown/interface.ts
type DropdownInterface (line 8) | interface DropdownInterface {
FILE: src/components/dropdown/types.ts
type DropdownTriggerType (line 4) | type DropdownTriggerType = 'click' | 'hover' | 'none';
type DropdownTriggerEventTypes (line 6) | type DropdownTriggerEventTypes = {
type DropdownOptions (line 11) | type DropdownOptions = {
FILE: src/components/index.ts
function initFlowbite (line 16) | function initFlowbite() {
FILE: src/components/input-counter/index.ts
class InputCounter (line 19) | class InputCounter implements InputCounterInterface {
method constructor (line 30) | constructor(
method init (line 56) | init() {
method destroy (line 115) | destroy() {
method removeInstance (line 135) | removeInstance() {
method destroyAndRemoveInstance (line 139) | destroyAndRemoveInstance() {
method getCurrentValue (line 144) | getCurrentValue() {
method increment (line 148) | increment() {
method decrement (line 161) | decrement() {
method updateOnIncrement (line 174) | updateOnIncrement(callback: () => void) {
method updateOnDecrement (line 178) | updateOnDecrement(callback: () => void) {
function initInputCounters (line 183) | function initInputCounters() {
FILE: src/components/input-counter/interface.ts
type InputCounterInterface (line 3) | interface InputCounterInterface {
FILE: src/components/input-counter/types.ts
type InputCounterOptions (line 3) | type InputCounterOptions = {
FILE: src/components/modal/index.ts
class Modal (line 22) | class Modal implements ModalInterface {
method constructor (line 33) | constructor(
method init (line 55) | init() {
method destroy (line 64) | destroy() {
method removeInstance (line 72) | removeInstance() {
method destroyAndRemoveInstance (line 76) | destroyAndRemoveInstance() {
method _createBackdrop (line 81) | _createBackdrop() {
method _destroyBackdropEl (line 92) | _destroyBackdropEl() {
method _setupModalCloseEventListeners (line 99) | _setupModalCloseEventListeners() {
method _removeModalCloseEventListeners (line 123) | _removeModalCloseEventListeners() {
method _handleOutsideClick (line 138) | _handleOutsideClick(target: EventTarget) {
method _getPlacementClasses (line 147) | _getPlacementClasses() {
method toggle (line 178) | toggle() {
method show (line 189) | show() {
method hide (line 212) | hide() {
method isVisible (line 234) | isVisible() {
method isHidden (line 238) | isHidden() {
method addEventListenerInstance (line 242) | addEventListenerInstance(
method removeAllEventListenerInstances (line 254) | removeAllEventListenerInstances() {
method getAllEventListenerInstances (line 264) | getAllEventListenerInstances() {
method updateOnShow (line 268) | updateOnShow(callback: () => void) {
method updateOnHide (line 272) | updateOnHide(callback: () => void) {
method updateOnToggle (line 276) | updateOnToggle(callback: () => void) {
function initModals (line 281) | function initModals() {
FILE: src/components/modal/interface.ts
type ModalInterface (line 3) | interface ModalInterface {
FILE: src/components/modal/types.ts
type modalBackdrop (line 3) | type modalBackdrop = 'static' | 'dynamic';
type modalPlacement (line 4) | type modalPlacement =
type ModalOptions (line 15) | type ModalOptions = {
FILE: src/components/popover/index.ts
class Popover (line 26) | class Popover implements PopoverInterface {
method constructor (line 39) | constructor(
method init (line 63) | init() {
method destroy (line 71) | destroy() {
method removeInstance (line 101) | removeInstance() {
method destroyAndRemoveInstance (line 105) | destroyAndRemoveInstance() {
method _setupEventListeners (line 110) | _setupEventListeners() {
method _createPopperInstance (line 136) | _createPopperInstance() {
method _getTriggerEvents (line 150) | _getTriggerEvents() {
method _setupKeydownListener (line 175) | _setupKeydownListener() {
method _removeKeydownListener (line 188) | _removeKeydownListener() {
method _setupClickOutsideListener (line 196) | _setupClickOutsideListener() {
method _removeClickOutsideListener (line 207) | _removeClickOutsideListener() {
method _handleClickOutside (line 215) | _handleClickOutside(ev: Event, targetEl: HTMLElement) {
method isVisible (line 227) | isVisible() {
method toggle (line 231) | toggle() {
method show (line 240) | show() {
method hide (line 269) | hide() {
method updateOnShow (line 295) | updateOnShow(callback: () => void) {
method updateOnHide (line 299) | updateOnHide(callback: () => void) {
method updateOnToggle (line 303) | updateOnToggle(callback: () => void) {
function initPopovers (line 308) | function initPopovers() {
FILE: src/components/popover/interface.ts
type PopoverInterface (line 8) | interface PopoverInterface {
FILE: src/components/popover/types.ts
type PopoverTriggerType (line 4) | type PopoverTriggerType = 'click' | 'hover' | 'none';
type PopoverTriggerEventTypes (line 6) | type PopoverTriggerEventTypes = {
type PopoverOptions (line 11) | type PopoverOptions = {
FILE: src/components/tabs/index.ts
class Tabs (line 20) | class Tabs implements TabsInterface {
method constructor (line 28) | constructor(
method init (line 49) | init() {
method destroy (line 69) | destroy() {
method removeInstance (line 75) | removeInstance() {
method destroyAndRemoveInstance (line 80) | destroyAndRemoveInstance() {
method getActiveTab (line 85) | getActiveTab() {
method setActiveTab (line 89) | setActiveTab(tab: TabItem) {
method getTab (line 93) | getTab(id: string) {
method show (line 97) | show(id: string, forceShow = false) {
method updateOnShow (line 133) | updateOnShow(callback: () => void) {
function initTabs (line 138) | function initTabs() {
FILE: src/components/tabs/interface.ts
type TabsInterface (line 3) | interface TabsInterface {
FILE: src/components/tabs/types.ts
type TabsOptions (line 3) | type TabsOptions = {
type TabItem (line 10) | type TabItem = {
FILE: src/components/tooltip/index.ts
class Tooltip (line 25) | class Tooltip implements TooltipInterface {
method constructor (line 38) | constructor(
method init (line 62) | init() {
method destroy (line 70) | destroy() {
method removeInstance (line 97) | removeInstance() {
method destroyAndRemoveInstance (line 101) | destroyAndRemoveInstance() {
method _setupEventListeners (line 106) | _setupEventListeners() {
method _createPopperInstance (line 126) | _createPopperInstance() {
method _getTriggerEvents (line 140) | _getTriggerEvents() {
method _setupKeydownListener (line 165) | _setupKeydownListener() {
method _removeKeydownListener (line 178) | _removeKeydownListener() {
method _setupClickOutsideListener (line 186) | _setupClickOutsideListener() {
method _removeClickOutsideListener (line 197) | _removeClickOutsideListener() {
method _handleClickOutside (line 205) | _handleClickOutside(ev: Event, targetEl: HTMLElement) {
method isVisible (line 217) | isVisible() {
method toggle (line 221) | toggle() {
method show (line 229) | show() {
method hide (line 258) | hide() {
method updateOnShow (line 284) | updateOnShow(callback: () => void) {
method updateOnHide (line 288) | updateOnHide(callback: () => void) {
method updateOnToggle (line 292) | updateOnToggle(callback: () => void) {
function initTooltips (line 297) | function initTooltips() {
FILE: src/components/tooltip/interface.ts
type TooltipInterface (line 8) | interface TooltipInterface {
FILE: src/components/tooltip/types.ts
type TooltipTriggerType (line 4) | type TooltipTriggerType = 'click' | 'hover' | 'none';
type TooltipTriggerEventTypes (line 6) | type TooltipTriggerEventTypes = {
type TooltipOptions (line 11) | type TooltipOptions = {
FILE: src/config/global.ts
type Window (line 17) | interface Window {
FILE: src/dom/events.ts
class Events (line 1) | class Events {
method constructor (line 5) | constructor(eventType: string, eventFunctions: EventListener[] = []) {
method init (line 10) | init() {
FILE: src/dom/instances.ts
class Instances (line 16) | class Instances {
method constructor (line 34) | constructor() {
method addInstance (line 53) | addInstance(
method getAllInstances (line 77) | getAllInstances() {
method getInstances (line 81) | getInstances(component: keyof Instances['_instances']) {
method getInstance (line 89) | getInstance(component: keyof Instances['_instances'], id: string) {
method destroyAndRemoveInstance (line 101) | destroyAndRemoveInstance(
method removeInstance (line 112) | removeInstance(component: keyof Instances['_instances'], id: string) {
method destroyInstanceObject (line 119) | destroyInstanceObject(
method instanceExists (line 129) | instanceExists(component: keyof Instances['_instances'], id: string) {
method _generateRandomId (line 141) | _generateRandomId() {
method _componentAndInstanceCheck (line 145) | private _componentAndInstanceCheck(
FILE: src/dom/types.ts
type InstanceOptions (line 1) | type InstanceOptions = {
type EventListenerInstance (line 6) | type EventListenerInstance = {
FILE: src/types/declarations.ts
class Datepicker (line 2) | class Datepicker {
class DateRangePicker (line 11) | class DateRangePicker {
Condensed preview — 254 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (7,246K chars).
[
{
"path": ".eslintignore",
"chars": 33,
"preview": "*.md\n.gitignore\nbuild/\ndist/\nlib/"
},
{
"path": ".eslintrc.js",
"chars": 392,
"preview": "module.exports = {\n root: true,\n parser: '@typescript-eslint/parser',\n plugins: ['@typescript-eslint'],\n env"
},
{
"path": ".github/ISSUE_TEMPLATE/bug_report.md",
"chars": 834,
"preview": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Describe the b"
},
{
"path": ".github/ISSUE_TEMPLATE/custom.md",
"chars": 126,
"preview": "---\nname: Custom issue template\nabout: Describe this issue template's purpose here.\ntitle: ''\nlabels: ''\nassignees: ''\n\n"
},
{
"path": ".github/ISSUE_TEMPLATE/feature_request.md",
"chars": 595,
"preview": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: ''\nassignees: ''\n\n---\n\n**Is your fea"
},
{
"path": ".gitignore",
"chars": 144,
"preview": "node_modules/\ndist/\nlib/\nbuild/\n_gh_pages/\nstatic/*.css\nstatic/*.js\n!static/sw.js\nstatic/*.map\n.DS_Store\nyarn-error.log\n"
},
{
"path": ".npmignore",
"chars": 146,
"preview": "_gh_pages/\nassets/\nbuild/\ncontent/\ndata/\nlayouts/\nnode_modules/\nresources/\nstatic/\nsrc/docs.js\nconfig.yml\nyarn-error.log"
},
{
"path": ".prettierrc",
"chars": 139,
"preview": "{\n \"singleQuote\": true,\n \"eslintIntegration\": true,\n \"tabWidth\": 4,\n \"plugins\": [\n \"prettier-plugin-t"
},
{
"path": ".vscode/settings.json",
"chars": 87,
"preview": "{\n \"editor.codeActionsOnSave\": {\n \"source.fixAll.eslint\": \"explicit\"\n }\n}\n"
},
{
"path": "BUILD-TOOLS.md",
"chars": 906,
"preview": "## FlowBite Documentation\n\nThese are the source files for the Flowbite Tailwind CSS components library.\n\n### Getting sta"
},
{
"path": "CONTRIBUTING.md",
"chars": 3193,
"preview": "# Contributing guide\n\n## What do I need to know to help?\n\nIf you are looking to help to with a code contribution our pro"
},
{
"path": "LICENSE.md",
"chars": 1070,
"preview": "MIT License\n\nCopyright (c) 2023 Bergside Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a c"
},
{
"path": "README.md",
"chars": 35818,
"preview": "<p>\n <a href=\"https://flowbite.com\" >\n <img alt=\"Flowbite - Tailwind CSS components\" width=\"350\" src=\"https://fl"
},
{
"path": "config.yml",
"chars": 701,
"preview": "languageCode: \"en\"\ntitle: \"Flowbite\"\nbaseURL: \"https://flowbite.com/docs/\"\nena"
},
{
"path": "content/_index.html",
"chars": 94,
"preview": "---\nlayout: redirect\nsitemap_exclude: true\nredirect: \"/docs/getting-started/introduction/\"\n---"
},
{
"path": "content/components/accordion.md",
"chars": 59897,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Accordion - Flowbite\ndescription: Use the accordion component to show hidden inform"
},
{
"path": "content/components/alerts.md",
"chars": 50509,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Alerts - Flowbite\ndescription: Show contextual information to your users using aler"
},
{
"path": "content/components/avatar.md",
"chars": 9404,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Avatar - Flowbite\ndescription: Use the avatar component to show a visual representa"
},
{
"path": "content/components/badge.md",
"chars": 40845,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Badges - Flowbite\ndescription: Use Tailwind CSS badges as elements to show counts o"
},
{
"path": "content/components/banner.md",
"chars": 11989,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Sticky Banner - Flowbite\ndescription: Use the banner component to show marketing me"
},
{
"path": "content/components/bottom-navigation.md",
"chars": 51465,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Bottom Navigation - Flowbite\ndescription: Use the bottom navigation bar component t"
},
{
"path": "content/components/breadcrumb.md",
"chars": 19098,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Breadcrumbs - Flowbite\ndescription: Show the location of the current page in a hier"
},
{
"path": "content/components/button-group.md",
"chars": 38201,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Button Group - Flowbite\ndescription: Button groups are a Tailwind CSS powered set o"
},
{
"path": "content/components/buttons.md",
"chars": 75040,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Buttons - Flowbite\n# description: Use the Tailwind CSS button component inside form"
},
{
"path": "content/components/card.md",
"chars": 62553,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Cards - Flowbite\ndescription: Get started with a large variety of Tailwind CSS card"
},
{
"path": "content/components/carousel.md",
"chars": 38994,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Carousel - Flowbite\ndescription: Use the carousel component to slide through multip"
},
{
"path": "content/components/chat-bubble.md",
"chars": 80486,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Chat Bubble - Flowbite\ndescription: Use the chat bubble component to show chat mess"
},
{
"path": "content/components/clipboard.md",
"chars": 59220,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Copy to Clipboard - Flowbite\ndescription: Use the clipboard component to copy text,"
},
{
"path": "content/components/datepicker.md",
"chars": 33834,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Datepicker - Flowbite\ndescription: Start receiving date and time data from your use"
},
{
"path": "content/components/device-mockups.md",
"chars": 9698,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Device Mockups - Flowbite\ndescription: Use the device mockups component to add cont"
},
{
"path": "content/components/drawer.md",
"chars": 107028,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Drawer (offcanvas) - Flowbite\ndescription: The Drawer component can be used as a hi"
},
{
"path": "content/components/dropdowns.md",
"chars": 126800,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Dropdown - Flowbite\ndescription: Get started with the dropdown component to show a "
},
{
"path": "content/components/footer.md",
"chars": 20365,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Footer - Flowbite\ndescription: Use the footer section at the bottom of every page t"
},
{
"path": "content/components/forms.md",
"chars": 26632,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Forms - Flowbite\ndescription: Use the Tailwind CSS form and input elements such as "
},
{
"path": "content/components/gallery.md",
"chars": 17958,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Gallery (Masonry) - Flowbite\ndescription: Use the image gallery component based on "
},
{
"path": "content/components/indicators.md",
"chars": 16107,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Indicators - Flowbite\ndescription: Use the indicator component to show a number cou"
},
{
"path": "content/components/jumbotron.md",
"chars": 18423,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Jumbotron - Flowbite\ndescription: Use the jumbotron component to show a marketing m"
},
{
"path": "content/components/kbd.md",
"chars": 15939,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS KBD (Keyboard) - Flowbite\ndescription: Use the KBD component as an inline element t"
},
{
"path": "content/components/list-group.md",
"chars": 30012,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS List Group - Flowbite\ndescription: Use the list group component to display a series"
},
{
"path": "content/components/mega-menu.md",
"chars": 40788,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Mega Menu - Flowbite\ndescription: Use the mega menu component as a full-width dropd"
},
{
"path": "content/components/modal.md",
"chars": 101964,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Modal - Flowbite\ndescription: Use the modal component to show interactive dialogs a"
},
{
"path": "content/components/navbar.md",
"chars": 67535,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Navbar - Flowbite\ndescription: The navbar component can be used to show a list of n"
},
{
"path": "content/components/pagination.md",
"chars": 32637,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Pagination - Flowbite\ndescription: Use the Tailwind CSS pagination element to indic"
},
{
"path": "content/components/popover.md",
"chars": 46152,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Popover - Flowbite\ndescription: Use the popover component to show detailed informat"
},
{
"path": "content/components/progress.md",
"chars": 3821,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Progress Bar - Flowbite\ndescription: Use the progress bar component to show the com"
},
{
"path": "content/components/qr-code.md",
"chars": 24710,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS QR Code Generator - Flowbite\ndescription: Use this component to generate and show Q"
},
{
"path": "content/components/rating.md",
"chars": 34905,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Rating - Flowbite\ndescription: Use the rating component to show reviews and testimo"
},
{
"path": "content/components/sidebar.md",
"chars": 93619,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Sidebar - Flowbite\ndescription: Use the sidebar component to show a list of menu it"
},
{
"path": "content/components/skeleton.md",
"chars": 12506,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Skeleton - Flowbite\ndescription: The skeleton component can be used as an alternati"
},
{
"path": "content/components/speed-dial.md",
"chars": 110988,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Speed Dial - Flowbite\ndescription: The speed dial component can be used as a quick "
},
{
"path": "content/components/spinner.md",
"chars": 27734,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Spinner - Flowbite\ndescription: Use the spinner component as a loader indicator in "
},
{
"path": "content/components/stepper.md",
"chars": 19317,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Stepper - Flowbite\ndescription: Use the stepper component to show the number of ste"
},
{
"path": "content/components/tables.md",
"chars": 149133,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Table - Flowbite\ndescription: Use the table component to show text, images, links, "
},
{
"path": "content/components/tabs.md",
"chars": 43972,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Tabs - Flowbite\ndescription: Use these responsive tabs components to create a secon"
},
{
"path": "content/components/timeline.md",
"chars": 28352,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Timeline - Flowbite\ndescription: Get started with the responsive timeline component"
},
{
"path": "content/components/toast.md",
"chars": 28049,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Toast - Flowbite\ndescription: Push notifications to your users using the toast comp"
},
{
"path": "content/components/tooltips.md",
"chars": 23504,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Tooltip - Flowbite\ndescription: Use the following Tailwind CSS powered tooltips to "
},
{
"path": "content/components/typography.md",
"chars": 14459,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Typography - Flowbite\ndescription: Use the typography plugin from Flowbite to apply"
},
{
"path": "content/components/video.md",
"chars": 3260,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Video - Flowbite\ndescription: Use the video component to configure an embedded vide"
},
{
"path": "content/customize/_index.html",
"chars": 89,
"preview": "---\nlayout: redirect\nsitemap_exclude: true\nredirect: \"/docs/customize/configuration/\"\n---"
},
{
"path": "content/customize/colors.md",
"chars": 39416,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Colors - Flowbite\ndescription: Customize the default colors of Flowbite using the d"
},
{
"path": "content/customize/configuration.md",
"chars": 6378,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Configuration - Flowbite\ndescription: Learn how to customize the default Flowbite a"
},
{
"path": "content/customize/dark-mode.md",
"chars": 6748,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Dark Mode - Flowbite\ndescription: Learn how to configure and build a dark mode swit"
},
{
"path": "content/customize/icons.md",
"chars": 36176,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Icons - Flowbite\ndescription: Use a free and open-source set of SVG icons built for"
},
{
"path": "content/customize/optimization.md",
"chars": 1537,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Optimization - Flowbite\ndescription: Optimize your project for production use by se"
},
{
"path": "content/customize/rtl.md",
"chars": 5472,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS RTL (Right-To-Left) - Flowbite\ndescription: Learn how to setup and configure bidire"
},
{
"path": "content/customize/theming.md",
"chars": 7098,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Theming - Flowbite\ndescription: Use the theming options from Tailwind CSS to set na"
},
{
"path": "content/customize/variables.md",
"chars": 8331,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Variables - Flowbite\ndescription: Learn how to use the custom variables from Tailwi"
},
{
"path": "content/forms/checkbox.md",
"chars": 29175,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Checkbox - Flowbite\ndescription: Get started with the checkbox component to allow t"
},
{
"path": "content/forms/file-input.md",
"chars": 6385,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS File Input - Flowbite\ndescription: Get started with the file input component to let"
},
{
"path": "content/forms/floating-label.md",
"chars": 20734,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Floating Label - Flowbite\ndescription: Use the floating label style for the input f"
},
{
"path": "content/forms/input-field.md",
"chars": 18316,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Input Field - Flowbite\ndescription: Get started with a collection of input fields b"
},
{
"path": "content/forms/number-input.md",
"chars": 108514,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Number Input - Flowbite\ndescription: Use the number input component to set a numeri"
},
{
"path": "content/forms/phone-input.md",
"chars": 74763,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Phone Input - Flowbite\ndescription: Use the phone number input component from Flowb"
},
{
"path": "content/forms/radio.md",
"chars": 25399,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Radio - Flowbite\ndescription: Get started with the radio component to let the user "
},
{
"path": "content/forms/range.md",
"chars": 4259,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Range Slider - Flowbite\ndescription: Get started with the range component to receiv"
},
{
"path": "content/forms/search-input.md",
"chars": 28123,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Search Input - Flowbite\ndescription: Use the search input component as a text field"
},
{
"path": "content/forms/select.md",
"chars": 22802,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Select - Flowbite\ndescription: Get started with the select component to allow the u"
},
{
"path": "content/forms/textarea.md",
"chars": 16482,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Textarea - Flowbite\ndescription: Use the textarea component as a multi-line text fi"
},
{
"path": "content/forms/timepicker.md",
"chars": 58120,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Timepicker - Flowbite\ndescription: Use the timepicker component from Flowbite to se"
},
{
"path": "content/forms/toggle.md",
"chars": 20065,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Toggle - Flowbite\ndescription: Use the toggle component to switch between a binary "
},
{
"path": "content/getting-started/_index.html",
"chars": 94,
"preview": "---\nlayout: redirect\nsitemap_exclude: true\nredirect: \"/docs/getting-started/introduction/\"\n---"
},
{
"path": "content/getting-started/angular.md",
"chars": 21747,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Angular - Flowbite\ndescription: Read this guide to learn how to install Tailwind CS"
},
{
"path": "content/getting-started/astro.md",
"chars": 11089,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Astro - Flowbite\ndescription: Learn how to install Astro with Tailwind CSS and Flow"
},
{
"path": "content/getting-started/blazor.md",
"chars": 14916,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Blazor (.NET) - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbi"
},
{
"path": "content/getting-started/build-tools.md",
"chars": 92,
"preview": "---\nlayout: redirect\nsitemap_exclude: true\nredirect: \"/docs/getting-started/quickstart/\"\n---"
},
{
"path": "content/getting-started/changelog.md",
"chars": 13474,
"preview": "---\nlayout: docs\ntitle: Flowbite - Changelog\ndescription: Read more about the releases made for Flowbite from the offici"
},
{
"path": "content/getting-started/django.md",
"chars": 15382,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Django - Flowbite\ndescription: Learn how to install Tailwind CSS and Flowbite insid"
},
{
"path": "content/getting-started/flask.md",
"chars": 12947,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Flask - Flowbite\ndescription: Learn how to install Tailwind CSS and Flowbite inside"
},
{
"path": "content/getting-started/gatsby.md",
"chars": 6167,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Gatsby - Flowbite\ndescription: Learn how to install Gatsby with Tailwind CSS and Fl"
},
{
"path": "content/getting-started/hugo.md",
"chars": 9283,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS HUGO - Flowbite\ndescription: Learn how to install HUGO together with Tailwind CSS a"
},
{
"path": "content/getting-started/introduction.md",
"chars": 19571,
"preview": "---\nlayout: docs\ntitle: Flowbite - Tailwind CSS component library\ndescription: Get started with the most popular open-so"
},
{
"path": "content/getting-started/javascript.md",
"chars": 18544,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS JavaScript - Flowbite\ndescription: Learn how to set up a Tailwind CSS project with "
},
{
"path": "content/getting-started/laravel.md",
"chars": 5110,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Laravel - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbite in "
},
{
"path": "content/getting-started/license.md",
"chars": 2189,
"preview": "---\nlayout: docs\ntitle: Flowbite - License\ndescription: Learn more about the licensing terms for Flowbite and Tailwind C"
},
{
"path": "content/getting-started/llm.md",
"chars": 3050,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS AI and LLM - Flowbite\ndescription: Learn how to integrate Flowbite and Tailwind CSS"
},
{
"path": "content/getting-started/mcp-ui.md",
"chars": 11166,
"preview": "---\nlayout: docs\ntitle: MCP UI - Build MCP apps with Flowbite\ndescription: Learn how create and install an MCP applicati"
},
{
"path": "content/getting-started/mcp.md",
"chars": 6888,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS MCP Server - Flowbite\ndescription: Get started with the official MCP server for Flo"
},
{
"path": "content/getting-started/meteor-js.md",
"chars": 6646,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Meteor.js - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbite f"
},
{
"path": "content/getting-started/next-js.md",
"chars": 5906,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Next.js - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbite for"
},
{
"path": "content/getting-started/nuxt-js.md",
"chars": 15471,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Nuxt - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbite for yo"
},
{
"path": "content/getting-started/phoenix.md",
"chars": 57667,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Phoenix (Elixir) - Flowbite\ndescription: Learn how to install Flowbite with Phoenix"
},
{
"path": "content/getting-started/quickstart.md",
"chars": 13488,
"preview": "---\nlayout: docs\ntitle: Flowbite - Quickstart\ndescription: Get started with Flowbite by including it into your project u"
},
{
"path": "content/getting-started/qwik.md",
"chars": 33451,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Qwik - Flowbite\ndescription: Learn how to create a Qwik project and install Tailwin"
},
{
"path": "content/getting-started/rails.md",
"chars": 8651,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Ruby on Rails - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbi"
},
{
"path": "content/getting-started/react.md",
"chars": 4293,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS React - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbite for y"
},
{
"path": "content/getting-started/remix.md",
"chars": 5955,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Remix - Flowbite\ndescription: Learn how to install Remix with Tailwind CSS and the "
},
{
"path": "content/getting-started/solid-js.md",
"chars": 16352,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS SolidJS - Flowbite\ndescription: Learn how to install SolidJS with Tailwind CSS and "
},
{
"path": "content/getting-started/svelte.md",
"chars": 9678,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Svelte - Flowbite\ndescription: Learn how to install Tailwind CSS with Flowbite for "
},
{
"path": "content/getting-started/symfony.md",
"chars": 39293,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Symfony (PHP) - Flowbite\ndescription: Learn how to install Flowbite with Symfony an"
},
{
"path": "content/getting-started/typescript.md",
"chars": 17398,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS TypeScript - Flowbite\ndescription: Learn how to install Tailwind CSS and Flowbite w"
},
{
"path": "content/getting-started/vue.md",
"chars": 15673,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Vue - Flowbite\ndescription: Learn how to install and set up Tailwind CSS with Flowb"
},
{
"path": "content/plugins/charts.md",
"chars": 117693,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Charts - Flowbite\ndescription: Use the chart and graph components from Flowbite bui"
},
{
"path": "content/plugins/datatables.md",
"chars": 77776,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Datatables - Flowbite\ndescription: Use the datatable component to search, sort, fil"
},
{
"path": "content/plugins/datepicker.md",
"chars": 87,
"preview": "---\nlayout: redirect\nsitemap_exclude: true\nredirect: \"/docs/components/datepicker/\"\n---"
},
{
"path": "content/plugins/wysiwyg.md",
"chars": 183201,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS WYSIWYG Text Editor - Flowbite\ndescription: Use the wysiwyg text editor component f"
},
{
"path": "content/typography/blockquote.md",
"chars": 12599,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Blockquote - Flowbite\ndescription: The blockquote component can be used to quote te"
},
{
"path": "content/typography/headings.md",
"chars": 9658,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Headings - Flowbite\ndescription: The heading component defines six levels of title "
},
{
"path": "content/typography/hr.md",
"chars": 5215,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Horizontal Line (HR) - Flowbite\ndescription: Create a horizontal line using the HR "
},
{
"path": "content/typography/images.md",
"chars": 6785,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Images - Flowbite\ndescription: The image component can be used to embed images insi"
},
{
"path": "content/typography/links.md",
"chars": 8768,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Links - Flowbite\ndescription: The link component can be used to set hyperlinks from"
},
{
"path": "content/typography/lists.md",
"chars": 18527,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Lists - Flowbite\ndescription: Use the list component to show an unordered or ordere"
},
{
"path": "content/typography/paragraphs.md",
"chars": 14848,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Paragraphs - Flowbite\ndescription: Use the paragraph component to create multiple b"
},
{
"path": "content/typography/text-decoration.md",
"chars": 362,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Text Decoration - Flowbite\ndescription: Use the typography plugin from Flowbite to "
},
{
"path": "content/typography/text.md",
"chars": 11863,
"preview": "---\nlayout: docs\ntitle: Tailwind CSS Text - Flowbite\ndescription: Learn how to customize text-related styles and propert"
},
{
"path": "data/colors.yml",
"chars": 154,
"preview": "- name: blue\n context: info\n- name: red\n context: danger\n- name: yellow\n context: warning\n- name: green\n context: su"
},
{
"path": "data/sidebar.yml",
"chars": 2990,
"preview": "- title: Getting started\n slug: getting-started\n pages:\n - title: Introduction\n - title: Quickstart\n - title:"
},
{
"path": "layouts/404.html",
"chars": 125,
"preview": "{{ define \"body_override\" }}<body>{{ end }}\n{{ define \"main\" }}\n <main id=\"content\">\n {{ .Content }}\n </main>\n{{ en"
},
{
"path": "layouts/_markup/render-heading.html",
"chars": 741,
"preview": "<!-- <h{{ .Level }} id=\"{{ .Anchor | safeURL }}\">{{ .Text | safeHTML }}\n{{- if and (ge .Level .Page.Site.Params.anchors."
},
{
"path": "layouts/_partials/analytics.html",
"chars": 158,
"preview": "<!-- Fathom - beautiful, simple website analytics -->\n<script src=\"https://cdn.usefathom.com/script.js\" data-site=\"UGPDO"
},
{
"path": "layouts/_partials/favicons.html",
"chars": 1270,
"preview": "<link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"/docs/apple-icon-57x57.png\">\n<link rel=\"apple-touch-icon\" sizes=\"60x60\""
},
{
"path": "layouts/_partials/footer.html",
"chars": 14852,
"preview": "<aside class=\"fixed z-50 hidden right-5 bottom-5 sm:block\">\n <script async type=\"text/javascript\" src=\"//cdn.carbonad"
},
{
"path": "layouts/_partials/header.html",
"chars": 1190,
"preview": "<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<meta name=\"description\" con"
},
{
"path": "layouts/_partials/navbar.html",
"chars": 15093,
"preview": "<header class=\"fixed top-0 z-40 flex-none w-full mx-auto bg-neutral-primary border-b border-light-subtle\">\n <div\n "
},
{
"path": "layouts/_partials/redirect.html",
"chars": 329,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-wid"
},
{
"path": "layouts/_partials/scripts.html",
"chars": 127,
"preview": "<script src=\"{{ .Site.BaseURL }}flowbite.min.js?v=4.0.1a\"></script>\n<script src=\"{{ .Site.BaseURL }}docs.js?v=4.0.1a\"></"
},
{
"path": "layouts/_partials/sidebar.html",
"chars": 2548,
"preview": "<div id=\"navWrapper\" class=\"overflow-y-auto z-20 xl:z-10 px-2 md:px-6 mt-16 md:mt-12 h-full bg-neutral-primary sm:bg-tra"
},
{
"path": "layouts/_partials/social.html",
"chars": 1121,
"preview": "{{ \"<!-- Twitter -->\" | safeHTML }}\n<meta name=\"twitter:card\" content=\"{{ if .IsHome }}summary_large_image{{ else }}summ"
},
{
"path": "layouts/_partials/stylesheet.html",
"chars": 290,
"preview": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" cros"
},
{
"path": "layouts/_shortcodes/code.html",
"chars": 3489,
"preview": "{{- $id := .Get \"id\" | default (printf \"code-%d\" (now.UnixNano)) -}}\n{{- $lang := .Get \"lang\" | default \"bash\" -}}\n{{- $"
},
{
"path": "layouts/_shortcodes/current_version.html",
"chars": 35,
"preview": "{{ $.Site.Params.current_version }}"
},
{
"path": "layouts/_shortcodes/example.html",
"chars": 22253,
"preview": "{{- /*\n Usage: `example [args]`\n\n `args` are optional and can be one of the following:\n id: the `div`'s id - defaul"
},
{
"path": "layouts/_shortcodes/markdown.html",
"chars": 29,
"preview": "{{- .Inner | markdownify -}}\n"
},
{
"path": "layouts/_shortcodes/param.html",
"chars": 390,
"preview": "{{- /*\n Work around wrong escapes in integrity attributes.\n*/ -}}\n\n{{- $name := .Get 0 -}}\n{{- with $name -}}\n{{- $valu"
},
{
"path": "layouts/_shortcodes/partial.html",
"chars": 25,
"preview": "{{ partial (.Get 0) . }}\n"
},
{
"path": "layouts/_shortcodes/placeholder.html",
"chars": 1588,
"preview": "{{- /*\n Usage: `placeholder args`\n\n args can be one of the following:\n title: Used in the SVG `title` tag, default "
},
{
"path": "layouts/_shortcodes/preview.html",
"chars": 192,
"preview": "<div class=\"rounded-t-xl overflow-hidden bg-gradient-to-r border border-gray-200 dark:border-gray-700 p-6 mt-8 {{ with ."
},
{
"path": "layouts/_shortcodes/requires_angular.html",
"chars": 1373,
"preview": "<a href=\"{{ \"getting-started/angular/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 t"
},
{
"path": "layouts/_shortcodes/requires_blazor.html",
"chars": 2171,
"preview": "<a href=\"{{ \"getting-started/blazor/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 te"
},
{
"path": "layouts/_shortcodes/requires_django.html",
"chars": 1371,
"preview": "<a href=\"{{ \"getting-started/django/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 te"
},
{
"path": "layouts/_shortcodes/requires_flask.html",
"chars": 9861,
"preview": "\n\n<a href=\"{{ \"getting-started/flask/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 t"
},
{
"path": "layouts/_shortcodes/requires_hugo.html",
"chars": 1324,
"preview": "<a href=\"{{ \"getting-started/hugo/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 text"
},
{
"path": "layouts/_shortcodes/requires_js.html",
"chars": 985,
"preview": "<a href=\"{{ \"getting-started/quickstart/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 "
},
{
"path": "layouts/_shortcodes/requires_laravel.html",
"chars": 2344,
"preview": "<a href=\"{{ \"getting-started/laravel/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 t"
},
{
"path": "layouts/_shortcodes/requires_nextjs.html",
"chars": 4000,
"preview": "<a href=\"{{ \"getting-started/next-js/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 t"
},
{
"path": "layouts/_shortcodes/requires_nuxtjs.html",
"chars": 1667,
"preview": "<a href=\"{{ \"getting-started/nuxt-js/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 t"
},
{
"path": "layouts/_shortcodes/requires_react.html",
"chars": 3517,
"preview": "<a href=\"{{ \"getting-started/react/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 tex"
},
{
"path": "layouts/_shortcodes/requires_ruby.html",
"chars": 3482,
"preview": "<a href=\"{{ \"getting-started/rails/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 tex"
},
{
"path": "layouts/_shortcodes/requires_svelte.html",
"chars": 2341,
"preview": "<a href=\"{{ \"getting-started/svelte/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 text"
},
{
"path": "layouts/_shortcodes/requires_symfony.html",
"chars": 5448,
"preview": "<a href=\"{{ \"getting-started/symfony/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 t"
},
{
"path": "layouts/_shortcodes/requires_tw3.html",
"chars": 1392,
"preview": "<aside class=\"inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-body bg-neutral-primary-soft border b"
},
{
"path": "layouts/_shortcodes/requires_tw4.html",
"chars": 1383,
"preview": "<aside class=\"inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-body bg-neutral-primary-soft border b"
},
{
"path": "layouts/_shortcodes/requires_typescript",
"chars": 2235,
"preview": "<a href=\"{{ \"getting-started/typescript/\" | relURL }}\">\n<aside class=\"mb-5\" aria-label=\"Integration requires TypeScript\""
},
{
"path": "layouts/_shortcodes/requires_vue.html",
"chars": 807,
"preview": "<a href=\"{{ \"getting-started/vue/\" | relURL }}\"\n class=\"inline-flex items-center justify-between px-1 py-1 pr-4 text-"
},
{
"path": "layouts/alias.html",
"chars": 36,
"preview": "{{ partial \"redirect\" .Permalink }}\n"
},
{
"path": "layouts/baseof.html",
"chars": 436,
"preview": "<!doctype html>\n<html lang=\"en\" data-theme=\"modern\" class=\"group/root\">\n\n<head>\n {{ partial \"header\" . }}\n</head>\n{{ bl"
},
{
"path": "layouts/dashboard.html",
"chars": 446,
"preview": "<!doctype html>\n<html lang=\"en\">\n <head>\n {{ partial \"header\" . }}\n </head>\n {{ block \"body_override\" . }}<body>{{"
},
{
"path": "layouts/docs.html",
"chars": 79777,
"preview": "{{ define \"main\" }}\n\n{{ partial \"navbar\" }}\n\n<div class=\"w-full px-4 lg:px-0 mx-auto max-w-8xl border-s border-e border-"
},
{
"path": "layouts/home.html",
"chars": 80077,
"preview": "{{ define \"main\" }}\n\n{{ partial \"navbar\" }}\n\n<div class=\"w-full px-4 lg:px-0 mx-auto max-w-8xl border-s border-e border-"
},
{
"path": "layouts/redirect.html",
"chars": 58,
"preview": "{{ partial \"redirect\" (.Page.Params.redirect | absURL) }}\n"
},
{
"path": "layouts/robots.txt",
"chars": 114,
"preview": "# www.robotstxt.org\n# Allow crawling of all content\nUser-agent: *\nDisallow:\nSitemap: {{ \"/sitemap.xml\" | absURL }}"
},
{
"path": "layouts/sitemap.xml",
"chars": 626,
"preview": "{{ printf \"<?xml version=\\\"1.0\\\" encoding=\\\"utf-8\\\" standalone=\\\"yes\\\" ?>\" | safeHTML }}\n<urlset xmlns=\"http://www.sitem"
},
{
"path": "llms-full.txt",
"chars": 2875555,
"preview": "# Flowbite Documentation\n\n> Flowbite is a free and open-source UI component library based on Tailwind CSS and it provide"
},
{
"path": "llms.txt",
"chars": 6649,
"preview": "# Flowbite Documentation\n\n> Flowbite is a free and open-source UI component library based on Tailwind CSS and it provide"
},
{
"path": "package.json",
"chars": 5511,
"preview": "{\n \"name\": \"flowbite\",\n \"version\": \"4.0.1\",\n \"mcpName\": \"io.github.themesberg/flowbite-mcp\",\n \"description\": \"The mo"
},
{
"path": "plugin-windicss.js",
"chars": 25164,
"preview": "/* eslint-disable @typescript-eslint/no-var-requires */\nconst svgToDataUri = require('mini-svg-data-uri');\nconst plugin "
},
{
"path": "plugin.d.ts",
"chars": 64,
"preview": "declare const plugin: { handler: () => void };\nexport = plugin;\n"
},
{
"path": "plugin.js",
"chars": 48208,
"preview": "/* eslint-disable @typescript-eslint/no-var-requires */\nconst svgToDataUri = require('mini-svg-data-uri');\nconst plugin "
},
{
"path": "postcss.config.js",
"chars": 269,
"preview": "/* eslint-disable @typescript-eslint/no-var-requires */\nmodule.exports = {\n plugins: {\n '@tailwindcss/postcss'"
},
{
"path": "safelist.txt",
"chars": 1319,
"preview": "datatable-wrapper\ndatatable-top\ndatatable-search\ndatatable-input\ndatatable-container\ndatatable-table\ndatatable-empty\ndat"
},
{
"path": "src/components/accordion/index.ts",
"chars": 7482,
"preview": "/* eslint-disable @typescript-eslint/no-empty-function */\nimport type { AccordionItem, AccordionOptions } from './types'"
},
{
"path": "src/components/accordion/interface.ts",
"chars": 491,
"preview": "// Import the AccordionItem and AccordionOptions interfaces\nimport { AccordionItem, AccordionOptions } from './types';\n\n"
},
{
"path": "src/components/accordion/types.ts",
"chars": 630,
"preview": "import { AccordionInterface } from './interface';\n\nexport declare type AccordionItem = {\n id: string;\n triggerEl: "
},
{
"path": "src/components/carousel/index.ts",
"chars": 11379,
"preview": "/* eslint-disable @typescript-eslint/no-empty-function */\nimport type {\n CarouselOptions,\n CarouselItem,\n Indic"
},
{
"path": "src/components/carousel/interface.ts",
"chars": 736,
"preview": "import {\n CarouselOptions,\n CarouselItem,\n IndicatorItem,\n RotationItems,\n} from './types';\n\nexport declare "
},
{
"path": "src/components/carousel/types.ts",
"chars": 715,
"preview": "import { CarouselInterface } from './interface';\n\nexport declare type CarouselItem = {\n position: number;\n el: HTM"
},
{
"path": "src/components/clipboard/index.ts",
"chars": 5975,
"preview": "/* eslint-disable @typescript-eslint/no-empty-function */\nimport type { CopyClipboardOptions } from './types';\nimport ty"
},
{
"path": "src/components/clipboard/interface.ts",
"chars": 354,
"preview": "import { CopyClipboardOptions } from './types';\n\nexport declare interface CopyClipboardInterface {\n _triggerEl: HTMLE"
},
{
"path": "src/components/clipboard/types.ts",
"chars": 214,
"preview": "import { CopyClipboardInterface } from './interface';\n\nexport declare type CopyClipboardOptions = {\n htmlEntities: bo"
},
{
"path": "src/components/collapse/index.ts",
"chars": 5249,
"preview": "/* eslint-disable @typescript-eslint/no-empty-function */\nimport type { CollapseOptions } from './types';\nimport type { "
},
{
"path": "src/components/collapse/interface.ts",
"chars": 385,
"preview": "import { CollapseOptions } from './types';\n\nexport declare interface CollapseInterface {\n _targetEl: HTMLElement | nu"
},
{
"path": "src/components/collapse/types.ts",
"chars": 257,
"preview": "import { CollapseInterface } from './interface';\n\nexport declare type CollapseOptions = {\n onCollapse?: (collapse: Co"
},
{
"path": "src/components/datepicker/index.ts",
"chars": 7897,
"preview": "/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/no-empty-function */\nimport"
},
{
"path": "src/components/datepicker/interface.ts",
"chars": 360,
"preview": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatepickerOptions } from './types';\n\nexport declare int"
},
{
"path": "src/components/datepicker/types.ts",
"chars": 605,
"preview": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { DatepickerInterface } from './interface';\n\nexport inter"
},
{
"path": "src/components/dial/index.ts",
"chars": 6603,
"preview": "/* eslint-disable @typescript-eslint/no-empty-function */\nimport type { DialOptions, DialTriggerType } from './types';\ni"
},
{
"path": "src/components/dial/interface.ts",
"chars": 552,
"preview": "import { DialOptions, DialTriggerEventTypes, DialTriggerType } from './types';\n\nexport declare interface DialInterface {"
},
{
"path": "src/components/dial/types.ts",
"chars": 423,
"preview": "import { DialInterface } from './interface';\n\nexport declare type DialTriggerType = 'click' | 'hover' | 'none';\n\nexport "
},
{
"path": "src/components/dismiss/index.ts",
"chars": 3292,
"preview": "/* eslint-disable @typescript-eslint/no-empty-function */\nimport type { DismissOptions } from './types';\nimport type { I"
},
{
"path": "src/components/dismiss/interface.ts",
"chars": 315,
"preview": "import { DismissOptions } from './types';\n\nexport declare interface DismissInterface {\n _targetEl: HTMLElement | null"
}
]
// ... and 54 more files (download for full content)
About this extraction
This page contains the full source code of the themesberg/flowbite GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 254 files (6.6 MB), approximately 1.7M tokens, and a symbol index with 295 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.