├── .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 │ ├── 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 ├── 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 │ ├── 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 ├── _default │ ├── 404.html │ ├── _markup │ │ └── render-heading.html │ ├── baseof.html │ ├── dashboard.html │ ├── home.html │ └── redirect.html ├── alias.html ├── partials │ ├── analytics.html │ ├── favicons.html │ ├── footer.html │ ├── header.html │ ├── navbar.html │ ├── redirect.html │ ├── scripts.html │ ├── sidebar.html │ ├── social.html │ └── stylesheet.html ├── robots.txt ├── shortcodes │ ├── 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 └── sitemap.xml ├── llms-full.txt ├── llms.txt ├── package-lock.json ├── 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.js ├── dom │ ├── events.ts │ ├── instances.ts │ └── types.ts ├── flowbite.css ├── index.phoenix.ts ├── index.ts ├── index.turbo.ts ├── index.umd.ts ├── main.css ├── themes │ └── default.css └── types │ └── declarations.ts ├── static ├── android-chrome-192x192.png ├── android-chrome-512x512.png ├── android-icon-144x144.png ├── android-icon-192x192.png ├── android-icon-36x36.png ├── android-icon-48x48.png ├── android-icon-72x72.png ├── android-icon-96x96.png ├── apple-icon-114x114.png ├── apple-icon-120x120.png ├── apple-icon-144x144.png ├── apple-icon-152x152.png ├── apple-icon-180x180.png ├── apple-icon-57x57.png ├── apple-icon-60x60.png ├── apple-icon-72x72.png ├── apple-icon-76x76.png ├── apple-icon-precomposed.png ├── apple-icon.png ├── apple-touch-icon.png ├── browserconfig.xml ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon-96x96.png ├── favicon.ico ├── images │ ├── blog │ │ ├── image-1.jpg │ │ ├── image-2.jpg │ │ ├── image-3.jpg │ │ ├── image-4.jpg │ │ └── image-7.jpg │ ├── book-dark.svg │ ├── book-light.svg │ ├── carousel │ │ ├── carousel-1.svg │ │ ├── carousel-2.svg │ │ ├── carousel-3.svg │ │ ├── carousel-4.svg │ │ └── carousel-5.svg │ ├── chatbubble │ │ └── calendar.png │ ├── dashboard-overview.png │ ├── examples │ │ ├── image-1.jpg │ │ ├── image-1@2x.jpg │ │ ├── image-2.jpg │ │ ├── image-2@2x.jpg │ │ ├── image-3.jpg │ │ ├── image-3@2x.jpg │ │ ├── image-4.jpg │ │ ├── image-4@2x.jpg │ │ └── image-5.jpg │ ├── gradients │ │ ├── mesh-gradient-1.png │ │ ├── mesh-gradient-2.png │ │ ├── mesh-gradient-3.png │ │ ├── mesh-gradient-4.png │ │ └── mesh-gradient-5.png │ ├── logo.svg │ ├── misc │ │ └── flowbite-yt-screenshot.png │ ├── og-image.png │ ├── people │ │ ├── profile-picture-1.jpg │ │ ├── profile-picture-2.jpg │ │ ├── profile-picture-3.jpg │ │ ├── profile-picture-4.jpg │ │ └── profile-picture-5.jpg │ ├── popovers │ │ └── italy.png │ ├── products │ │ ├── apple-watch.png │ │ ├── imac.png │ │ └── iphone-12.png │ └── themesberg.svg ├── manifest.json ├── ms-icon-144x144.png ├── ms-icon-150x150.png ├── ms-icon-310x310.png ├── ms-icon-70x70.png ├── mstile-150x150.png ├── safari-pinned-tab.svg ├── site.webmanifest ├── sw.js └── videos │ └── flowbite.mp4 ├── syntax.css ├── tailwind.config.js ├── tsconfig.json └── webpack.config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | *.md 2 | .gitignore 3 | build/ 4 | dist/ 5 | lib/ -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: '@typescript-eslint/parser', 4 | plugins: ['@typescript-eslint'], 5 | env: { 6 | node: true, 7 | browser: true, 8 | es6: true, 9 | }, 10 | extends: [ 11 | 'eslint:recommended', 12 | 'plugin:@typescript-eslint/eslint-recommended', 13 | 'plugin:@typescript-eslint/recommended', 14 | 'plugin:prettier/recommended', 15 | ], 16 | }; 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | lib/ 4 | build/ 5 | _gh_pages/ 6 | static/*.css 7 | static/*.js 8 | !static/sw.js 9 | static/*.map 10 | .DS_Store 11 | yarn-error.log 12 | /.idea 13 | .hugo_build.lock 14 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | _gh_pages/ 2 | assets/ 3 | build/ 4 | content/ 5 | data/ 6 | layouts/ 7 | node_modules/ 8 | resources/ 9 | static/ 10 | src/docs.js 11 | src/main.css 12 | config.yml 13 | yarn-error.log 14 | syntax.css 15 | BUILD-TOOLS.md -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "eslintIntegration": true, 4 | "tabWidth": 4, 5 | "plugins": [ 6 | "prettier-plugin-tailwindcss" 7 | ] 8 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.codeActionsOnSave": { 3 | "source.fixAll.eslint": "explicit" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /BUILD-TOOLS.md: -------------------------------------------------------------------------------- 1 | ## FlowBite Documentation 2 | 3 | These are the source files for the Flowbite Tailwind CSS components library. 4 | 5 | ### Getting started 6 | 7 | 1. Make sure you have Node and NPM installed 8 | 2. Run `yarn install` 9 | 3. Run `yarn start` to start developing 10 | 11 | ## Building the docs website 12 | 13 | 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). 14 | 15 | 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. 16 | 17 | ## Building for NPM registry 18 | 19 | Make sure that purge is NOT enabled in `tailwind.config.js` (this needs to be fixed with env variables). 20 | 21 | Run `npm run build:npm` and then `npm publish` to release a new version. Make sure you also change the version. -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing guide 2 | 3 | ## What do I need to know to help? 4 | 5 | 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! 6 | 7 | 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. 8 | 9 | - [Learn JavaScript - Full Course for Beginners](https://www.youtube.com/watch?v=PkZNo7MFNFg) 10 | - [Tailwind CSS](https://tailwindcss.com/) 11 | 12 | ## How do I make a contribution? 13 | 14 | Never made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown! 15 | 16 | 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. 17 | 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`. 18 | 3. Clone the repository to your local machine using `git clone https://github.com/github-username/repository-name.git`. 19 | 4. Create a new branch for your fix using `git checkout -b branch-name-here`. 20 | 5. Make the appropriate changes for the issue you are trying to address or the feature that you want to add. 21 | 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. 22 | 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. 23 | 8. Push the changes to the remote repository using `git push origin branch-name-here`. 24 | 9. Submit a pull request to the upstream repository. 25 | 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"`. 26 | 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! 27 | 12. Wait for the pull request to be reviewed by a maintainer. 28 | 13. Make changes to the pull request if the reviewing maintainer recommends them. 29 | 14. Celebrate your success after your pull request is merged! 🎉 🎉 30 | 31 | ## Where can I go for help? 32 | 33 | If you need help, you can ask questions please, [join us at our Discord Community](https://discord.gg/S6J9pUmj2t). 34 | 35 | ## What does the Code of Conduct mean for me? 36 | 37 | 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. 38 | 39 | ## Code of conduct 40 | 41 | For more information [check this file](CODE_OF_CONDUCT.md). 42 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Bergside Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /config.yml: -------------------------------------------------------------------------------- 1 | languageCode: "en" 2 | title: "Flowbite" 3 | baseURL: "https://flowbite.com/docs/" 4 | enableInlineShortcodes: true 5 | 6 | params: 7 | homepage: "https://flowbite.com" 8 | current_version: 3.1.2 9 | authors: Themesberg 10 | social_image_path: /docs/images/og-image.png 11 | 12 | markup: 13 | goldmark: 14 | renderer: 15 | unsafe: true 16 | highlight: 17 | noClasses: false 18 | style: colorful 19 | tableOfContents: 20 | startLevel: 2 21 | endLevel: 6 22 | 23 | buildDrafts: true 24 | buildFuture: true 25 | 26 | enableRobotsTXT: true 27 | metaDataFormat: "yaml" 28 | disableKinds: ["404", "taxonomy", "taxonomyTerm", "RSS"] 29 | 30 | publishDir: "_gh_pages" 31 | -------------------------------------------------------------------------------- /content/_index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | sitemap_exclude: true 4 | redirect: "/docs/getting-started/introduction/" 5 | --- -------------------------------------------------------------------------------- /content/components/progress.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS Progress Bar - Flowbite 4 | description: Use the progress bar component to show the completion rate of a data indicator or use it as a loader element 5 | group: components 6 | toc: true 7 | 8 | previous: Popover 9 | previousLink: components/popover/ 10 | next: Rating 11 | nextLink: components/rating/ 12 | --- 13 | 14 | The progress bar component can be used as an indicator to show the completion rate of data sets or it can be used as an animated loader component. There are multiple sizes, colors, and styles available. 15 | 16 | ## Default progress bar 17 | 18 | Use the following example of a progress bar element to show a completion rate of 45% by using an inline style and the utility classes from Tailwind CSS. 19 | 20 | {{< example id="default-progress-example" github="components/progress.md" show_dark=true >}} 21 |
22 |
23 |
24 | {{< /example >}} 25 | 26 | ## Sizes 27 | 28 | You can also use different sizes by using various sizing utility classes from Flowbite and Tailwind CSS. 29 | 30 | {{< example id="progress-sizes-example" github="components/progress.md" show_dark=true >}} 31 |
Small
32 |
33 |
34 |
35 |
Default
36 |
37 |
38 |
39 |
Large
40 |
41 |
42 |
43 |
Extra Large
44 |
45 |
46 |
47 | {{< /example >}} 48 | 49 | ## With label inside 50 | 51 | Here is an example of using a progress bar with the label inside the bar. 52 | 53 | {{< example id="progress-label-example" github="components/progress.md" show_dark=true >}} 54 |
55 |
45%
56 |
57 | {{< /example >}} 58 | 59 | ## With label outside 60 | 61 | And this is an example of using a progress bar outside the bar. 62 | 63 | {{< example id="progress-label-outside-example" github="components/progress.md" show_dark=true >}} 64 |
65 | Flowbite 66 | 45% 67 |
68 |
69 |
70 |
71 | {{< /example >}} 72 | 73 | ## Colors 74 | 75 | You can also apply any color using the `bg-{color}` utility classes from Tailwind CSS and Flowbite. 76 | 77 | {{< example id="progress-colors-example" github="components/progress.md" show_dark=true >}} 78 |
Dark
79 |
80 |
81 |
82 |
Blue
83 |
84 |
85 |
86 |
Red
87 |
88 |
89 |
90 |
Green
91 |
92 |
93 |
94 |
Yellow
95 |
96 |
97 |
98 |
Indigo
99 |
100 |
101 |
102 |
Purple
103 |
104 |
105 |
106 | {{< /example >}} 107 | -------------------------------------------------------------------------------- /content/components/video.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS Video - Flowbite 4 | description: Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS 5 | group: components 6 | toc: true 7 | 8 | previous: Typography 9 | previousLink: components/typography/ 10 | next: Input field 11 | nextLink: forms/input-field/ 12 | --- 13 | 14 | Get started with the video component to embed internal video source into a native HTML 5 video player and set custom options such as autoplay or muted to enhance the user experience. 15 | 16 | ## Video player 17 | 18 | Use this example to create a native browser video player and apply the `w-full` utility class from Tailwind CSS to span the full width of the parent container. 19 | 20 | {{< example id="default-video-example" github="typography/video.md" show_dark=true >}} 21 | 25 | {{< /example >}} 26 | 27 | ## Autoplay 28 | 29 | Use the `autoplay` attribute on the video component to automatically start the video when the page has been loaded. 30 | 31 | {{< example id="video-autoplay-example" github="typography/video.md" show_dark=true >}} 32 | 36 | {{< /example >}} 37 | 38 | ## Muted 39 | 40 | Use the `muted` attribute together with the `autoplay` option to start the video while the sound is muted. 41 | 42 | {{< example id="video-muted-example" github="typography/video.md" show_dark=true >}} 43 | 47 | {{< /example >}} 48 | 49 | ## Sizes 50 | 51 | Set the width and height of the video component using the `w-{size}` and `h-{size}` utility classes from Tailwind CSS. 52 | 53 | ### Width 54 | 55 | Use the `w-{size}` class to set the width of the video component. 56 | 57 | {{< example id="video-width-example" github="typography/video.md" show_dark=true >}} 58 | 62 | {{< /example >}} 63 | 64 | ### Height 65 | 66 | Use the `h-{size}` class to set the height of the video player. 67 | 68 | {{< example id="video-height-example" github="typography/video.md" show_dark=true >}} 69 | 73 | {{< /example >}} 74 | 75 | ### Responsive 76 | 77 | Use the following example to make the video responsive across all devices and viewports. 78 | 79 | {{< example id="video-responsive-example" github="typography/video.md" show_dark=true >}} 80 | 84 | {{< /example >}} 85 | 86 | ## Custom styles 87 | 88 | Customize the video player appearance using the utility classes from Tailwind CSS such as `rounded-{size}` or `border` to set rounded-sm corners and border. 89 | 90 | {{< example id="video-customize-example" github="typography/video.md" show_dark=true >}} 91 | 95 | {{< /example >}} -------------------------------------------------------------------------------- /content/customize/_index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | sitemap_exclude: true 4 | redirect: "/docs/customize/configuration/" 5 | --- -------------------------------------------------------------------------------- /content/customize/optimization.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS Optimization - Flowbite 4 | description: Optimize your project for production use by setting up Flowbite and Tailwind CSS using our guide 5 | group: customize 6 | toc: true 7 | 8 | previous: Icons 9 | previousLink: customize/icons/ 10 | next: Accordion 11 | nextLink: components/accordion/ 12 | --- 13 | 14 | The default JavaScript development build of Flowbite and Tailwind CSS is roughly 310kB uncompressed, 136kB when minified via CDN. 15 | 16 | Although working with the CDN can be quick and effective, it is not the most efficient way of working with Tailwind CSS and Flowbite. You should definitely check our [quickstart guide](https://flowbite.com/docs/getting-started/quickstart/) and set up Tailwind CSS in your local environment so that the only the CSS being used in your templates will be added to the final CSS file. 17 | 18 | ## Remove unused CSS 19 | 20 | Since Tailwind v4 you no longer need to set the content paths for your templating files. 21 | 22 | However, you might want to set custom sources for where the engine should look for utility classes. 23 | 24 | ```css 25 | @import "tailwindcss"; 26 | 27 | @source "../node_modules/flowbite"; 28 | ``` 29 | 30 | ## Build for production 31 | 32 | When building your CSS, make sure that you set `NODE_ENV` to `production`. 33 | 34 | The command that you have to run in your terminal for production build would be: 35 | 36 | ```javascript 37 | NODE_ENV=production npx @tailwindcss/cli -i input.css -o output.css 38 | ``` 39 | 40 | This command will create an `output.css` file that you will include in your templating files. -------------------------------------------------------------------------------- /content/customize/rtl.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS RTL (Right-To-Left) - Flowbite 4 | description: Learn how to setup and configure bidirectional text formats (RTL and LTR) in your project using native Tailwind CSS variants and the Flowbite UI components 5 | group: customize 6 | toc: true 7 | 8 | previous: Icons 9 | previousLink: customize/icons/ 10 | next: Optimization 11 | nextLink: customize/optimization/ 12 | --- 13 | 14 | RTL (right-to-left) is a bidirectional text format used for languages that are written from right to left such as Arabic, Hebrew, Persian, Urdu, and Yiddish. A rough estimate would be around over 500 million people that use RTL languages and it's one of the fastest growing populations on the internet. 15 | 16 | All of the UI components from Flowbite support RTL by primarily using the logical properties and values from CSS such as `ms-0` instead of `ml-0` or `pe-5` instead of `pr-5`. This feature requires Tailwind CSS v3.3.0 or higher and Flowbite v2.1.0 or higher. 17 | 18 | In this guide you will learn how to setup and configure bidirectional text formats (RTL and LTR) in your project using Tailwind CSS variants and the Flowbite UI components by changing the `dir` attribute on the `` element. 19 | 20 | ## Setting up RTL 21 | 22 | Before you start, make sure you have installed the latest version of [Tailwind CSS](https://tailwindcss.com/docs/installation) and [Flowbite](https://flowbite.com/docs/getting-started/quickstart/). 23 | 24 | 1. Add the `dir` attribute to the `` element in your `index.html` file: 25 | 26 | ```html 27 | 28 | 29 | 30 | 31 | 32 | ``` 33 | 34 | By default, when switching from LTR to RTL the direction, spacing, and positioning of all the UI components from Flowbite will be mirrored as we used logical properties and RTL variants from Tailwind CSS. 35 | 36 | You can also use our RTL button to switch between LTR and RTL when previewing our UI components: 37 | 38 | {{< example id="default-navbar-example" bodyClass="!p-0" github="components/navbar.md" show_dark=true iframeHeight="300" >}} 39 | 40 | 73 | {{< /example >}} 74 | 75 | ## Using RTL variants 76 | 77 | If you need to add RTL variants to your own custom components, you can use the `rtl:` prefix. 78 | 79 | For example, if you want to add a margin to the left side of an element in LTR mode, you would use `ml-2`. 80 | 81 | In RTL mode, you would use `rtl:ml-2` instead. 82 | 83 | ```html 84 |
85 | 86 |
87 | ``` 88 | 89 | However, we do recommend that you use logical properties for margins, paddings, borders, and rounded-sm corners because the HTML markup will be cleaner and contain less utility-classes, which is always a good thing when it comes to Tailwind CSS. 90 | 91 | ## UI components 92 | 93 | As mentioned before, all of the UI components from Flowbite support RTL by default and all of the examples from the documentation will render correctly whenever you set the `dir` attribute to `rtl` on the `` element. Check out all our UI components and examples from the [official documentation](https://flowbite.com/docs/getting-started/introduction/). -------------------------------------------------------------------------------- /content/forms/file-input.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS File Input - Flowbite 4 | description: Get started with the file input component to let the user to upload one or more files from their device storage based on multiple styles and sizes 5 | group: forms 6 | toc: true 7 | requires_js: true 8 | 9 | previous: Input Field 10 | previousLink: forms/input-field/ 11 | next: Search Input 12 | nextLink: forms/search-input/ 13 | --- 14 | 15 | The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, and variants and built with the utility-first classes from Tailwind CSS including support for dark mode. 16 | 17 | Make sure that you have included Flowbite as a plugin inside your Tailwind CSS project to apply all the necessary styles for the file input component. 18 | 19 | ## File upload example 20 | 21 | Get started with a simple file input component to let users upload one single file. 22 | 23 | {{< example id="default-file-upload-example" github="forms/file-input.md" show_dark=true >}} 24 | 25 | 26 | {{< /example >}} 27 | 28 | ## Helper text 29 | 30 | Add a descriptive helper text to inform users the allowed extensions and sizes of the files. 31 | 32 | {{< example id="file-upload-helper-example" github="forms/file-input.md" show_dark=true >}} 33 | 34 | 35 |

SVG, PNG, JPG or GIF (MAX. 800x400px).

36 | {{< /example >}} 37 | 38 | ## Multiple files 39 | 40 | Apply the `multiple` attribute to the file input component to allow more files to be uploaded. 41 | 42 | {{< example id="file-upload-multiple-example" github="forms/file-input.md" show_dark=true >}} 43 | 44 | 45 | {{< /example >}} 46 | 47 | ## Sizes 48 | 49 | Choose from the small, default, and large file input sizing options. 50 | 51 | {{< example id="file-upload-sizes-example" github="forms/file-input.md" show_dark=true >}} 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | {{< /example >}} 61 | 62 | ## Dropzone 63 | 64 | The dropzone file input component can be used to upload one or more files by clicking anywhere in the area. 65 | 66 | {{< example id="file-upload-dropzone-example" github="forms/file-input.md" show_dark=true >}} 67 |
68 | 78 |
79 | {{< /example >}} -------------------------------------------------------------------------------- /content/forms/range.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS Range Slider - Flowbite 4 | description: Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options 5 | group: forms 6 | toc: true 7 | requires_js: true 8 | 9 | previous: Toggle 10 | previousLink: forms/toggle/ 11 | next: Floating Label 12 | nextLink: forms/floating-label/ 13 | --- 14 | 15 | The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation. 16 | 17 | The examples on this page are all coded with Tailwind CSS and requires you to install Flowbite as a plugin inside your project to obtain all the necessary stylings. 18 | 19 | ## Range slider example 20 | 21 | Get started with this default example with values from 1 to 100 and the default value of 50. 22 | 23 | {{< example id="default-range-example" github="forms/range.md" show_dark=true >}} 24 | 25 | 26 | {{< /example >}} 27 | 28 | ## Disabled state 29 | 30 | Apply the `disabled` class to disallow the users from further selecting values. 31 | 32 | {{< example id="range-disabled-example" github="forms/range.md" show_dark=true >}} 33 | 34 | 35 | {{< /example >}} 36 | 37 | ## Min and max 38 | 39 | Use the min and max attributes on the range component to set the limits of the range values. 40 | 41 | {{< example id="range-minmax-example" github="forms/range.md" show_dark=true >}} 42 | 43 | 44 | {{< /example >}} 45 | 46 | ## Steps 47 | 48 | Use the step attribute on the range component to set the increment with which the values will change. 49 | 50 | {{< example id="range-steps-example" github="forms/range.md" show_dark=true >}} 51 | 52 | 53 | {{< /example >}} 54 | 55 | ## Sizes 56 | 57 | Apply the small, default, and large sizes for the range component by applying the `range-sm` and `range-lg` utility classes from Flowbite and Tailwind CSS. 58 | 59 | {{< example id="range-sizes-example" github="forms/range.md" show_dark=true >}} 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | {{< /example >}} 69 | 70 | ## Labels 71 | 72 | Use the following example to add labels to each value milestone of the range slider component. 73 | 74 | {{< example id="range-labels-example" github="forms/range.md" show_dark=true >}} 75 |
76 | 77 | 78 | Min ($100) 79 | $500 80 | $1000 81 | Max ($1500) 82 |
83 | {{< /example >}} 84 | -------------------------------------------------------------------------------- /content/getting-started/_index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | sitemap_exclude: true 4 | redirect: "/docs/getting-started/introduction/" 5 | --- -------------------------------------------------------------------------------- /content/getting-started/build-tools.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | sitemap_exclude: true 4 | redirect: "/docs/getting-started/quickstart/" 5 | --- -------------------------------------------------------------------------------- /content/getting-started/laravel.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS Laravel - Flowbite 4 | description: Learn how to install Tailwind CSS with Flowbite in a Laravel PHP project and start building modern websites with the most popular PHP framework in the world 5 | group: getting-started 6 | toc: true 7 | requires_laravel: true 8 | 9 | previous: Qwik 10 | previousLink: getting-started/qwik/ 11 | next: Symfony 12 | nextLink: getting-started/symfony/ 13 | --- 14 | 15 | Laravel is the most popular free and open-source PHP web framework that helps you build modern web applications and API's based on a model-view-controller (MVC) programming architecture. It's an iteration of the [Symfony](https://flowbite.com/docs/getting-started/symfony/) framework and it's being used by millions of developers and companies around the world. 16 | 17 | Check out this guide to learn how to set up a new Laravel project together with Tailwind CSS and the UI components from Flowbite to enhance your front-end development workflow. 18 | 19 | ## Create a Laravel app 20 | 21 | Make sure that you have Composer and Node.js installed locally on your computer. 22 | 23 | Follow the next steps to install Tailwind CSS and Flowbite with Laravel Mix. 24 | 25 | 1. Require the Laravel Installer globally using Composer: 26 | 27 | ```bash 28 | composer global require laravel/installer 29 | ``` 30 | 31 | Make sure to place the vendor bin directory in your PATH. Here's how you can do it based on each OS: 32 | 33 | - macOS: `export PATH="$PATH:$HOME/.composer/vendor/bin"` 34 | - Windows: `set PATH=%PATH%;%USERPROFILE%\AppData\Roaming\Composer\vendor\bin` 35 | - Linux: `export PATH="~/.config/composer/vendor/bin:$PATH"` 36 | 37 | 2. Create a new project using Laravel's CLI: 38 | 39 | ```bash 40 | laravel new flowbite-app 41 | cd flowbite-app 42 | ``` 43 | 44 | Start the development server using the following command: 45 | 46 | ```bash 47 | composer run dev 48 | ``` 49 | 50 | You can now access the Laravel application on `http://localhost:8000`. 51 | 52 | This command will initialize a blank Laravel project that you can get started with. 53 | 54 | ## Install Tailwind CSS 55 | 56 | Since Laravel 12, the latest version of Tailwind v4 will be installed by default, so if you have that version or later then you can skip this step and proceed with installing Flowbite. 57 | 58 | 1. Install Tailwind CSS using NPM: 59 | 60 | ```javascript 61 | npm install tailwindcss @tailwindcss/vite --save-dev 62 | ``` 63 | 64 | 2. Configure the `vite.config.ts` file by importing the Tailwind plugin: 65 | 66 | ```javascript 67 | import { defineConfig } from 'vite' 68 | import tailwindcss from '@tailwindcss/vite' 69 | export default defineConfig({ 70 | plugins: [ 71 | tailwindcss(), 72 | // … 73 | ], 74 | }) 75 | ``` 76 | 77 | 3. Import the main Tailwind directive inside your `app.css` CSS file: 78 | 79 | ```css 80 | @import "tailwindcss"; 81 | ``` 82 | 83 | 5. Run the build process for Vite using `npm run dev`. Use `npm run build` for production builds. 84 | 85 | ## Install Flowbite 86 | 87 | [Flowbite](https://flowbite.com) is a popular and open-source UI component library built on top of the Tailwind CSS framework that allows you to choose from a wide range of UI components such as modals, drawers, buttons, dropdowns, datepickers, and more to make your development workflow faster and more efficient. 88 | 89 | Follow the next steps to install Flowbite using NPM. 90 | 91 | 1. Install Flowbite as a dependency using NPM by running the following command: 92 | 93 | ```bash 94 | npm install flowbite --save 95 | ``` 96 | 97 | 2. Import the default theme variables from Flowbite inside your main `app.css` CSS file: 98 | 99 | ```css 100 | @import "flowbite/src/themes/default"; 101 | ``` 102 | 103 | 3. Import the Flowbite plugin file in your CSS: 104 | 105 | ```css 106 | @plugin "flowbite/plugin"; 107 | ``` 108 | 109 | 4. Configure the source files of Flowbite in your CSS: 110 | 111 | ```css 112 | @source "../../node_modules/flowbite"; 113 | ``` 114 | 115 | 5. Add the Flowbite JS script inside your main `app.blade.php` layout file: 116 | 117 | ```html 118 | 119 | @yield('content') 120 | 121 | 122 | 123 | ``` 124 | 125 | This will have the JavaScript loaded in all the files that extend this main layout. 126 | 127 | ## UI components 128 | 129 | Now that you have successfully installed the project you can start using the UI components from Flowbite and Tailwind CSS to develop modern websites and web applications. 130 | 131 | We recommend exploring the components using the search bar navigation (`cmd` or `ctrl` + `k`) or by browsing the components section of the sidebar on the left side of this page. 132 | 133 | ## Laravel starter project 134 | 135 | Download or clone the [Flowbite Laravel](https://github.com/themesberg/tailwind-laravel-starter) Github boilerplate repository to get access to a project that already has Laravel, Tailwind CSS, and Flowbite set up for development. 136 | 137 | For even more resources and UI components you can check out [Flowbite Pro](https://flowbite.com/pro/). -------------------------------------------------------------------------------- /content/getting-started/license.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Flowbite - License 4 | description: Learn more about the licensing terms for Flowbite and Tailwind CSS 5 | group: getting-started 6 | toc: true 7 | 8 | previous: LLM 9 | previousLink: getting-started/llm/ 10 | next: Changelog 11 | nextLink: getting-started/changelog/ 12 | --- 13 | 14 | ## Copyright 15 | 16 | The Flowbite name and logos are trademarks of Bergside Inc. Learn more about the [Flowbite Brand Guideline](https://flowbite.com/brand/). 17 | 18 | ## Released code 19 | 20 | The released code is licensed under the [MIT license](https://github.com/themesberg/flowbite/blob/main/README.md). 21 | 22 | Copyright (c) Themesberg (Bergside Inc.) 23 | 24 | Permission is hereby granted, free of charge, to any person obtaining a copy 25 | of this software and associated documentation files (the "Software"), to deal 26 | in the Software without restriction, including without limitation the rights 27 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 28 | copies of the Software, and to permit persons to whom the Software is 29 | furnished to do so, subject to the following conditions: 30 | 31 | The above copyright notice and this permission notice shall be included in all 32 | copies or substantial portions of the Software. 33 | 34 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 35 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 36 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 37 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 38 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 39 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 40 | SOFTWARE. 41 | 42 | ## Documentation 43 | 44 | The docs code is licensed under the [CC BY 3.0](https://creativecommons.org/licenses/by/3.0/). 45 | 46 | Attribution: the documentation code was initially forked from [Bootstrap](https://github.com/twbs/bootstrap) created by the [Bootstrap authors](https://github.com/twbs/bootstrap/graphs/contributors) and [Twitter Inc.](https://twitter.com/) and changes have been made since then to adapt to the Tailwind CSS and Flowbite ecosystem and technologies. 47 | 48 | ## Pro version 49 | 50 | The pro version is licensed under the [EULA](https://flowbite.com/license/) from our website. -------------------------------------------------------------------------------- /content/getting-started/llm.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS AI and LLM - Flowbite 4 | description: Learn how to integrate Flowbite and Tailwind CSS with any LLM interface such as OpenAI, Anthropic, or Gemini to leverage the power of AI and LLMs in your web applications 5 | group: getting-started 6 | toc: true 7 | 8 | previous: TypeScript 9 | previousLink: getting-started/typescript/ 10 | next: License 11 | nextLink: getting-started/license/ 12 | --- 13 | 14 | You can use Flowbite and Tailwind CSS together to generate UIs and integrate them into your own tech stack using LLMs and AI tools such as Windsurf or Cursor based on AI models from OpenAI, Anthropic, Gemini and more. We provide a basic `llms.txt` based on the [LLMs standard](https://llmstxt.org/) that you can use to feed data. 15 | 16 | LLMs and AI integration tools are now a standard way of working in the web industry and it can drastically improve your workflow and productivity. We recommend using our UI library and resources as a stable base for your AI integration. 17 | 18 | AI still has shortcomings and limitations and it is not a replacement for human work. However, that doesn't mean you can't leverage it to generate UIs and components faster and more efficiently. 19 | 20 | ## API routes for LLMs 21 | 22 | The LLMs files are hosted on the following routes on Flowbite: 23 | 24 | - `https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms.txt` - this is the main file that you can use to feed data to your AI tools 25 | - `https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms-full.txt` - this is the full file that is much larger and contains more data 26 | 27 | On a general level, the first file should be enough for LLMs that are able to parse the web. 28 | 29 | ## Markdown files 30 | 31 | Our documentation is hosted on GitHub and you can parse the markdown files directly too: 32 | 33 | - `https://github.com/themesberg/flowbite/blob/main/content/components/accordion.md` - this is an example of a documentation file for the accordion component 34 | - `https://github.com/themesberg/flowbite/blob/main/content/getting-started/angular.md` - this is a documentation file for the Angular integration guide 35 | 36 | We recommend checking out the [content folder](https://github.com/themesberg/flowbite/tree/main/content) from GitHub to view all documentation files. 37 | 38 | ## Implementation examples 39 | 40 | You can use the following code examples to implement LLMs in your web application: 41 | 42 | ```javascript 43 | async function getLLMData() { 44 | const response = await fetch('https://raw.githubusercontent.com/themesberg/flowbite/refs/heads/main/llms.txt'); 45 | const data = await response.text(); 46 | return data; 47 | } 48 | 49 | console.log(await getLLMData()); 50 | ``` 51 | 52 | ## Flowbite AI 53 | 54 | We are currently working on a Flowbite AI feature that will allow you to generate UIs and components using AI models from OpenAI, Anthropic, Gemini and more. One of the features will be to convert your Figma designs into code and generate components using Flowbite and Tailwind CSS. 55 | 56 | If you'd like to be notified when the Flowbite AI feature is available, please sign up below to our newsletter. -------------------------------------------------------------------------------- /content/getting-started/react.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS React - Flowbite 4 | description: Learn how to install Tailwind CSS with Flowbite for your React project and start developing modern web applications using interactive elements based on utility classes 5 | group: getting-started 6 | toc: true 7 | requires_react: true 8 | 9 | previous: Changelog 10 | previousLink: getting-started/changelog/ 11 | next: Next.js 12 | nextLink: getting-started/next-js/ 13 | --- 14 | 15 | [React](https://react.dev/) is one of the most popular front-end libraries in the world used by websites such as Facebook, Instagram, Yahoo Mail, Dropbox, and more built by the Meta (formerly Facebook) company. 16 | 17 | Coupled with Tailwind CSS and the React components from Flowbite you will be able to develop applications faster than ever based on the [Flowbite React](https://flowbite-react.com) library using advanced theming functionalities and React specific components and methodologies. 18 | 19 | ## Getting started 20 | 21 | You can easily install or add Flowbite React to an existing project with our new CLI toolkit. 22 | 23 | ## Create a React project 24 | 25 | Use our project creation CLI to scaffold a new application with Flowbite React already configured: 26 | 27 | ```bash 28 | npx create-flowbite-react@latest 29 | ``` 30 | 31 | This will create a new project with React, Flowbite, and Tailwind CSS (v4) ready to use. 32 | 33 | ## Add to existing project 34 | 35 | For existing projects, use the Flowbite React CLI to set up and configure everything automatically: 36 | 37 | ```bash 38 | npx flowbite-react@latest init 39 | ``` 40 | 41 | This will add Flowbite React and configure Tailwind CSS to an existing React project. 42 | 43 | ## Integration Guides 44 | 45 | Flowbite React is a UI component library that can be integrated with many other technologies and libraries such as Next.js, Astro, Gatsby, Laravel, Remix and more. 46 | 47 | Check out [this page](https://flowbite-react.com/docs/getting-started/quickstart) to learn how to get started with each integration. 48 | 49 | ## React components 50 | 51 | Flowbite React offers a wide variety of UI components such as buttons, dropdowns, modals, datepickers, and more that you can plug and play into your application. Check out the [Flowbite React docs](https://flowbite-react.com/docs/components/button) for more details. 52 | 53 | ## Theme customization 54 | 55 | Flowbite React offers an advanced system of customizing your components and templates using the new [theming engine](https://flowbite-react.com/docs/customize/theme). You can style components by directly using the `className` attribute of the component, but also by passing a theme object to the `` component. 56 | 57 | For example, here is a simple way you can update a button component: 58 | 59 | ```javascript 60 | import { Button } from "flowbite-react"; 61 | 62 | function App() { 63 | return ; 64 | } 65 | ``` 66 | 67 | Additionally, you can also use the `createTheme` helper to create a theme object that you can then pass on to the `` component with which you can style subcomponents too: 68 | 69 | ```javascript 70 | import { Button, createTheme, ThemeProvider } from "flowbite-react"; 71 | 72 | const customTheme = createTheme({ 73 | button: { 74 | color: { 75 | primary: "bg-red-500 hover:bg-red-600", 76 | secondary: "bg-blue-500 hover:bg-blue-600", 77 | }, 78 | size: { 79 | lg: "px-6 py-3 text-lg", 80 | }, 81 | }, 82 | }); 83 | 84 | function App() { 85 | return ( 86 | 87 | 88 | 91 | 92 | ); 93 | } 94 | ``` 95 | 96 | ## Storybook 97 | 98 | Flowbite React also has a [Storybook](https://flowbite-react.com/storybook) version which you can use to preview and test components in isolation. 99 | 100 | ## Open-source community 101 | 102 | The Flowbite React UI library is an open-source project under the MIT license. You can access the source code on [GitHub](https://github.com/themesberg/flowbite-react) and collaborate with our community of developers to contribute to its growth. 103 | 104 | ## Support development 105 | 106 | If you’d like to support our open-source work, you can explore the [pro version](https://flowbite.com/pro/) of Flowbite, which offers 400+ components and templates, a Figma design system, an admin dashboard, and more. -------------------------------------------------------------------------------- /content/plugins/datepicker.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: redirect 3 | sitemap_exclude: true 4 | redirect: "/docs/components/datepicker/" 5 | --- -------------------------------------------------------------------------------- /content/typography/hr.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS Horizontal Line (HR) - Flowbite 4 | description: Create a horizontal line using the HR tag to separate content such as paragraphs, blockquotes, and other elements using the utility classes from Tailwind CSS 5 | group: typography 6 | toc: true 7 | 8 | previous: Text 9 | previousLink: typography/text/ 10 | next: Charts 11 | nextLink: plugins/charts/ 12 | --- 13 | 14 | The HR component can be used to separate content using a horizontal line by adding space between elements based on multiple styles, variants, and layouts. 15 | 16 | ## Default HR 17 | 18 | Use this example to separate text content with a `
` horizontal line. 19 | 20 | {{< example id="default-hr-example" github="typography/hr.md" show_dark=true >}} 21 |

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

22 |
23 |

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

24 | {{< /example >}} 25 | 26 | ## Trimmed 27 | 28 | Use this example to show a shorter version of the horizontal line. 29 | 30 | {{< example id="hr-trimmed-example" github="typography/hr.md" show_dark=true >}} 31 |

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

32 |
33 |

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil, and deploy changes with ease, with a complete audit trail for every change.

34 | {{< /example >}} 35 | 36 | ## Icon HR 37 | 38 | This example can be used to set a custom [SVG icon](https://flowbite.com/icons/) in the middle of the HR element. 39 | 40 | {{< example id="hr-icon-example" class="text-center" github="typography/hr.md" show_dark=true >}} 41 |

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

42 |
43 |
44 |
45 | 48 |
49 |
50 |

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.

51 | {{< /example >}} 52 | 53 | ## HR with text 54 | 55 | Use this example to add a text in the middle of the HR component. 56 | 57 | {{< example id="hr-text-example" class="text-center" github="typography/hr.md" show_dark=true >}} 58 |

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

59 |
60 |
61 | or 62 |
63 |

Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.

64 | {{< /example >}} 65 | 66 | ## HR shape 67 | 68 | This example can be used to separate content with a HR tag as a shape instead of a line. 69 | 70 | {{< example id="hr-shape-example" github="typography/hr.md" show_dark=true >}} 71 |

Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools, so your IT support and operations teams have richer contextual information to rapidly respond to requests, incidents, and changes.

72 |
73 |
74 |

"Flowbite is just awesome. It contains tons of predesigned components and pages starting from login screen to complex dashboard. Perfect choice for your next SaaS application."

75 |
76 | {{< /example >}} 77 | -------------------------------------------------------------------------------- /content/typography/text-decoration.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | title: Tailwind CSS Text Decoration - Flowbite 4 | description: Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class 5 | group: typography 6 | toc: true 7 | 8 | previous: List group 9 | previousLink: components/list-group/ 10 | next: Modals 11 | nextLink: components/modal/ 12 | --- 13 | 14 | -------------------------------------------------------------------------------- /data/colors.yml: -------------------------------------------------------------------------------- 1 | - name: blue 2 | context: info 3 | - name: red 4 | context: danger 5 | - name: yellow 6 | context: warning 7 | - name: green 8 | context: success 9 | - name: gray 10 | context: dark -------------------------------------------------------------------------------- /data/sidebar.yml: -------------------------------------------------------------------------------- 1 | - title: Getting started 2 | slug: getting-started 3 | pages: 4 | - title: Introduction 5 | - title: Quickstart 6 | - title: JavaScript 7 | - title: TypeScript 8 | - title: LLM 9 | new: true 10 | - title: License 11 | - title: Changelog 12 | 13 | - title: Integration guides 14 | slug: getting-started 15 | pages: 16 | - title: React 17 | - title: Next.js 18 | slug: next-js 19 | - title: Vue 20 | - title: Nuxt 21 | slug: nuxt-js 22 | - title: Svelte 23 | - title: Angular 24 | - title: Astro 25 | - title: Remix 26 | - title: Meteor.js 27 | slug: meteor-js 28 | - title: Gatsby 29 | - title: SolidJS 30 | slug: solid-js 31 | - title: Qwik 32 | - title: Laravel 33 | - title: Symfony 34 | - title: Rails 35 | - title: Phoenix 36 | - title: Django 37 | - title: Flask 38 | - title: Blazor 39 | - title: Hugo 40 | new: true 41 | 42 | 43 | - title: Customize 44 | slug: customize 45 | pages: 46 | - title: Configuration 47 | - title: Dark Mode 48 | - title: Theming 49 | - title: Colors 50 | - title: Icons 51 | - title: RTL 52 | new: true 53 | - title: Optimization 54 | 55 | - title: Components 56 | slug: components 57 | pages: 58 | - title: Accordion 59 | - title: Alerts 60 | - title: Avatar 61 | - title: Badge 62 | - title: Banner 63 | - title: Bottom Navigation 64 | - title: Breadcrumb 65 | - title: Buttons 66 | - title: Button Group 67 | - title: Card 68 | - title: Carousel 69 | - title: Chat Bubble 70 | - title: Clipboard 71 | - title: Datepicker 72 | - title: Device Mockups 73 | - title: Drawer 74 | - title: Dropdowns 75 | - title: Footer 76 | - title: Forms 77 | - title: Gallery 78 | - title: Indicators 79 | - title: Jumbotron 80 | - title: KBD 81 | - title: List Group 82 | - title: Mega Menu 83 | - title: Modal 84 | - title: Navbar 85 | - title: Pagination 86 | - title: Popover 87 | - title: Progress 88 | - title: Rating 89 | - title: Sidebar 90 | - title: Skeleton 91 | - title: Speed Dial 92 | - title: Spinner 93 | - title: Stepper 94 | - title: Tables 95 | - title: Tabs 96 | - title: Timeline 97 | - title: Toast 98 | - title: Tooltips 99 | - title: Typography 100 | - title: Video 101 | 102 | - title: Forms 103 | slug: forms 104 | pages: 105 | - title: Input Field 106 | - title: File Input 107 | - title: Search Input 108 | - title: Number Input 109 | - title: Phone Input 110 | - title: Select 111 | - title: Textarea 112 | - title: Timepicker 113 | - title: Checkbox 114 | - title: Radio 115 | - title: Toggle 116 | - title: Range 117 | - title: Floating Label 118 | 119 | - title: Typography 120 | slug: typography 121 | pages: 122 | - title: Headings 123 | - title: Paragraphs 124 | - title: Blockquote 125 | - title: Images 126 | - title: Lists 127 | - title: Links 128 | - title: Text 129 | - title: HR 130 | 131 | - title: Plugins 132 | slug: plugins 133 | pages: 134 | - title: Charts 135 | - title: Datatables 136 | new: true 137 | - title: WYSIWYG 138 | new: true 139 | -------------------------------------------------------------------------------- /layouts/_default/404.html: -------------------------------------------------------------------------------- 1 | {{ define "body_override" }}{{ end }} 2 | {{ define "main" }} 3 |
4 | {{ .Content }} 5 |
6 | {{ end }} 7 | -------------------------------------------------------------------------------- /layouts/_default/_markup/render-heading.html: -------------------------------------------------------------------------------- 1 | 6 | {{ .Text | safeHTML }} 7 | 8 | {{- if and (ge .Level 2) (le .Level 4) }}{{" " -}} 9 | # 10 | {{- end -}} 11 | -------------------------------------------------------------------------------- /layouts/_default/baseof.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{ partial "header" . }} 6 | 7 | {{ block "body_override" . }} 8 | 9 | 10 | {{ end }} 11 | 12 | {{ block "main" . }} 13 | {{ end }} 14 | 15 | {{ partial "footer" . }} 16 | {{ partial "scripts" . }} 17 | 18 | {{ block "footer" . }} 19 | {{ end }} 20 | 21 | 22 | -------------------------------------------------------------------------------- /layouts/_default/dashboard.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ partial "header" . }} 5 | 6 | {{ block "body_override" . }}{{ end }} 7 | 8 | {{ partial "dashboard/navbar" . }} 9 | 10 | {{ partial "dashboard/sidebar" . }} 11 | 12 |
13 | 14 | {{ block "main" . }} 15 | {{ end }} 16 |
17 | 18 | {{ partial "dashboard/footer" . }} 19 | {{ partial "scripts" . }} 20 | 21 | {{ block "footer" . }} 22 | {{ end }} 23 | 24 | 25 | -------------------------------------------------------------------------------- /layouts/_default/redirect.html: -------------------------------------------------------------------------------- 1 | {{ partial "redirect" (.Page.Params.redirect | absURL) }} 2 | -------------------------------------------------------------------------------- /layouts/alias.html: -------------------------------------------------------------------------------- 1 | {{ partial "redirect" .Permalink }} 2 | -------------------------------------------------------------------------------- /layouts/partials/analytics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /layouts/partials/favicons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /layouts/partials/header.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | {{ .Params.Title | markdownify }} 8 | 9 | 10 | 11 | {{ with .Params.robots -}} 12 | 13 | {{- end }} 14 | 15 | {{ partial "stylesheet" . }} 16 | {{ partial "favicons" . }} 17 | {{ partial "social" . }} 18 | {{ partial "analytics" . }} 19 | 20 | -------------------------------------------------------------------------------- /layouts/partials/redirect.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ . }} 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /layouts/partials/scripts.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /layouts/partials/sidebar.html: -------------------------------------------------------------------------------- 1 | 50 | 51 | -------------------------------------------------------------------------------- /layouts/partials/social.html: -------------------------------------------------------------------------------- 1 | {{ "" | safeHTML }} 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{ "" | safeHTML }} 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /layouts/partials/stylesheet.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /layouts/robots.txt: -------------------------------------------------------------------------------- 1 | # www.robotstxt.org 2 | # Allow crawling of all content 3 | User-agent: * 4 | Disallow: 5 | Sitemap: {{ "/sitemap.xml" | absURL }} -------------------------------------------------------------------------------- /layouts/shortcodes/current_version.html: -------------------------------------------------------------------------------- 1 | {{ $.Site.Params.current_version }} -------------------------------------------------------------------------------- /layouts/shortcodes/markdown.html: -------------------------------------------------------------------------------- 1 | {{- .Inner | markdownify -}} 2 | -------------------------------------------------------------------------------- /layouts/shortcodes/param.html: -------------------------------------------------------------------------------- 1 | {{- /* 2 | Work around wrong escapes in integrity attributes. 3 | */ -}} 4 | 5 | {{- $name := .Get 0 -}} 6 | {{- with $name -}} 7 | {{- $value := $.Page.Param . -}} 8 | {{- if in $name "_hash" -}} 9 | {{- $value = $value | safeHTML -}} 10 | {{- end -}} 11 | {{- with $value }}{{ . }}{{ else }}{{ errorf "Param %q not found: %s" $name $.Position }}{{ end -}} 12 | {{- else }}{{ errorf "Missing param key: %s" $.Position }}{{ end -}} 13 | -------------------------------------------------------------------------------- /layouts/shortcodes/partial.html: -------------------------------------------------------------------------------- 1 | {{ partial (.Get 0) . }} 2 | -------------------------------------------------------------------------------- /layouts/shortcodes/placeholder.html: -------------------------------------------------------------------------------- 1 | {{- /* 2 | Usage: `placeholder args` 3 | 4 | args can be one of the following: 5 | title: Used in the SVG `title` tag, default "Placeholder" 6 | text: The text to show in the image - default: "width x height" 7 | class: default: "bd-placeholder-img" 8 | color: The text color (foreground) - default: "#dee2e6" 9 | background: The background color - default: "#868e96" 10 | width: default: 100% 11 | height: default: 180px 12 | */ -}} 13 | 14 | {{- $grays := $.Site.Data.grays -}} 15 | {{- $title := .Get "title" | default "Placeholder" -}} 16 | {{- $class := .Get "class" -}} 17 | {{- $color := .Get "color" | default (index $grays 2).hex -}} 18 | {{- $background := .Get "background" | default (index $grays 5).hex -}} 19 | {{- $width := .Get "width" | default "100%" -}} 20 | {{- $height := .Get "height" | default "180" -}} 21 | {{- $text := .Get "text" | default (printf "%sx%s" $width $height) -}} 22 | 23 | {{- $show_title := not (eq $title "false") -}} 24 | {{- $show_text := not (eq $text "false") -}} 25 | 26 | 31 | -------------------------------------------------------------------------------- /layouts/shortcodes/preview.html: -------------------------------------------------------------------------------- 1 |
2 | {{ .Inner | markdownify }} 3 |
4 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_angular.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 7 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | Requires Angular 21 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_blazor.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | 7 | Requires Blazor (.NET) 8 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_django.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | Django logo 15 | 16 | Requires Django 17 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_hugo.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 17 | 18 | Requires HUGO 19 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_js.html: -------------------------------------------------------------------------------- 1 | 4 | Requires Flowbite JS 11 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_laravel.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | Requires Laravel 11 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_nextjs.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 27 | 28 | Requires Next.js 29 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_nuxtjs.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | Requires Nuxt 10 | 11 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_react.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | Requires React 11 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_ruby.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | 23 | Requires Ruby on Rails 24 | 25 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_svelte.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | Requires Svelte 30 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_symfony.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 13 | 14 | Requires Symfony 15 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_tw3.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_tw4.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_typescript: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /layouts/shortcodes/requires_vue.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | Requires Vue.js 11 | -------------------------------------------------------------------------------- /layouts/sitemap.xml: -------------------------------------------------------------------------------- 1 | {{ printf "" | safeHTML }} 2 | 3 | {{- range .Data.Pages -}}{{ if ne .Params.sitemap_exclude true }} 4 | 5 | {{ .Permalink }}{{ if not .Lastmod.IsZero }} 6 | {{ safeHTML (.Lastmod.Format "2006-01-02T15:04:05-07:00") }}{{ end }}{{ with .Sitemap.ChangeFreq }} 7 | {{ . }}{{ end }}{{ if ge .Sitemap.Priority 0.0 }} 8 | {{ .Sitemap.Priority }}{{ end }} 9 | {{ end }}{{ end }} 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flowbite", 3 | "version": "3.1.2", 4 | "description": "The most popular library of interactive components built with Tailwind CSS", 5 | "keywords": [ 6 | "flowbite", 7 | "typescript", 8 | "javascript", 9 | "webpack", 10 | "html", 11 | "css", 12 | "component library", 13 | "ui components", 14 | "tailwind", 15 | "tailwind css", 16 | "tailwind components", 17 | "tailwind elements", 18 | "tailwind library", 19 | "tailwind sections", 20 | "tailwind css", 21 | "tailwind ui", 22 | "tailwind react", 23 | "tailwind vue", 24 | "tailwind angular", 25 | "tailwind svelte", 26 | "tailwind django", 27 | "tailwind ruby on rails", 28 | "tailwind laravel", 29 | "tailwind nuxt", 30 | "tailwind next", 31 | "tailwind astro", 32 | "tailwind flask", 33 | "eslint", 34 | "prettier", 35 | "cjs", 36 | "esm", 37 | "umd" 38 | ], 39 | "license": "MIT", 40 | "main": "lib/cjs/index.js", 41 | "module": "lib/esm/index.js", 42 | "types": "lib/esm/index.d.ts", 43 | "style": "dist/flowbite.min.css", 44 | "repository": "https://github.com/themesberg/flowbite.git", 45 | "bugs": "https://github.com/themesberg/flowbite/issues", 46 | "homepage": "https://flowbite.com", 47 | "contributors": [ 48 | "Zoltán Szőgyényi (https://x.com/zoltanszogyenyi)", 49 | "Robert Tanislav (https://x.com/roberttanislav)" 50 | ], 51 | "author": "Bergside Inc.", 52 | "scripts": { 53 | "start": "cross-env NODE_ENV=development run-p start:*", 54 | "start:hugo": "hugo server -D", 55 | "start:webpack": "webpack --mode=development --watch", 56 | "start:css": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/flowbite.css -o static/flowbite.css --watch", 57 | "start:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/main.css -o static/main.css --watch", 58 | "build": "cross-env NODE_ENV=production && HUGO_ENV=production && run-s build:css:docs:min build:webpack build:hugo", 59 | "build:hugo": "hugo", 60 | "build:webpack": "webpack --mode=production", 61 | "build:css:min": "cross-env NPM_ENV=production npx @tailwindcss/cli -i src/flowbite.css -o dist/flowbite.min.css --minify", 62 | "build:css": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/flowbite.css -o dist/flowbite.css", 63 | "build:css:docs:min": "cross-env NPM_ENV=production npx @tailwindcss/cli -i src/main.css -o static/main.css --minify", 64 | "build:css-docs": "cross-env NPM_ENV=development npx @tailwindcss/cli -i src/main.css -o static/main.css", 65 | "build:js": "run-s build:webpack", 66 | "copy:js:dist": "copyfiles --flat static/flowbite.js dist && copyfiles --flat static/flowbite.js.map dist && copyfiles --flat static/flowbite.min.js.map dist && copyfiles --flat static/flowbite.min.js dist && copyfiles --flat static/flowbite.turbo.js dist && copyfiles --flat static/flowbite.turbo.min.js dist && copyfiles --flat static/flowbite.turbo.js.map dist && copyfiles --flat static/flowbite.turbo.min.js.map dist && copyfiles --flat static/flowbite.phoenix.js dist && copyfiles --flat static/flowbite.phoenix.min.js dist && copyfiles --flat static/flowbite.phoenix.js.map dist && copyfiles --flat static/flowbite.phoenix.min.js.map dist", 67 | "build:dist": "mkdir -p dist && run-s build:css:min build:css build:js copy:js:dist", 68 | "build:lib": "tsc --outDir lib/cjs && tsc -m es6 --outDir lib/esm", 69 | "clean:lib": "shx rm -rf lib", 70 | "clean:dist": "shx rm -rf dist", 71 | "build:npm": "run-s clean:lib build:lib clean:dist build:dist", 72 | "lint": "eslint . --ext .js,.jsx,.ts,.tsx --ignore-path .gitignore" 73 | }, 74 | "devDependencies": { 75 | "@babel/core": "^7.14.8", 76 | "@babel/preset-env": "^7.14.8", 77 | "@docsearch/js": "^3.0.0-alpha.42", 78 | "@tailwindcss/cli": "^4.0.0", 79 | "@tailwindcss/postcss": "^4.0.0", 80 | "@typescript-eslint/eslint-plugin": "^5.46.1", 81 | "@typescript-eslint/parser": "^5.46.1", 82 | "autoprefixer": "^10.3.3", 83 | "babel-loader": "^8.2.2", 84 | "copyfiles": "^2.4.1", 85 | "core-js": "^3.8.1", 86 | "cross-env": "^7.0.3", 87 | "css-loader": "^5.2.7", 88 | "css-minimizer-webpack-plugin": "^3.0.2", 89 | "cssnano": "^5.0.8", 90 | "eslint": "^8.29.0", 91 | "eslint-config-prettier": "^8.0.0", 92 | "eslint-plugin-prettier": "^4.2.1", 93 | "eslint-plugin-tailwindcss": "^3.7.1", 94 | "file-loader": "^6.2.0", 95 | "flowbite-typography": "^1.0.5", 96 | "mini-css-extract-plugin": "^1.3.3", 97 | "npm-run-all": "^4.1.5", 98 | "prettier": "^2.8.1", 99 | "prettier-plugin-tailwindcss": "^0.2.1", 100 | "shx": "^0.3.4", 101 | "source-map-loader": "^2.0.0", 102 | "style-loader": "^2.0.0", 103 | "tailwindcss": "^4.0.0", 104 | "terser-webpack-plugin": "^5.3.6", 105 | "ts-loader": "^9.4.2", 106 | "typescript": "^4.9.4", 107 | "webpack": "^5.47.0", 108 | "webpack-cli": "^4.7.2", 109 | "webpack-dev-server": "^4.11.1", 110 | "windicss": "^3.5.6", 111 | "yarn": "^1.22.10" 112 | }, 113 | "dependencies": { 114 | "@popperjs/core": "^2.9.3", 115 | "flowbite-datepicker": "^1.3.1", 116 | "mini-svg-data-uri": "^1.4.3", 117 | "postcss": "^8.5.1" 118 | }, 119 | "files": [ 120 | "lib", 121 | "dist", 122 | "src/themes", 123 | "types", 124 | "plugin.d.ts", 125 | "plugin.js", 126 | "plugin-windicss.js" 127 | ] 128 | } 129 | -------------------------------------------------------------------------------- /plugin.d.ts: -------------------------------------------------------------------------------- 1 | declare const plugin: { handler: () => void }; 2 | export = plugin; 3 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | module.exports = { 3 | plugins: { 4 | '@tailwindcss/postcss': {}, 5 | 'cssnano': 6 | process.env.NPM_ENV === 'production' 7 | ? { preset: 'default' } 8 | : false, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /safelist.txt: -------------------------------------------------------------------------------- 1 | datatable-wrapper 2 | datatable-top 3 | datatable-search 4 | datatable-input 5 | datatable-container 6 | datatable-table 7 | datatable-empty 8 | datatable-bottom 9 | datatable-info 10 | datatable-pagination 11 | datatable-pagination-list 12 | datatable-pagination-list-item 13 | datatable-pagination-list-item-link 14 | datatable-dropdown 15 | datatable-selector 16 | search-filtering-row 17 | datatable-sorter 18 | datatable-ascending 19 | datatable-descending 20 | selected 21 | selectedCell 22 | apexcharts-canvas 23 | apexcharts-datalabels 24 | apexcharts-text 25 | apexcharts-pie-label 26 | apexcharts-datalabels-group 27 | apexcharts-datalabel-label 28 | apexcharts-legend 29 | apexcharts-legend-series 30 | apexcharts-legend-text 31 | apexcharts-legend-text:not(apexcharts-inactive-legend):hover 32 | apexcharts-tooltip 33 | apexcharts-tooltip-text-y-label 34 | apexcharts-tooltip-text-y-value 35 | apexcharts-tooltip-title 36 | apexcharts-tooltip-series-group 37 | apexcharts-active 38 | apexcharts-tooltip-y-group 39 | apexcharts-active:first-of-type 40 | apexcharts-xaxistooltip 41 | apexcharts-xaxistooltip-text 42 | apexcharts-xaxistooltip:after 43 | apexcharts-xaxistooltip:before 44 | apexcharts-datalabel-value 45 | apexcharts-gridline 46 | apexcharts-xcrosshairs 47 | apexcharts-ycrosshairs 48 | apexcharts-tooltip-marker 49 | z-40 50 | w-64 51 | w-1/2 52 | rounded-l-lg 53 | rounded-r-lg 54 | rounded-s-lg 55 | rounded-e-lg 56 | bg-gray-200 57 | grid-cols-4 58 | grid-cols-7 59 | h-6 60 | leading-6 61 | h-9 62 | leading-9 63 | shadow-lg 64 | !bg-gray-50 65 | dark:!bg-gray-700 66 | !bg-primary-600 67 | dark:!bg-primary-600 -------------------------------------------------------------------------------- /src/components/accordion/interface.ts: -------------------------------------------------------------------------------- 1 | // Import the AccordionItem and AccordionOptions interfaces 2 | import { AccordionItem, AccordionOptions } from './types'; 3 | 4 | // Define the Accordion interface 5 | export declare interface AccordionInterface { 6 | _items: AccordionItem[]; 7 | _options: AccordionOptions; 8 | 9 | getItem(id: string): AccordionItem | undefined; 10 | open(id: string): void; 11 | toggle(id: string): void; 12 | close(id: string): void; 13 | 14 | destroy(): void; 15 | removeInstance(): void; 16 | destroyAndRemoveInstance(): void; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/accordion/types.ts: -------------------------------------------------------------------------------- 1 | import { AccordionInterface } from './interface'; 2 | 3 | export declare type AccordionItem = { 4 | id: string; 5 | triggerEl: HTMLElement; 6 | targetEl: HTMLElement; 7 | iconEl?: HTMLElement | null; 8 | active?: boolean; 9 | clickHandler?: EventListenerOrEventListenerObject; 10 | }; 11 | 12 | export declare type AccordionOptions = { 13 | alwaysOpen?: boolean; 14 | activeClasses?: string; 15 | inactiveClasses?: string; 16 | onOpen?: (accordion: AccordionInterface, item: AccordionItem) => void; 17 | onClose?: (accordion: AccordionInterface, item: AccordionItem) => void; 18 | onToggle?: (accordion: AccordionInterface, item: AccordionItem) => void; 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/carousel/interface.ts: -------------------------------------------------------------------------------- 1 | import { 2 | CarouselOptions, 3 | CarouselItem, 4 | IndicatorItem, 5 | RotationItems, 6 | } from './types'; 7 | 8 | export declare interface CarouselInterface { 9 | _items: CarouselItem[]; 10 | _indicators: IndicatorItem[]; 11 | _activeItem: CarouselItem; 12 | _intervalDuration: number; 13 | _intervalInstance: number; 14 | _options: CarouselOptions; 15 | 16 | init(): void; 17 | 18 | getItem(position: number): CarouselItem; 19 | getActiveItem(): CarouselItem; 20 | 21 | _setActiveItem(item: CarouselItem): void; 22 | 23 | slideTo(position: number): void; 24 | 25 | next(): void; 26 | prev(): void; 27 | 28 | _rotate(rotationItems: RotationItems): void; 29 | cycle(): void; 30 | pause(): void; 31 | 32 | destroy(): void; 33 | removeInstance(): void; 34 | destroyAndRemoveInstance(): void; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/carousel/types.ts: -------------------------------------------------------------------------------- 1 | import { CarouselInterface } from './interface'; 2 | 3 | export declare type CarouselItem = { 4 | position: number; 5 | el: HTMLElement; 6 | }; 7 | 8 | export declare type IndicatorItem = { 9 | position: number; 10 | el: HTMLElement; 11 | }; 12 | 13 | export declare type RotationItems = { 14 | left: CarouselItem; 15 | middle: CarouselItem; 16 | right: CarouselItem; 17 | }; 18 | 19 | export declare type CarouselOptions = { 20 | defaultPosition?: number; 21 | indicators?: { 22 | items?: IndicatorItem[]; 23 | activeClasses?: string; 24 | inactiveClasses?: string; 25 | }; 26 | interval?: number; 27 | onNext?: (carousel: CarouselInterface) => void; 28 | onPrev?: (carousel: CarouselInterface) => void; 29 | onChange?: (carousel: CarouselInterface) => void; 30 | }; 31 | -------------------------------------------------------------------------------- /src/components/clipboard/interface.ts: -------------------------------------------------------------------------------- 1 | import { CopyClipboardOptions } from './types'; 2 | 3 | export declare interface CopyClipboardInterface { 4 | _triggerEl: HTMLElement | null; 5 | _targetEl: HTMLElement | HTMLInputElement | null; 6 | _options: CopyClipboardOptions; 7 | 8 | init(): void; 9 | copy(): string; 10 | 11 | destroy(): void; 12 | removeInstance(): void; 13 | destroyAndRemoveInstance(): void; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/clipboard/types.ts: -------------------------------------------------------------------------------- 1 | import { CopyClipboardInterface } from './interface'; 2 | 3 | export declare type CopyClipboardOptions = { 4 | htmlEntities: boolean; 5 | contentType?: string; 6 | onCopy?: (clipboard: CopyClipboardInterface) => void; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-empty-function */ 2 | import type { CollapseOptions } from './types'; 3 | import type { InstanceOptions } from '../../dom/types'; 4 | import { CollapseInterface } from './interface'; 5 | import instances from '../../dom/instances'; 6 | 7 | const Default: CollapseOptions = { 8 | onCollapse: () => {}, 9 | onExpand: () => {}, 10 | onToggle: () => {}, 11 | }; 12 | 13 | const DefaultInstanceOptions: InstanceOptions = { 14 | id: null, 15 | override: true, 16 | }; 17 | 18 | class Collapse implements CollapseInterface { 19 | _instanceId: string; 20 | _targetEl: HTMLElement | null; 21 | _triggerEl: HTMLElement | null; 22 | _options: CollapseOptions; 23 | _visible: boolean; 24 | _initialized: boolean; 25 | _clickHandler: EventListenerOrEventListenerObject; 26 | 27 | constructor( 28 | targetEl: HTMLElement | null = null, 29 | triggerEl: HTMLElement | null = null, 30 | options: CollapseOptions = Default, 31 | instanceOptions: InstanceOptions = DefaultInstanceOptions 32 | ) { 33 | this._instanceId = instanceOptions.id 34 | ? instanceOptions.id 35 | : targetEl.id; 36 | this._targetEl = targetEl; 37 | this._triggerEl = triggerEl; 38 | this._options = { ...Default, ...options }; 39 | this._visible = false; 40 | this._initialized = false; 41 | this.init(); 42 | instances.addInstance( 43 | 'Collapse', 44 | this, 45 | this._instanceId, 46 | instanceOptions.override 47 | ); 48 | } 49 | 50 | init() { 51 | if (this._triggerEl && this._targetEl && !this._initialized) { 52 | if (this._triggerEl.hasAttribute('aria-expanded')) { 53 | this._visible = 54 | this._triggerEl.getAttribute('aria-expanded') === 'true'; 55 | } else { 56 | // fix until v2 not to break previous single collapses which became dismiss 57 | this._visible = !this._targetEl.classList.contains('hidden'); 58 | } 59 | 60 | this._clickHandler = () => { 61 | this.toggle(); 62 | }; 63 | 64 | this._triggerEl.addEventListener('click', this._clickHandler); 65 | this._initialized = true; 66 | } 67 | } 68 | 69 | destroy() { 70 | if (this._triggerEl && this._initialized) { 71 | this._triggerEl.removeEventListener('click', this._clickHandler); 72 | this._initialized = false; 73 | } 74 | } 75 | 76 | removeInstance() { 77 | instances.removeInstance('Collapse', this._instanceId); 78 | } 79 | 80 | destroyAndRemoveInstance() { 81 | this.destroy(); 82 | this.removeInstance(); 83 | } 84 | 85 | collapse() { 86 | this._targetEl.classList.add('hidden'); 87 | if (this._triggerEl) { 88 | this._triggerEl.setAttribute('aria-expanded', 'false'); 89 | } 90 | this._visible = false; 91 | 92 | // callback function 93 | this._options.onCollapse(this); 94 | } 95 | 96 | expand() { 97 | this._targetEl.classList.remove('hidden'); 98 | if (this._triggerEl) { 99 | this._triggerEl.setAttribute('aria-expanded', 'true'); 100 | } 101 | this._visible = true; 102 | 103 | // callback function 104 | this._options.onExpand(this); 105 | } 106 | 107 | toggle() { 108 | if (this._visible) { 109 | this.collapse(); 110 | } else { 111 | this.expand(); 112 | } 113 | // callback function 114 | this._options.onToggle(this); 115 | } 116 | 117 | updateOnCollapse(callback: () => void) { 118 | this._options.onCollapse = callback; 119 | } 120 | 121 | updateOnExpand(callback: () => void) { 122 | this._options.onExpand = callback; 123 | } 124 | 125 | updateOnToggle(callback: () => void) { 126 | this._options.onToggle = callback; 127 | } 128 | } 129 | 130 | export function initCollapses() { 131 | document 132 | .querySelectorAll('[data-collapse-toggle]') 133 | .forEach(($triggerEl) => { 134 | const targetId = $triggerEl.getAttribute('data-collapse-toggle'); 135 | const $targetEl = document.getElementById(targetId); 136 | 137 | // check if the target element exists 138 | if ($targetEl) { 139 | if ( 140 | !instances.instanceExists( 141 | 'Collapse', 142 | $targetEl.getAttribute('id') 143 | ) 144 | ) { 145 | new Collapse( 146 | $targetEl as HTMLElement, 147 | $triggerEl as HTMLElement 148 | ); 149 | } else { 150 | // if instance exists already for the same target element then create a new one with a different trigger element 151 | new Collapse( 152 | $targetEl as HTMLElement, 153 | $triggerEl as HTMLElement, 154 | {}, 155 | { 156 | id: 157 | $targetEl.getAttribute('id') + 158 | '_' + 159 | instances._generateRandomId(), 160 | } 161 | ); 162 | } 163 | } else { 164 | console.error( 165 | `The target element with id "${targetId}" does not exist. Please check the data-collapse-toggle attribute.` 166 | ); 167 | } 168 | }); 169 | } 170 | 171 | if (typeof window !== 'undefined') { 172 | window.Collapse = Collapse; 173 | window.initCollapses = initCollapses; 174 | } 175 | 176 | export default Collapse; 177 | -------------------------------------------------------------------------------- /src/components/collapse/interface.ts: -------------------------------------------------------------------------------- 1 | import { CollapseOptions } from './types'; 2 | 3 | export declare interface CollapseInterface { 4 | _targetEl: HTMLElement | null; 5 | _triggerEl: HTMLElement | null; 6 | _options: CollapseOptions; 7 | _visible: boolean; 8 | 9 | init(): void; 10 | collapse(): void; 11 | expand(): void; 12 | toggle(): void; 13 | 14 | destroy(): void; 15 | removeInstance(): void; 16 | destroyAndRemoveInstance(): void; 17 | } 18 | -------------------------------------------------------------------------------- /src/components/collapse/types.ts: -------------------------------------------------------------------------------- 1 | import { CollapseInterface } from './interface'; 2 | 3 | export declare type CollapseOptions = { 4 | onCollapse?: (collapse: CollapseInterface) => void; 5 | onExpand?: (collapse: CollapseInterface) => void; 6 | onToggle?: (collapse: CollapseInterface) => void; 7 | }; 8 | -------------------------------------------------------------------------------- /src/components/datepicker/interface.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | import { DatepickerOptions } from './types'; 3 | 4 | export declare interface DatepickerInterface { 5 | _datepickerEl: HTMLElement; 6 | _datepickerInstance: any | null; 7 | _options: DatepickerOptions; 8 | 9 | init(): void; 10 | 11 | destroy(): void; 12 | removeInstance(): void; 13 | destroyAndRemoveInstance(): void; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/datepicker/types.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-explicit-any */ 2 | import { DatepickerInterface } from './interface'; 3 | 4 | export interface DatepickerOptions { 5 | defaultDatepickerId?: string | null; 6 | autohide?: boolean; 7 | format?: string; 8 | maxDate?: string | null; 9 | minDate?: string | null; 10 | orientation?: string; 11 | buttons?: boolean; 12 | autoSelectToday?: number; 13 | title?: string | null; 14 | language?: string; 15 | locales?: { [key: string]: any }; 16 | rangePicker?: boolean | false; 17 | onShow?: (Datepicker: DatepickerInterface) => void; 18 | onHide?: (Datepicker: DatepickerInterface) => void; 19 | } 20 | -------------------------------------------------------------------------------- /src/components/dial/interface.ts: -------------------------------------------------------------------------------- 1 | import { DialOptions, DialTriggerEventTypes, DialTriggerType } from './types'; 2 | 3 | export declare interface DialInterface { 4 | _parentEl: HTMLElement; 5 | _triggerEl: HTMLElement; 6 | _targetEl: HTMLElement; 7 | _options: DialOptions; 8 | _visible: boolean; 9 | 10 | init(): void; 11 | isVisible(): boolean; 12 | isHidden(): boolean; 13 | hide(): void; 14 | show(): void; 15 | toggle(): void; 16 | _getTriggerEventTypes(triggerType: DialTriggerType): DialTriggerEventTypes; 17 | 18 | destroy(): void; 19 | removeInstance(): void; 20 | destroyAndRemoveInstance(): void; 21 | } 22 | -------------------------------------------------------------------------------- /src/components/dial/types.ts: -------------------------------------------------------------------------------- 1 | import { DialInterface } from './interface'; 2 | 3 | export declare type DialTriggerType = 'click' | 'hover' | 'none'; 4 | 5 | export declare type DialTriggerEventTypes = { 6 | showEvents: string[]; 7 | hideEvents: string[]; 8 | }; 9 | 10 | export declare type DialOptions = { 11 | triggerType?: DialTriggerType; 12 | onShow?: (dial: DialInterface) => void; 13 | onHide?: (dial: DialInterface) => void; 14 | onToggle?: (dial: DialInterface) => void; 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/dismiss/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-empty-function */ 2 | import type { DismissOptions } from './types'; 3 | import type { InstanceOptions } from '../../dom/types'; 4 | import { DismissInterface } from './interface'; 5 | import instances from '../../dom/instances'; 6 | 7 | const Default: DismissOptions = { 8 | transition: 'transition-opacity', 9 | duration: 300, 10 | timing: 'ease-out', 11 | onHide: () => {}, 12 | }; 13 | 14 | const DefaultInstanceOptions: InstanceOptions = { 15 | id: null, 16 | override: true, 17 | }; 18 | 19 | class Dismiss implements DismissInterface { 20 | _instanceId: string; 21 | _targetEl: HTMLElement | null; 22 | _triggerEl: HTMLElement | null; 23 | _options: DismissOptions; 24 | _initialized: boolean; 25 | _clickHandler: EventListenerOrEventListenerObject; 26 | 27 | constructor( 28 | targetEl: HTMLElement | null = null, 29 | triggerEl: HTMLElement | null = null, 30 | options: DismissOptions = Default, 31 | instanceOptions: InstanceOptions = DefaultInstanceOptions 32 | ) { 33 | this._instanceId = instanceOptions.id 34 | ? instanceOptions.id 35 | : targetEl.id; 36 | this._targetEl = targetEl; 37 | this._triggerEl = triggerEl; 38 | this._options = { ...Default, ...options }; 39 | this._initialized = false; 40 | this.init(); 41 | instances.addInstance( 42 | 'Dismiss', 43 | this, 44 | this._instanceId, 45 | instanceOptions.override 46 | ); 47 | } 48 | 49 | init() { 50 | if (this._triggerEl && this._targetEl && !this._initialized) { 51 | this._clickHandler = () => { 52 | this.hide(); 53 | }; 54 | this._triggerEl.addEventListener('click', this._clickHandler); 55 | this._initialized = true; 56 | } 57 | } 58 | 59 | destroy() { 60 | if (this._triggerEl && this._initialized) { 61 | this._triggerEl.removeEventListener('click', this._clickHandler); 62 | this._initialized = false; 63 | } 64 | } 65 | 66 | removeInstance() { 67 | instances.removeInstance('Dismiss', this._instanceId); 68 | } 69 | 70 | destroyAndRemoveInstance() { 71 | this.destroy(); 72 | this.removeInstance(); 73 | } 74 | 75 | hide() { 76 | this._targetEl.classList.add( 77 | this._options.transition, 78 | `duration-${this._options.duration}`, 79 | this._options.timing, 80 | 'opacity-0' 81 | ); 82 | setTimeout(() => { 83 | this._targetEl.classList.add('hidden'); 84 | }, this._options.duration); 85 | 86 | // callback function 87 | this._options.onHide(this, this._targetEl); 88 | } 89 | 90 | updateOnHide(callback: () => void) { 91 | this._options.onHide = callback; 92 | } 93 | } 94 | 95 | export function initDismisses() { 96 | document.querySelectorAll('[data-dismiss-target]').forEach(($triggerEl) => { 97 | const targetId = $triggerEl.getAttribute('data-dismiss-target'); 98 | const $dismissEl = document.querySelector(targetId); 99 | 100 | if ($dismissEl) { 101 | new Dismiss($dismissEl as HTMLElement, $triggerEl as HTMLElement); 102 | } else { 103 | console.error( 104 | `The dismiss element with id "${targetId}" does not exist. Please check the data-dismiss-target attribute.` 105 | ); 106 | } 107 | }); 108 | } 109 | 110 | if (typeof window !== 'undefined') { 111 | window.Dismiss = Dismiss; 112 | window.initDismisses = initDismisses; 113 | } 114 | 115 | export default Dismiss; 116 | -------------------------------------------------------------------------------- /src/components/dismiss/interface.ts: -------------------------------------------------------------------------------- 1 | import { DismissOptions } from './types'; 2 | 3 | export declare interface DismissInterface { 4 | _targetEl: HTMLElement | null; 5 | _triggerEl: HTMLElement | null; 6 | _options: DismissOptions; 7 | 8 | init(): void; 9 | hide(): void; 10 | 11 | destroy(): void; 12 | removeInstance(): void; 13 | destroyAndRemoveInstance(): void; 14 | } 15 | -------------------------------------------------------------------------------- /src/components/dismiss/types.ts: -------------------------------------------------------------------------------- 1 | import { DismissInterface } from './interface'; 2 | 3 | export declare type DismissOptions = { 4 | transition?: string; 5 | duration?: number; 6 | timing?: string; 7 | onHide?: (dismiss: DismissInterface, targetEl: HTMLElement) => void; 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/drawer/interface.ts: -------------------------------------------------------------------------------- 1 | import { DrawerOptions, PlacementClasses } from './types'; 2 | 3 | export declare interface DrawerInterface { 4 | // properties 5 | _targetEl: HTMLElement; 6 | _triggerEl: HTMLElement; 7 | _options: DrawerOptions; 8 | _visible: boolean; 9 | 10 | // methods 11 | init(): void; 12 | isVisible(): boolean; 13 | isHidden(): boolean; 14 | hide(): void; 15 | show(): void; 16 | toggle(): void; 17 | _createBackdrop(): void; 18 | _destroyBackdropEl(): void; 19 | _getPlacementClasses(placement: string): PlacementClasses; 20 | 21 | destroy(): void; 22 | removeInstance(): void; 23 | destroyAndRemoveInstance(): void; 24 | 25 | addEventListenerInstance( 26 | element: HTMLElement, 27 | type: string, 28 | handler: EventListenerOrEventListenerObject 29 | ): void; 30 | removeAllEventListenerInstances(): void; 31 | getAllEventListenerInstances(): void; 32 | } 33 | -------------------------------------------------------------------------------- /src/components/drawer/types.ts: -------------------------------------------------------------------------------- 1 | import { DrawerInterface } from './interface'; 2 | 3 | export declare type DrawerOptions = { 4 | placement?: string; 5 | bodyScrolling?: boolean; 6 | backdrop?: boolean; 7 | edge?: boolean; 8 | edgeOffset?: string; 9 | backdropClasses?: string; 10 | onShow?: (drawer: DrawerInterface) => void; 11 | onHide?: (drawer: DrawerInterface) => void; 12 | onToggle?: (drawer: DrawerInterface) => void; 13 | }; 14 | 15 | export declare type PlacementClasses = { 16 | base: string[]; 17 | active: string[]; 18 | inactive: string[]; 19 | }; 20 | -------------------------------------------------------------------------------- /src/components/dropdown/interface.ts: -------------------------------------------------------------------------------- 1 | import { 2 | DropdownOptions, 3 | DropdownTriggerType, 4 | DropdownTriggerEventTypes, 5 | } from './types'; 6 | import type { Instance as PopperInstance } from '@popperjs/core'; 7 | 8 | export declare interface DropdownInterface { 9 | _targetEl: HTMLElement; 10 | _triggerEl: HTMLElement; 11 | _options: DropdownOptions; 12 | _visible: boolean; 13 | _popperInstance: PopperInstance; 14 | _initialized: boolean; 15 | _clickOutsideEventListener: EventListenerOrEventListenerObject; 16 | 17 | init(): void; 18 | _createPopperInstance(): PopperInstance; 19 | _setupEventListeners(): void; 20 | _setupClickOutsideListener(): void; 21 | _removeClickOutsideListener(): void; 22 | _handleClickOutside(ev: Event, targetEl: HTMLElement): void; 23 | _getTriggerEvents( 24 | triggerType: DropdownTriggerType 25 | ): DropdownTriggerEventTypes; 26 | isVisible(): boolean; 27 | toggle(): void; 28 | show(): void; 29 | hide(): void; 30 | 31 | destroy(): void; 32 | removeInstance(): void; 33 | destroyAndRemoveInstance(): void; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/dropdown/types.ts: -------------------------------------------------------------------------------- 1 | import { DropdownInterface } from './interface'; 2 | import type { Placement } from '@popperjs/core'; 3 | 4 | export declare type DropdownTriggerType = 'click' | 'hover' | 'none'; 5 | 6 | export declare type DropdownTriggerEventTypes = { 7 | showEvents: string[]; 8 | hideEvents: string[]; 9 | }; 10 | 11 | export declare type DropdownOptions = { 12 | placement?: Placement; 13 | triggerType?: DropdownTriggerType; 14 | offsetSkidding?: number; 15 | offsetDistance?: number; 16 | ignoreClickOutsideClass?: string | boolean; 17 | delay?: number; 18 | onShow?: (tooltip: DropdownInterface) => void; 19 | onHide?: (tooltip: DropdownInterface) => void; 20 | onToggle?: (tooltip: DropdownInterface) => void; 21 | }; 22 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | import { initAccordions } from './accordion'; 2 | import { initCarousels } from './carousel'; 3 | import { initCopyClipboards } from './clipboard'; 4 | import { initCollapses } from './collapse'; 5 | import { initDials } from './dial'; 6 | import { initDismisses } from './dismiss'; 7 | import { initDrawers } from './drawer'; 8 | import { initDropdowns } from './dropdown'; 9 | import { initInputCounters } from './input-counter'; 10 | import { initModals } from './modal'; 11 | import { initPopovers } from './popover'; 12 | import { initTabs } from './tabs'; 13 | import { initTooltips } from './tooltip'; 14 | import { initDatepickers } from './datepicker'; 15 | 16 | export function initFlowbite() { 17 | initAccordions(); 18 | initCollapses(); 19 | initCarousels(); 20 | initDismisses(); 21 | initDropdowns(); 22 | initModals(); 23 | initDrawers(); 24 | initTabs(); 25 | initTooltips(); 26 | initPopovers(); 27 | initDials(); 28 | initInputCounters(); 29 | initCopyClipboards(); 30 | initDatepickers(); 31 | } 32 | 33 | if (typeof window !== 'undefined') { 34 | window.initFlowbite = initFlowbite; 35 | } 36 | -------------------------------------------------------------------------------- /src/components/input-counter/interface.ts: -------------------------------------------------------------------------------- 1 | import { InputCounterOptions } from './types'; 2 | 3 | export declare interface InputCounterInterface { 4 | _targetEl: HTMLElement | null; 5 | _incrementEl: HTMLElement | null; 6 | _decrementEl: HTMLElement | null; 7 | _options: InputCounterOptions; 8 | 9 | init(): void; 10 | increment(): void; 11 | decrement(): void; 12 | 13 | destroy(): void; 14 | removeInstance(): void; 15 | destroyAndRemoveInstance(): void; 16 | } 17 | -------------------------------------------------------------------------------- /src/components/input-counter/types.ts: -------------------------------------------------------------------------------- 1 | import { InputCounterInterface } from './interface'; 2 | 3 | export declare type InputCounterOptions = { 4 | minValue?: number | null; 5 | maxValue?: number | null; 6 | onIncrement?: (InputCounter: InputCounterInterface) => void; 7 | onDecrement?: (InputCounter: InputCounterInterface) => void; 8 | }; 9 | -------------------------------------------------------------------------------- /src/components/modal/interface.ts: -------------------------------------------------------------------------------- 1 | import { ModalOptions } from './types'; 2 | 3 | export declare interface ModalInterface { 4 | // The HTMLElement that will be used as the modal container 5 | _targetEl: HTMLElement | null; 6 | 7 | // An object that defines the options for the modal, such as its placement and backdrop 8 | _options: ModalOptions; 9 | 10 | // A boolean that indicates whether the modal is currently hidden 11 | _isHidden: boolean; 12 | 13 | // The HTMLElement that will be used as the modal's backdrop 14 | _backdropEl: HTMLElement | null; 15 | 16 | _clickOutsideEventListener: EventListenerOrEventListenerObject; 17 | 18 | _keydownEventListener: EventListenerOrEventListenerObject; 19 | 20 | // Initializes the modal and sets up its event listeners 21 | init(): void; 22 | 23 | // Creates the modal's backdrop element and adds it to the DOM 24 | _createBackdrop(): void; 25 | 26 | // Removes the modal's backdrop element from the DOM 27 | _destroyBackdropEl(): void; 28 | 29 | // Sets up event listeners for the modal to allow it to be closed when clicked outside or the Escape key is pressed 30 | _setupModalCloseEventListeners(): void; 31 | 32 | // Handles clicks outside the modal and hides it if necessary 33 | _handleOutsideClick(target: EventTarget): void; 34 | 35 | // Returns an array of CSS classes that should be applied to the modal based on its placement option 36 | _getPlacementClasses(): string[]; 37 | 38 | // Toggles the visibility of the modal and calls the onToggle callback function 39 | toggle(): void; 40 | 41 | // Shows the modal and calls the onShow callback function 42 | show(): void; 43 | 44 | // Hides the modal and calls the onHide callback function 45 | hide(): void; 46 | 47 | // return true if modal is hidden 48 | isHidden(): boolean; 49 | 50 | // return true if modal is visible 51 | isVisible(): boolean; 52 | 53 | destroy(): void; 54 | removeInstance(): void; 55 | destroyAndRemoveInstance(): void; 56 | addEventListenerInstance( 57 | element: HTMLElement, 58 | type: string, 59 | handler: EventListenerOrEventListenerObject 60 | ): void; 61 | removeAllEventListenerInstances(): void; 62 | getAllEventListenerInstances(): void; 63 | } 64 | -------------------------------------------------------------------------------- /src/components/modal/types.ts: -------------------------------------------------------------------------------- 1 | import { ModalInterface } from './interface'; 2 | 3 | export declare type modalBackdrop = 'static' | 'dynamic'; 4 | export declare type modalPlacement = 5 | | 'top-left' 6 | | 'top-center' 7 | | 'top-right' 8 | | 'center-left' 9 | | 'center' 10 | | 'center-right' 11 | | 'bottom-left' 12 | | 'bottom-center' 13 | | 'bottom-right'; 14 | 15 | export declare type ModalOptions = { 16 | placement?: modalPlacement; 17 | backdropClasses?: string; 18 | backdrop?: modalBackdrop; 19 | closable?: boolean; 20 | onShow?: (modal: ModalInterface) => void; 21 | onHide?: (modal: ModalInterface) => void; 22 | onToggle?: (modal: ModalInterface) => void; 23 | }; 24 | -------------------------------------------------------------------------------- /src/components/popover/interface.ts: -------------------------------------------------------------------------------- 1 | import { 2 | PopoverOptions, 3 | PopoverTriggerType, 4 | PopoverTriggerEventTypes, 5 | } from './types'; 6 | import type { Instance as PopperInstance } from '@popperjs/core'; 7 | 8 | export declare interface PopoverInterface { 9 | _targetEl: HTMLElement | null; 10 | _triggerEl: HTMLElement | null; 11 | _options: PopoverOptions; 12 | _popperInstance: PopperInstance; 13 | _clickOutsideEventListener: EventListenerOrEventListenerObject; 14 | _keydownEventListener: EventListenerOrEventListenerObject; 15 | 16 | init(): void; 17 | _setupEventListeners(): void; 18 | _setupClickOutsideListener(): void; 19 | _removeClickOutsideListener(): void; 20 | _setupKeydownListener(): void; 21 | _removeKeydownListener(): void; 22 | _handleClickOutside(ev: Event, targetEl: HTMLElement): void; 23 | _getTriggerEvents( 24 | triggerType: PopoverTriggerType 25 | ): PopoverTriggerEventTypes; 26 | isVisible(): boolean; 27 | show(): void; 28 | hide(): void; 29 | toggle(): void; 30 | 31 | destroy(): void; 32 | removeInstance(): void; 33 | destroyAndRemoveInstance(): void; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/popover/types.ts: -------------------------------------------------------------------------------- 1 | import { PopoverInterface } from './interface'; 2 | import type { Placement } from '@popperjs/core'; 3 | 4 | export declare type PopoverTriggerType = 'click' | 'hover' | 'none'; 5 | 6 | export declare type PopoverTriggerEventTypes = { 7 | showEvents: string[]; 8 | hideEvents: string[]; 9 | }; 10 | 11 | export declare type PopoverOptions = { 12 | placement?: Placement; 13 | offset?: number; 14 | triggerType?: PopoverTriggerType; 15 | onShow?: (tooltip: PopoverInterface) => void; 16 | onHide?: (tooltip: PopoverInterface) => void; 17 | onToggle?: (tooltip: PopoverInterface) => void; 18 | }; 19 | -------------------------------------------------------------------------------- /src/components/tabs/interface.ts: -------------------------------------------------------------------------------- 1 | import { TabItem, TabsOptions } from './types'; 2 | 3 | export declare interface TabsInterface { 4 | _tabsEl: HTMLElement; 5 | _items: TabItem[]; 6 | _activeTab: TabItem; 7 | _options: TabsOptions; 8 | 9 | init(): void; 10 | setActiveTab(tab: TabItem): void; 11 | getActiveTab(): TabItem; 12 | getTab(id: string): TabItem; 13 | show(id: string, forceShow?: boolean): void; 14 | 15 | destroy(): void; 16 | removeInstance(): void; 17 | destroyAndRemoveInstance(): void; 18 | } 19 | -------------------------------------------------------------------------------- /src/components/tabs/types.ts: -------------------------------------------------------------------------------- 1 | import { TabsInterface } from './interface'; 2 | 3 | export declare type TabsOptions = { 4 | defaultTabId?: string; 5 | activeClasses?: string; 6 | inactiveClasses?: string; 7 | onShow?: (tabs: TabsInterface, tab: TabItem) => void; 8 | }; 9 | 10 | export declare type TabItem = { 11 | id: string; 12 | triggerEl: HTMLElement; 13 | targetEl: HTMLElement; 14 | }; 15 | -------------------------------------------------------------------------------- /src/components/tooltip/interface.ts: -------------------------------------------------------------------------------- 1 | import { 2 | TooltipOptions, 3 | TooltipTriggerType, 4 | TooltipTriggerEventTypes, 5 | } from './types'; 6 | import type { Instance as PopperInstance } from '@popperjs/core'; 7 | 8 | export declare interface TooltipInterface { 9 | _targetEl: HTMLElement | null; 10 | _triggerEl: HTMLElement | null; 11 | _options: TooltipOptions; 12 | _popperInstance: PopperInstance; 13 | _clickOutsideEventListener: EventListenerOrEventListenerObject; 14 | _keydownEventListener: EventListenerOrEventListenerObject; 15 | 16 | init(): void; 17 | _setupEventListeners(): void; 18 | _setupClickOutsideListener(): void; 19 | _removeClickOutsideListener(): void; 20 | _setupKeydownListener(): void; 21 | _removeKeydownListener(): void; 22 | _handleClickOutside(ev: Event, targetEl: HTMLElement): void; 23 | _getTriggerEvents( 24 | triggerType: TooltipTriggerType 25 | ): TooltipTriggerEventTypes; 26 | isVisible(): boolean; 27 | show(): void; 28 | hide(): void; 29 | toggle(): void; 30 | 31 | destroy(): void; 32 | removeInstance(): void; 33 | destroyAndRemoveInstance(): void; 34 | } 35 | -------------------------------------------------------------------------------- /src/components/tooltip/types.ts: -------------------------------------------------------------------------------- 1 | import { TooltipInterface } from './interface'; 2 | import type { Placement } from '@popperjs/core'; 3 | 4 | export declare type TooltipTriggerType = 'click' | 'hover' | 'none'; 5 | 6 | export declare type TooltipTriggerEventTypes = { 7 | showEvents: string[]; 8 | hideEvents: string[]; 9 | }; 10 | 11 | export declare type TooltipOptions = { 12 | placement?: Placement; 13 | triggerType?: TooltipTriggerType; 14 | onShow?: (tooltip: TooltipInterface) => void; 15 | onHide?: (tooltip: TooltipInterface) => void; 16 | onToggle?: (tooltip: TooltipInterface) => void; 17 | }; 18 | -------------------------------------------------------------------------------- /src/config/global.ts: -------------------------------------------------------------------------------- 1 | import Accordion from '../components/accordion'; 2 | import Carousel from '../components/carousel'; 3 | import Collapse from '../components/collapse'; 4 | import Dial from '../components/dial'; 5 | import Dismiss from '../components/dismiss'; 6 | import Drawer from '../components/drawer'; 7 | import Dropdown from '../components/dropdown'; 8 | import Modal from '../components/modal'; 9 | import Popover from '../components/popover'; 10 | import Tabs from '../components/tabs'; 11 | import Tooltip from '../components/tooltip'; 12 | import InputCounter from '../components/input-counter'; 13 | import Clipboard from '../components/clipboard'; 14 | import Datepicker from '../components/datepicker'; 15 | 16 | declare global { 17 | interface Window { 18 | Accordion: typeof Accordion; 19 | Carousel: typeof Carousel; 20 | Collapse: typeof Collapse; 21 | Dial: typeof Dial; 22 | Dismiss: typeof Dismiss; 23 | Drawer: typeof Drawer; 24 | Dropdown: typeof Dropdown; 25 | Modal: typeof Modal; 26 | Popover: typeof Popover; 27 | Tabs: typeof Tabs; 28 | Tooltip: typeof Tooltip; 29 | InputCounter: typeof InputCounter; 30 | CopyClipboard: typeof Clipboard; 31 | Datepicker: typeof Datepicker; 32 | initAccordions: () => void; 33 | initCarousels: () => void; 34 | initCollapses: () => void; 35 | initDials: () => void; 36 | initDismisses: () => void; 37 | initDrawers: () => void; 38 | initDropdowns: () => void; 39 | initModals: () => void; 40 | initPopovers: () => void; 41 | initTabs: () => void; 42 | initTooltips: () => void; 43 | initInputCounters: () => void; 44 | initClipboards: () => void; 45 | initDatepickers: () => void; 46 | initFlowbite: () => void; 47 | FlowbiteInstances: any; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/dom/events.ts: -------------------------------------------------------------------------------- 1 | class Events { 2 | private _eventType: string; 3 | private _eventFunctions: EventListener[]; 4 | 5 | constructor(eventType: string, eventFunctions: EventListener[] = []) { 6 | this._eventType = eventType; 7 | this._eventFunctions = eventFunctions; 8 | } 9 | 10 | init() { 11 | this._eventFunctions.forEach((eventFunction) => { 12 | if (typeof window !== 'undefined') { 13 | window.addEventListener(this._eventType, eventFunction); 14 | } 15 | }); 16 | } 17 | } 18 | 19 | export default Events; 20 | -------------------------------------------------------------------------------- /src/dom/types.ts: -------------------------------------------------------------------------------- 1 | export declare type InstanceOptions = { 2 | id?: string; 3 | override?: boolean; 4 | }; 5 | 6 | export declare type EventListenerInstance = { 7 | element: HTMLElement; 8 | type: string; 9 | handler: EventListenerOrEventListenerObject; 10 | }; 11 | -------------------------------------------------------------------------------- /src/flowbite.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | @plugin "./../plugin.js"; 3 | @plugin "flowbite-typography"; 4 | 5 | @theme { 6 | --font-sans: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 7 | --font-body: 'Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; 8 | --font-mono: 'ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace'; 9 | --spacing-2xl: 16rem; 10 | --spacing-8xl: 90rem; 11 | --text-2xs: 0.625rem; 12 | } 13 | 14 | /* 15 | “Have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.” 16 | ― Steve Jobs 17 | */ 18 | -------------------------------------------------------------------------------- /src/index.phoenix.ts: -------------------------------------------------------------------------------- 1 | // core components 2 | import Accordion, { initAccordions } from './components/accordion'; 3 | import Carousel, { initCarousels } from './components/carousel'; 4 | import Collapse, { initCollapses } from './components/collapse'; 5 | import Dial, { initDials } from './components/dial'; 6 | import Dismiss, { initDismisses } from './components/dismiss'; 7 | import Drawer, { initDrawers } from './components/drawer'; 8 | import Dropdown, { initDropdowns } from './components/dropdown'; 9 | import Modal, { initModals } from './components/modal'; 10 | import Popover, { initPopovers } from './components/popover'; 11 | import Tabs, { initTabs } from './components/tabs'; 12 | import Tooltip, { initTooltips } from './components/tooltip'; 13 | import InputCounter, { initInputCounters } from './components/input-counter'; 14 | import CopyClipboard, { initCopyClipboards } from './components/clipboard'; 15 | import Datepicker, { initDatepickers } from './components/datepicker'; 16 | import './components/index'; 17 | import Events from './dom/events'; 18 | 19 | const liveViewLoadEvents = new Events('phx:page-loading-stop', [ 20 | initAccordions, 21 | initCollapses, 22 | initCarousels, 23 | initDismisses, 24 | initDropdowns, 25 | initModals, 26 | initDrawers, 27 | initTabs, 28 | initTooltips, 29 | initPopovers, 30 | initDials, 31 | initInputCounters, 32 | initCopyClipboards, 33 | initDatepickers, 34 | ]); 35 | liveViewLoadEvents.init(); 36 | 37 | const regularViewLoadEvents = new Events('load', [ 38 | initAccordions, 39 | initCollapses, 40 | initCarousels, 41 | initDismisses, 42 | initDropdowns, 43 | initModals, 44 | initDrawers, 45 | initTabs, 46 | initTooltips, 47 | initPopovers, 48 | initDials, 49 | initInputCounters, 50 | initCopyClipboards, 51 | initDatepickers, 52 | ]); 53 | regularViewLoadEvents.init(); 54 | 55 | export default { 56 | Accordion, 57 | Carousel, 58 | Collapse, 59 | Dial, 60 | Drawer, 61 | Dismiss, 62 | Dropdown, 63 | Modal, 64 | Popover, 65 | Tabs, 66 | Tooltip, 67 | InputCounter, 68 | CopyClipboard, 69 | Datepicker, 70 | Events, 71 | }; 72 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Events from './dom/events'; 2 | import { initAccordions } from './components/accordion'; 3 | import { initCollapses } from './components/collapse'; 4 | import { initCarousels } from './components/carousel'; 5 | import { initDismisses } from './components/dismiss'; 6 | import { initDropdowns } from './components/dropdown'; 7 | import { initModals } from './components/modal'; 8 | import { initDrawers } from './components/drawer'; 9 | import { initTabs } from './components/tabs'; 10 | import { initTooltips } from './components/tooltip'; 11 | import { initPopovers } from './components/popover'; 12 | import { initDials } from './components/dial'; 13 | import { initInputCounters } from './components/input-counter'; 14 | import { initCopyClipboards } from './components/clipboard'; 15 | import { initDatepickers } from './components/datepicker'; 16 | import './components/index'; 17 | import './types/declarations'; 18 | 19 | // setup events for data attributes 20 | const events = new Events('load', [ 21 | initAccordions, 22 | initCollapses, 23 | initCarousels, 24 | initDismisses, 25 | initDropdowns, 26 | initModals, 27 | initDrawers, 28 | initTabs, 29 | initTooltips, 30 | initPopovers, 31 | initDials, 32 | initInputCounters, 33 | initCopyClipboards, 34 | initDatepickers, 35 | ]); 36 | events.init(); 37 | 38 | // export all components 39 | export { default as Accordion } from './components/accordion'; 40 | export { default as Carousel } from './components/carousel'; 41 | export { default as Collapse } from './components/collapse'; 42 | export { default as Dial } from './components/dial'; 43 | export { default as Dismiss } from './components/dismiss'; 44 | export { default as Drawer } from './components/drawer'; 45 | export { default as Dropdown } from './components/dropdown'; 46 | export { default as Modal } from './components/modal'; 47 | export { default as Popover } from './components/popover'; 48 | export { default as Tabs } from './components/tabs'; 49 | export { default as Tooltip } from './components/tooltip'; 50 | export { default as InputCounter } from './components/input-counter'; 51 | export { default as CopyClipboard } from './components/clipboard'; 52 | export { default as Datepicker } from './components/datepicker'; 53 | 54 | // export all types 55 | export * from './components/accordion/types'; 56 | export * from './components/carousel/types'; 57 | export * from './components/collapse/types'; 58 | export * from './components/dial/types'; 59 | export * from './components/dismiss/types'; 60 | export * from './components/drawer/types'; 61 | export * from './components/dropdown/types'; 62 | export * from './components/modal/types'; 63 | export * from './components/popover/types'; 64 | export * from './components/tabs/types'; 65 | export * from './components/tooltip/types'; 66 | export * from './components/input-counter/types'; 67 | export * from './components/clipboard/types'; 68 | export * from './components/datepicker/types'; 69 | export * from './dom/types'; 70 | 71 | // export all interfaces 72 | export * from './components/accordion/interface'; 73 | export * from './components/carousel/interface'; 74 | export * from './components/collapse/interface'; 75 | export * from './components/dial/interface'; 76 | export * from './components/dismiss/interface'; 77 | export * from './components/drawer/interface'; 78 | export * from './components/dropdown/interface'; 79 | export * from './components/modal/interface'; 80 | export * from './components/popover/interface'; 81 | export * from './components/tabs/interface'; 82 | export * from './components/tooltip/interface'; 83 | export * from './components/input-counter/interface'; 84 | export * from './components/clipboard/interface'; 85 | export * from './components/datepicker/interface'; 86 | 87 | // export init functions 88 | export { initAccordions } from './components/accordion'; 89 | export { initCarousels } from './components/carousel'; 90 | export { initCollapses } from './components/collapse'; 91 | export { initDials } from './components/dial'; 92 | export { initDismisses } from './components/dismiss'; 93 | export { initDrawers } from './components/drawer'; 94 | export { initDropdowns } from './components/dropdown'; 95 | export { initModals } from './components/modal'; 96 | export { initPopovers } from './components/popover'; 97 | export { initTabs } from './components/tabs'; 98 | export { initTooltips } from './components/tooltip'; 99 | export { initInputCounters } from './components/input-counter'; 100 | export { initCopyClipboards } from './components/clipboard'; 101 | export { initDatepickers } from './components/datepicker'; 102 | 103 | // export all init functions 104 | export { initFlowbite } from './components/index'; 105 | -------------------------------------------------------------------------------- /src/index.turbo.ts: -------------------------------------------------------------------------------- 1 | // core components 2 | import Accordion from './components/accordion'; 3 | import Carousel from './components/carousel'; 4 | import Collapse from './components/collapse'; 5 | import Dial from './components/dial'; 6 | import Dismiss from './components/dismiss'; 7 | import Drawer from './components/drawer'; 8 | import Dropdown from './components/dropdown'; 9 | import Modal from './components/modal'; 10 | import Popover from './components/popover'; 11 | import Tabs from './components/tabs'; 12 | import Tooltip from './components/tooltip'; 13 | import InputCounter from './components/input-counter'; 14 | import CopyClipboard from './components/clipboard'; 15 | import Datepicker from './components/datepicker'; 16 | import { initFlowbite } from './components/index'; 17 | import Events from './dom/events'; 18 | 19 | // Since turbo maintainers refuse to add this event, we'll add it ourselves 20 | // https://discuss.hotwired.dev/t/event-to-know-a-turbo-stream-has-been-rendered/1554/10 21 | const afterRenderEvent = new Event('turbo:after-stream-render'); 22 | addEventListener('turbo:before-stream-render', (event: CustomEvent) => { 23 | const originalRender = event.detail.render; 24 | 25 | event.detail.render = function (streamElement: Element) { 26 | originalRender(streamElement); 27 | window.dispatchEvent(afterRenderEvent); 28 | }; 29 | }); 30 | 31 | const turboLoadEvents = new Events('turbo:load', [initFlowbite]); 32 | turboLoadEvents.init(); 33 | 34 | const turboFrameLoadEvents = new Events('turbo:frame-load', [initFlowbite]); 35 | turboFrameLoadEvents.init(); 36 | 37 | const turboStreamLoadEvents = new Events('turbo:after-stream-render', [ 38 | initFlowbite, 39 | ]); 40 | turboStreamLoadEvents.init(); 41 | 42 | export default { 43 | Accordion, 44 | Carousel, 45 | Collapse, 46 | Dial, 47 | Drawer, 48 | Dismiss, 49 | Dropdown, 50 | Modal, 51 | Popover, 52 | Tabs, 53 | Tooltip, 54 | InputCounter, 55 | CopyClipboard, 56 | Datepicker, 57 | Events, 58 | }; 59 | -------------------------------------------------------------------------------- /src/index.umd.ts: -------------------------------------------------------------------------------- 1 | import './flowbite.css'; 2 | 3 | // core components 4 | import Accordion, { initAccordions } from './components/accordion'; 5 | import Carousel, { initCarousels } from './components/carousel'; 6 | import Collapse, { initCollapses } from './components/collapse'; 7 | import Dial, { initDials } from './components/dial'; 8 | import Dismiss, { initDismisses } from './components/dismiss'; 9 | import Drawer, { initDrawers } from './components/drawer'; 10 | import Dropdown, { initDropdowns } from './components/dropdown'; 11 | import Modal, { initModals } from './components/modal'; 12 | import Popover, { initPopovers } from './components/popover'; 13 | import Tabs, { initTabs } from './components/tabs'; 14 | import Tooltip, { initTooltips } from './components/tooltip'; 15 | import InputCounter, { initInputCounters } from './components/input-counter'; 16 | import CopyClipboard, { initCopyClipboards } from './components/clipboard'; 17 | import Datepicker, { initDatepickers } from './components/datepicker'; 18 | import './components/index'; 19 | import Events from './dom/events'; 20 | 21 | const events = new Events('load', [ 22 | initAccordions, 23 | initCollapses, 24 | initCarousels, 25 | initDismisses, 26 | initDropdowns, 27 | initModals, 28 | initDrawers, 29 | initTabs, 30 | initTooltips, 31 | initPopovers, 32 | initDials, 33 | initCopyClipboards, 34 | initInputCounters, 35 | initDatepickers, 36 | ]); 37 | events.init(); 38 | 39 | export default { 40 | Accordion, 41 | Carousel, 42 | Collapse, 43 | Dial, 44 | Drawer, 45 | Dismiss, 46 | Dropdown, 47 | Modal, 48 | Popover, 49 | Tabs, 50 | Tooltip, 51 | InputCounter, 52 | CopyClipboard, 53 | Datepicker, 54 | Events, 55 | }; 56 | -------------------------------------------------------------------------------- /src/themes/default.css: -------------------------------------------------------------------------------- 1 | @theme { 2 | --color-transparent: transparent; 3 | --color-white: #ffffff; 4 | --color-black: #000000; 5 | --color-gray-50: #F9FAFB; 6 | --color-gray-100: #F3F4F6; 7 | --color-gray-200: #E5E7EB; 8 | --color-gray-300: #D1D5DB; 9 | --color-gray-400: #9CA3AF; 10 | --color-gray-500: #6B7280; 11 | --color-gray-600: #4B5563; 12 | --color-gray-700: #374151; 13 | --color-gray-800: #1F2937; 14 | --color-gray-900: #111827; 15 | --color-red-50: #FEF2F2; 16 | --color-red-100: #FEE2E2; 17 | --color-red-200: #FECACA; 18 | --color-red-300: #FCA5A5; 19 | --color-red-400: #F87171; 20 | --color-red-500: #EF4444; 21 | --color-red-600: #DC2626; 22 | --color-red-700: #B91C1C; 23 | --color-red-800: #991B1B; 24 | --color-red-900: #7F1D1D; 25 | --color-yellow-50: #FFFBEB; 26 | --color-yellow-100: #FEF3C7; 27 | --color-yellow-200: #FDE68A; 28 | --color-yellow-300: #FCD34D; 29 | --color-yellow-400: #FBBF24; 30 | --color-yellow-500: #F59E0B; 31 | --color-yellow-600: #D97706; 32 | --color-yellow-700: #B45309; 33 | --color-yellow-800: #92400E; 34 | --color-yellow-900: #78350F; 35 | --color-green-50: #ECFDF5; 36 | --color-green-100: #D1FAE5; 37 | --color-green-200: #A7F3D0; 38 | --color-green-300: #6EE7B7; 39 | --color-green-400: #34D399; 40 | --color-green-500: #10B981; 41 | --color-green-600: #059669; 42 | --color-green-700: #047857; 43 | --color-green-800: #065F46; 44 | --color-green-900: #064E3B; 45 | --color-blue-50: #EFF6FF; 46 | --color-blue-100: #DBEAFE; 47 | --color-blue-200: #BFDBFE; 48 | --color-blue-300: #93C5FD; 49 | --color-blue-400: #60A5FA; 50 | --color-blue-500: #3B82F6; 51 | --color-blue-600: #2563EB; 52 | --color-blue-700: #1D4ED8; 53 | --color-blue-800: #1E40AF; 54 | --color-blue-900: #1E3A8A; 55 | --color-indigo-50: #EEF2FF; 56 | --color-indigo-100: #E0E7FF; 57 | --color-indigo-200: #C7D2FE; 58 | --color-indigo-300: #A5B4FC; 59 | --color-indigo-400: #818CF8; 60 | --color-indigo-500: #6366F1; 61 | --color-indigo-600: #4F46E5; 62 | --color-indigo-700: #4338CA; 63 | --color-indigo-800: #3730A3; 64 | --color-indigo-900: #312E81; 65 | --color-purple-50: #F5F3FF; 66 | --color-purple-100: #EDE9FE; 67 | --color-purple-200: #DDD6FE; 68 | --color-purple-300: #C4B5FD; 69 | --color-purple-400: #A78BFA; 70 | --color-purple-500: #8B5CF6; 71 | --color-purple-600: #7C3AED; 72 | --color-purple-700: #6D28D9; 73 | --color-purple-800: #5B21B6; 74 | --color-purple-900: #4C1D95; 75 | --color-pink-50: #FDF2F8; 76 | --color-pink-100: #FCE7F3; 77 | --color-pink-200: #FBCFE8; 78 | --color-pink-300: #F9A8D4; 79 | --color-pink-400: #F472B6; 80 | --color-pink-500: #EC4899; 81 | --color-pink-600: #DB2777; 82 | --color-pink-700: #BE185D; 83 | --color-pink-800: #9D174D; 84 | --color-pink-900: #831843; 85 | --color-orange-50: #FFFAF0; 86 | --color-orange-100: #FEEBC8; 87 | --color-orange-200: #FBD38D; 88 | --color-orange-300: #F6AD55; 89 | --color-orange-400: #ED8936; 90 | --color-orange-500: #DD6B20; 91 | --color-orange-600: #C05621; 92 | --color-orange-700: #9C4221; 93 | --color-orange-800: #7B341E; 94 | --color-orange-900: #652B19; 95 | --color-cyan-50: #ECFEFF; 96 | --color-cyan-100: #CFFAFE; 97 | --color-cyan-200: #A5F3FC; 98 | --color-cyan-300: #67E8F9; 99 | --color-cyan-400: #22D3EE; 100 | --color-cyan-500: #06B6D4; 101 | --color-cyan-600: #0891B2; 102 | --color-cyan-700: #0E7490; 103 | --color-cyan-800: #155E75; 104 | --color-cyan-900: #164E63; 105 | --color-teal-50: #F0FDFA; 106 | --color-teal-100: #CCFBF1; 107 | --color-teal-200: #99F6E4; 108 | --color-teal-300: #5EEAD4; 109 | --color-teal-400: #2DD4BF; 110 | --color-teal-500: #14B8A6; 111 | --color-teal-600: #0D9488; 112 | --color-teal-700: #0F766E; 113 | --color-teal-800: #115E59; 114 | --color-teal-900: #134E4A; 115 | } 116 | -------------------------------------------------------------------------------- /src/types/declarations.ts: -------------------------------------------------------------------------------- 1 | declare module 'flowbite-datepicker' { 2 | export class Datepicker { 3 | constructor(element: HTMLElement, options: any); 4 | destroy(): void; 5 | show(): void; 6 | hide(): void; 7 | setDate(date: string): void; 8 | getDate(): string; 9 | } 10 | 11 | export class DateRangePicker { 12 | constructor(element: HTMLElement, options: any); 13 | destroy(): void; 14 | hide(): void; 15 | show(): void; 16 | setDates(dates: string[]): void; 17 | getDates(): string[]; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /static/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-chrome-192x192.png -------------------------------------------------------------------------------- /static/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-chrome-512x512.png -------------------------------------------------------------------------------- /static/android-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-icon-144x144.png -------------------------------------------------------------------------------- /static/android-icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-icon-192x192.png -------------------------------------------------------------------------------- /static/android-icon-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-icon-36x36.png -------------------------------------------------------------------------------- /static/android-icon-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-icon-48x48.png -------------------------------------------------------------------------------- /static/android-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-icon-72x72.png -------------------------------------------------------------------------------- /static/android-icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/android-icon-96x96.png -------------------------------------------------------------------------------- /static/apple-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-114x114.png -------------------------------------------------------------------------------- /static/apple-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-120x120.png -------------------------------------------------------------------------------- /static/apple-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-144x144.png -------------------------------------------------------------------------------- /static/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-152x152.png -------------------------------------------------------------------------------- /static/apple-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-180x180.png -------------------------------------------------------------------------------- /static/apple-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-57x57.png -------------------------------------------------------------------------------- /static/apple-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-60x60.png -------------------------------------------------------------------------------- /static/apple-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-72x72.png -------------------------------------------------------------------------------- /static/apple-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-76x76.png -------------------------------------------------------------------------------- /static/apple-icon-precomposed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon-precomposed.png -------------------------------------------------------------------------------- /static/apple-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-icon.png -------------------------------------------------------------------------------- /static/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/apple-touch-icon.png -------------------------------------------------------------------------------- /static/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | #ffffff -------------------------------------------------------------------------------- /static/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/favicon-16x16.png -------------------------------------------------------------------------------- /static/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/favicon-32x32.png -------------------------------------------------------------------------------- /static/favicon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/favicon-96x96.png -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/favicon.ico -------------------------------------------------------------------------------- /static/images/blog/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/blog/image-1.jpg -------------------------------------------------------------------------------- /static/images/blog/image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/blog/image-2.jpg -------------------------------------------------------------------------------- /static/images/blog/image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/blog/image-3.jpg -------------------------------------------------------------------------------- /static/images/blog/image-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/blog/image-4.jpg -------------------------------------------------------------------------------- /static/images/blog/image-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/blog/image-7.jpg -------------------------------------------------------------------------------- /static/images/carousel/carousel-1.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/images/carousel/carousel-2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/images/carousel/carousel-3.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/images/carousel/carousel-4.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/images/carousel/carousel-5.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/images/chatbubble/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/chatbubble/calendar.png -------------------------------------------------------------------------------- /static/images/dashboard-overview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/dashboard-overview.png -------------------------------------------------------------------------------- /static/images/examples/image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-1.jpg -------------------------------------------------------------------------------- /static/images/examples/image-1@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-1@2x.jpg -------------------------------------------------------------------------------- /static/images/examples/image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-2.jpg -------------------------------------------------------------------------------- /static/images/examples/image-2@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-2@2x.jpg -------------------------------------------------------------------------------- /static/images/examples/image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-3.jpg -------------------------------------------------------------------------------- /static/images/examples/image-3@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-3@2x.jpg -------------------------------------------------------------------------------- /static/images/examples/image-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-4.jpg -------------------------------------------------------------------------------- /static/images/examples/image-4@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-4@2x.jpg -------------------------------------------------------------------------------- /static/images/examples/image-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/examples/image-5.jpg -------------------------------------------------------------------------------- /static/images/gradients/mesh-gradient-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/gradients/mesh-gradient-1.png -------------------------------------------------------------------------------- /static/images/gradients/mesh-gradient-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/gradients/mesh-gradient-2.png -------------------------------------------------------------------------------- /static/images/gradients/mesh-gradient-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/gradients/mesh-gradient-3.png -------------------------------------------------------------------------------- /static/images/gradients/mesh-gradient-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/gradients/mesh-gradient-4.png -------------------------------------------------------------------------------- /static/images/gradients/mesh-gradient-5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/gradients/mesh-gradient-5.png -------------------------------------------------------------------------------- /static/images/misc/flowbite-yt-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/misc/flowbite-yt-screenshot.png -------------------------------------------------------------------------------- /static/images/og-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/og-image.png -------------------------------------------------------------------------------- /static/images/people/profile-picture-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/people/profile-picture-1.jpg -------------------------------------------------------------------------------- /static/images/people/profile-picture-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/people/profile-picture-2.jpg -------------------------------------------------------------------------------- /static/images/people/profile-picture-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/people/profile-picture-3.jpg -------------------------------------------------------------------------------- /static/images/people/profile-picture-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/people/profile-picture-4.jpg -------------------------------------------------------------------------------- /static/images/people/profile-picture-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/people/profile-picture-5.jpg -------------------------------------------------------------------------------- /static/images/popovers/italy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/popovers/italy.png -------------------------------------------------------------------------------- /static/images/products/apple-watch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/products/apple-watch.png -------------------------------------------------------------------------------- /static/images/products/imac.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/products/imac.png -------------------------------------------------------------------------------- /static/images/products/iphone-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/images/products/iphone-12.png -------------------------------------------------------------------------------- /static/images/themesberg.svg: -------------------------------------------------------------------------------- 1 | logo -------------------------------------------------------------------------------- /static/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "App", 3 | "icons": [ 4 | { 5 | "src": "\/android-icon-36x36.png", 6 | "sizes": "36x36", 7 | "type": "image\/png", 8 | "density": "0.75" 9 | }, 10 | { 11 | "src": "\/android-icon-48x48.png", 12 | "sizes": "48x48", 13 | "type": "image\/png", 14 | "density": "1.0" 15 | }, 16 | { 17 | "src": "\/android-icon-72x72.png", 18 | "sizes": "72x72", 19 | "type": "image\/png", 20 | "density": "1.5" 21 | }, 22 | { 23 | "src": "\/android-icon-96x96.png", 24 | "sizes": "96x96", 25 | "type": "image\/png", 26 | "density": "2.0" 27 | }, 28 | { 29 | "src": "\/android-icon-144x144.png", 30 | "sizes": "144x144", 31 | "type": "image\/png", 32 | "density": "3.0" 33 | }, 34 | { 35 | "src": "\/android-icon-192x192.png", 36 | "sizes": "192x192", 37 | "type": "image\/png", 38 | "density": "4.0" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /static/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/ms-icon-144x144.png -------------------------------------------------------------------------------- /static/ms-icon-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/ms-icon-150x150.png -------------------------------------------------------------------------------- /static/ms-icon-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/ms-icon-310x310.png -------------------------------------------------------------------------------- /static/ms-icon-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/ms-icon-70x70.png -------------------------------------------------------------------------------- /static/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/mstile-150x150.png -------------------------------------------------------------------------------- /static/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.14, written by Peter Selinger 2001-2017 9 | 10 | 12 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /static/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Flowbite", 3 | "short_name": "Flowbite", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-512x512.png", 12 | "sizes": "512x512", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /static/sw.js: -------------------------------------------------------------------------------- 1 | // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT 2 | // IT'S ALL JUST JUNK FOR OUR DOCS! 3 | // ++++++++++++++++++++++++++++++++++++++++++ 4 | 5 | (function () { 6 | 'use strict'; 7 | 8 | if ('serviceWorker' in navigator) { 9 | window.addEventListener('load', function () { 10 | navigator.serviceWorker 11 | .getRegistrations() 12 | .then(function (registrations) { 13 | for (var registration of registrations) { 14 | registration 15 | .unregister() 16 | .then(function () { 17 | return self.clients.matchAll(); 18 | }) 19 | .then(function (clients) { 20 | clients.forEach(function (client) { 21 | if (client.url && 'navigate' in client) { 22 | client.navigate(client.url); 23 | } 24 | }); 25 | }); 26 | } 27 | }); 28 | }); 29 | } 30 | })(); 31 | -------------------------------------------------------------------------------- /static/videos/flowbite.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themesberg/flowbite/62c6032b8dc5f139653b3cf7d09a7e26e3a76e97/static/videos/flowbite.mp4 -------------------------------------------------------------------------------- /syntax.css: -------------------------------------------------------------------------------- 1 | /* Background */ .chroma { color: #272822; background-color: #fafafa } 2 | /* Other */ .chroma .x { } 3 | /* Error */ .chroma .err { color: #960050; background-color: #1e0010 } 4 | /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } 5 | /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } 6 | /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } 7 | /* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } 8 | /* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f } 9 | /* Keyword */ .chroma .k { color: #00a8c8 } 10 | /* KeywordConstant */ .chroma .kc { color: #00a8c8 } 11 | /* KeywordDeclaration */ .chroma .kd { color: #00a8c8 } 12 | /* KeywordNamespace */ .chroma .kn { color: #f92672 } 13 | /* KeywordPseudo */ .chroma .kp { color: #00a8c8 } 14 | /* KeywordReserved */ .chroma .kr { color: #00a8c8 } 15 | /* KeywordType */ .chroma .kt { color: #00a8c8 } 16 | /* Name */ .chroma .n { color: #111111 } 17 | /* NameAttribute */ .chroma .na { color: #75af00 } 18 | /* NameBuiltin */ .chroma .nb { color: #111111 } 19 | /* NameBuiltinPseudo */ .chroma .bp { color: #111111 } 20 | /* NameClass */ .chroma .nc { color: #75af00 } 21 | /* NameConstant */ .chroma .no { color: #00a8c8 } 22 | /* NameDecorator */ .chroma .nd { color: #75af00 } 23 | /* NameEntity */ .chroma .ni { color: #111111 } 24 | /* NameException */ .chroma .ne { color: #75af00 } 25 | /* NameFunction */ .chroma .nf { color: #75af00 } 26 | /* NameFunctionMagic */ .chroma .fm { color: #111111 } 27 | /* NameLabel */ .chroma .nl { color: #111111 } 28 | /* NameNamespace */ .chroma .nn { color: #111111 } 29 | /* NameOther */ .chroma .nx { color: #75af00 } 30 | /* NameProperty */ .chroma .py { color: #111111 } 31 | /* NameTag */ .chroma .nt { color: #f92672 } 32 | /* NameVariable */ .chroma .nv { color: #111111 } 33 | /* NameVariableClass */ .chroma .vc { color: #111111 } 34 | /* NameVariableGlobal */ .chroma .vg { color: #111111 } 35 | /* NameVariableInstance */ .chroma .vi { color: #111111 } 36 | /* NameVariableMagic */ .chroma .vm { color: #111111 } 37 | /* Literal */ .chroma .l { color: #ae81ff } 38 | /* LiteralDate */ .chroma .ld { color: #d88200 } 39 | /* LiteralString */ .chroma .s { color: #d88200 } 40 | /* LiteralStringAffix */ .chroma .sa { color: #d88200 } 41 | /* LiteralStringBacktick */ .chroma .sb { color: #d88200 } 42 | /* LiteralStringChar */ .chroma .sc { color: #d88200 } 43 | /* LiteralStringDelimiter */ .chroma .dl { color: #d88200 } 44 | /* LiteralStringDoc */ .chroma .sd { color: #d88200 } 45 | /* LiteralStringDouble */ .chroma .s2 { color: #d88200 } 46 | /* LiteralStringEscape */ .chroma .se { color: #8045ff } 47 | /* LiteralStringHeredoc */ .chroma .sh { color: #d88200 } 48 | /* LiteralStringInterpol */ .chroma .si { color: #d88200 } 49 | /* LiteralStringOther */ .chroma .sx { color: #d88200 } 50 | /* LiteralStringRegex */ .chroma .sr { color: #d88200 } 51 | /* LiteralStringSingle */ .chroma .s1 { color: #d88200 } 52 | /* LiteralStringSymbol */ .chroma .ss { color: #d88200 } 53 | /* LiteralNumber */ .chroma .m { color: #ae81ff } 54 | /* LiteralNumberBin */ .chroma .mb { color: #ae81ff } 55 | /* LiteralNumberFloat */ .chroma .mf { color: #ae81ff } 56 | /* LiteralNumberHex */ .chroma .mh { color: #ae81ff } 57 | /* LiteralNumberInteger */ .chroma .mi { color: #ae81ff } 58 | /* LiteralNumberIntegerLong */ .chroma .il { color: #ae81ff } 59 | /* LiteralNumberOct */ .chroma .mo { color: #ae81ff } 60 | /* Operator */ .chroma .o { color: #f92672 } 61 | /* OperatorWord */ .chroma .ow { color: #f92672 } 62 | /* Punctuation */ .chroma .p { color: #111111 } 63 | /* Comment */ .chroma .c { color: #75715e } 64 | /* CommentHashbang */ .chroma .ch { color: #75715e } 65 | /* CommentMultiline */ .chroma .cm { color: #75715e } 66 | /* CommentSingle */ .chroma .c1 { color: #75715e } 67 | /* CommentSpecial */ .chroma .cs { color: #75715e } 68 | /* CommentPreproc */ .chroma .cp { color: #75715e } 69 | /* CommentPreprocFile */ .chroma .cpf { color: #75715e } 70 | /* Generic */ .chroma .g { } 71 | /* GenericDeleted */ .chroma .gd { } 72 | /* GenericEmph */ .chroma .ge { font-style: italic } 73 | /* GenericError */ .chroma .gr { } 74 | /* GenericHeading */ .chroma .gh { } 75 | /* GenericInserted */ .chroma .gi { } 76 | /* GenericOutput */ .chroma .go { } 77 | /* GenericPrompt */ .chroma .gp { } 78 | /* GenericStrong */ .chroma .gs { font-weight: bold } 79 | /* GenericSubheading */ .chroma .gu { } 80 | /* GenericTraceback */ .chroma .gt { } 81 | /* GenericUnderline */ .chroma .gl { } 82 | /* TextWhitespace */ .chroma .w { } 83 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | module.exports = { 3 | content: [ 4 | './layouts/**/*.html', 5 | './content/**/*.md', 6 | './content/**/*.html', 7 | './src/**/*.ts', 8 | './src/**/*.js', 9 | ], 10 | darkMode: 'class', 11 | theme: { 12 | extend: { 13 | // sidebar mobile fix 14 | maxWidth: { 15 | '2xs': '16rem', 16 | '8xl': '90rem', 17 | }, 18 | fontFamily: { 19 | sans: [ 20 | 'Inter', 21 | 'ui-sans-serif', 22 | 'system-ui', 23 | '-apple-system', 24 | 'system-ui', 25 | 'Segoe UI', 26 | 'Roboto', 27 | 'Helvetica Neue', 28 | 'Arial', 29 | 'Noto Sans', 30 | 'sans-serif', 31 | 'Apple Color Emoji', 32 | 'Segoe UI Emoji', 33 | 'Segoe UI Symbol', 34 | 'Noto Color Emoji', 35 | ], 36 | body: [ 37 | 'Inter', 38 | 'ui-sans-serif', 39 | 'system-ui', 40 | '-apple-system', 41 | 'system-ui', 42 | 'Segoe UI', 43 | 'Roboto', 44 | 'Helvetica Neue', 45 | 'Arial', 46 | 'Noto Sans', 47 | 'sans-serif', 48 | 'Apple Color Emoji', 49 | 'Segoe UI Emoji', 50 | 'Segoe UI Symbol', 51 | 'Noto Color Emoji', 52 | ], 53 | mono: [ 54 | 'ui-monospace', 55 | 'SFMono-Regular', 56 | 'Menlo', 57 | 'Monaco', 58 | 'Consolas', 59 | 'Liberation Mono', 60 | 'Courier New', 61 | 'monospace', 62 | ], 63 | }, 64 | fontSize: { 65 | '2xs': '0.625rem', 66 | }, 67 | }, 68 | }, 69 | variants: { 70 | extend: { 71 | backgroundColor: ['active'], 72 | }, 73 | }, 74 | plugins: [ 75 | require('./plugin')({ 76 | charts: true, 77 | forms: true, 78 | tooltips: true, 79 | datatables: true, 80 | wysiwyg: true, 81 | }), 82 | require('flowbite-typography'), 83 | ], 84 | }; 85 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "es2015"], 4 | "outDir": "./lib/cjs/", 5 | "rootDir": "./src/", 6 | "sourceMap": true, 7 | "declaration": true, 8 | "declarationMap": true, 9 | "noImplicitAny": true, 10 | "module": "commonjs", 11 | "target": "es5", 12 | "jsx": "react", 13 | "allowJs": true, 14 | "moduleResolution": "node" 15 | }, 16 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/types/**/*.d.ts"], 17 | "exclude": ["node_modules", "dist", "lib"], 18 | "typeRoots": ["./node_modules/@types", "./src"] 19 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-var-requires */ 2 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 3 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 4 | const TerserPlugin = require('terser-webpack-plugin'); 5 | const { SourceMapDevToolPlugin } = require('webpack'); 6 | const path = require('path'); 7 | 8 | module.exports = { 9 | entry: { 10 | flowbite: path.resolve(__dirname, 'src/index.umd.ts'), 11 | 'flowbite.min': path.resolve(__dirname, 'src/index.umd.ts'), 12 | 'flowbite.turbo': path.resolve(__dirname, 'src/index.turbo.ts'), 13 | 'flowbite.turbo.min': path.resolve(__dirname, 'src/index.turbo.ts'), 14 | 'flowbite.phoenix': path.resolve(__dirname, 'src/index.phoenix.ts'), 15 | 'flowbite.phoenix.min': path.resolve(__dirname, 'src/index.phoenix.ts'), 16 | docs: path.resolve(__dirname, 'src/docs.js'), 17 | }, 18 | devtool: 'inline-source-map', 19 | output: { 20 | filename: '[name].js', 21 | libraryTarget: 'umd', 22 | library: 'Flowbite', 23 | umdNamedDefine: true, 24 | path: path.resolve(__dirname, 'static/'), 25 | }, 26 | module: { 27 | rules: [ 28 | { 29 | test: /\.js$/, 30 | enforce: 'pre', 31 | use: ['source-map-loader'], 32 | }, 33 | { 34 | test: /\.js$/, 35 | exclude: /node_modules/, 36 | use: { 37 | loader: 'babel-loader', 38 | options: { 39 | presets: ['@babel/preset-env'], 40 | }, 41 | }, 42 | }, 43 | { 44 | test: /\.css$/, 45 | use: [MiniCssExtractPlugin.loader, 'css-loader'], 46 | }, 47 | { 48 | test: /\.(png|jpg|gif|svg)$/, 49 | loader: 'file-loader', 50 | options: { 51 | outputPath: 'static/images/', 52 | }, 53 | }, 54 | { 55 | test: /\.(ttf|eot|svg|gif|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 56 | use: [ 57 | { 58 | loader: 'file-loader', 59 | }, 60 | ], 61 | }, 62 | { 63 | test: /\.ts$/, 64 | use: [ 65 | { 66 | loader: 'ts-loader', 67 | options: { 68 | transpileOnly: true, 69 | }, 70 | }, 71 | ], 72 | }, 73 | ], 74 | }, 75 | resolve: { 76 | extensions: ['.tsx', '.ts', '.js', '.jsx', '.css'], 77 | }, 78 | plugins: [ 79 | new MiniCssExtractPlugin(), 80 | new SourceMapDevToolPlugin({ 81 | filename: '[file].map', 82 | }), 83 | ], 84 | optimization: { 85 | minimize: true, 86 | minimizer: [ 87 | // For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line 88 | // `...`, 89 | new CssMinimizerPlugin(), 90 | new TerserPlugin({ 91 | include: /\.min\.(css|js)$/, 92 | extractComments: false, 93 | terserOptions: { 94 | format: { 95 | comments: false, 96 | }, 97 | }, 98 | }), 99 | ], 100 | }, 101 | target: ['web', 'es5'], 102 | }; 103 | --------------------------------------------------------------------------------