├── .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 | <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
22 | <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
23 | </div>
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 | <div class="mb-1 text-base font-medium dark:text-white">Small</div>
32 | <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4 dark:bg-gray-700">
33 | <div class="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style="width: 45%"></div>
34 | </div>
35 | <div class="mb-1 text-base font-medium dark:text-white">Default</div>
36 | <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
37 | <div class="bg-blue-600 h-2.5 rounded-full dark:bg-blue-500" style="width: 45%"></div>
38 | </div>
39 | <div class="mb-1 text-lg font-medium dark:text-white">Large</div>
40 | <div class="w-full h-4 mb-4 bg-gray-200 rounded-full dark:bg-gray-700">
41 | <div class="h-4 bg-blue-600 rounded-full dark:bg-blue-500" style="width: 45%"></div>
42 | </div>
43 | <div class="mb-1 text-lg font-medium dark:text-white">Extra Large</div>
44 | <div class="w-full h-6 bg-gray-200 rounded-full dark:bg-gray-700">
45 | <div class="h-6 bg-blue-600 rounded-full dark:bg-blue-500" style="width: 45%"></div>
46 | </div>
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 | <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
55 | <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: 45%"> 45%</div>
56 | </div>
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 | <div class="flex justify-between mb-1">
65 | <span class="text-base font-medium text-blue-700 dark:text-white">Flowbite</span>
66 | <span class="text-sm font-medium text-blue-700 dark:text-white">45%</span>
67 | </div>
68 | <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
69 | <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
70 | </div>
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 | <div class="mb-1 text-base font-medium dark:text-white">Dark</div>
79 | <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
80 | <div class="bg-gray-600 h-2.5 rounded-full dark:bg-gray-300" style="width: 45%"></div>
81 | </div>
82 | <div class="mb-1 text-base font-medium text-blue-700 dark:text-blue-500">Blue</div>
83 | <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
84 | <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
85 | </div>
86 | <div class="mb-1 text-base font-medium text-red-700 dark:text-red-500">Red</div>
87 | <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
88 | <div class="bg-red-600 h-2.5 rounded-full dark:bg-red-500" style="width: 45%"></div>
89 | </div>
90 | <div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">Green</div>
91 | <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
92 | <div class="bg-green-600 h-2.5 rounded-full dark:bg-green-500" style="width: 45%"></div>
93 | </div>
94 | <div class="mb-1 text-base font-medium text-yellow-700 dark:text-yellow-500">Yellow</div>
95 | <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
96 | <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 45%"></div>
97 | </div>
98 | <div class="mb-1 text-base font-medium text-indigo-700 dark:text-indigo-500">Indigo</div>
99 | <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
100 | <div class="bg-indigo-600 h-2.5 rounded-full dark:bg-indigo-500" style="width: 45%"></div>
101 | </div>
102 | <div class="mb-1 text-base font-medium text-purple-700 dark:text-purple-500">Purple</div>
103 | <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
104 | <div class="bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style="width: 45%"></div>
105 | </div>
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 | <video class="w-full" controls>
22 | <source src="/docs/videos/flowbite.mp4" type="video/mp4">
23 | Your browser does not support the video tag.
24 | </video>
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 | <video class="w-full" autoplay controls>
33 | <source src="/docs/videos/flowbite.mp4" type="video/mp4">
34 | Your browser does not support the video tag.
35 | </video>
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 | <video class="w-full" autoplay muted controls>
44 | <source src="/docs/videos/flowbite.mp4" type="video/mp4">
45 | Your browser does not support the video tag.
46 | </video>
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 | <video class="w-96" controls>
59 | <source src="/docs/videos/flowbite.mp4" type="video/mp4">
60 | Your browser does not support the video tag.
61 | </video>
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 | <video class="h-80" controls>
70 | <source src="/docs/videos/flowbite.mp4" type="video/mp4">
71 | Your browser does not support the video tag.
72 | </video>
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 | <video class="w-full h-auto max-w-full" controls>
81 | <source src="/docs/videos/flowbite.mp4" type="video/mp4">
82 | Your browser does not support the video tag.
83 | </video>
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 | <video class="w-full h-auto max-w-full border border-gray-200 rounded-lg dark:border-gray-700" controls>
92 | <source src="/docs/videos/flowbite.mp4" type="video/mp4">
93 | Your browser does not support the video tag.
94 | </video>
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 `<html>` 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 `<html>` element in your `index.html` file:
25 |
26 | ```html
27 | <html dir="rtl">
28 |
29 | <!-- your HTML markup -->
30 |
31 | </html>
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 | <nav class="bg-white border-gray-200 dark:bg-gray-900">
41 | <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
42 | <a href="{{< param homepage >}}/" class="flex items-center space-x-3 rtl:space-x-reverse">
43 | <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
44 | <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
45 | </a>
46 | <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
47 | <span class="sr-only">Open main menu</span>
48 | <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
49 | <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
50 | </svg>
51 | </button>
52 | <div class="hidden w-full md:block md:w-auto" id="navbar-default">
53 | <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
54 | <li>
55 | <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded-sm md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
56 | </li>
57 | <li>
58 | <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
59 | </li>
60 | <li>
61 | <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
62 | </li>
63 | <li>
64 | <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Pricing</a>
65 | </li>
66 | <li>
67 | <a href="#" class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
68 | </li>
69 | </ul>
70 | </div>
71 | </div>
72 | </nav>
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 | <div class="ml-2 rtl:ml-0">
85 | <!-- ... -->
86 | </div>
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 `<html>` 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 | <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
25 | <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="file_input" type="file">
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 | <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="file_input">Upload file</label>
34 | <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" aria-describedby="file_input_help" id="file_input" type="file">
35 | <p class="mt-1 text-sm text-gray-500 dark:text-gray-300" id="file_input_help">SVG, PNG, JPG or GIF (MAX. 800x400px).</p>
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 | <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="multiple_files">Upload multiple files</label>
44 | <input class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="multiple_files" type="file" multiple>
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 | <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="small_size">Small file input</label>
53 | <input class="block w-full mb-5 text-xs text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="small_size" type="file">
54 |
55 | <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="default_size">Default size</label>
56 | <input class="block w-full mb-5 text-sm text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="default_size" type="file">
57 |
58 | <label class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" for="large_size">Large file input</label>
59 | <input class="block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" id="large_size" type="file">
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 | <div class="flex items-center justify-center w-full">
68 | <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
69 | <div class="flex flex-col items-center justify-center pt-5 pb-6">
70 | <svg class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
71 | <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
72 | </svg>
73 | <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
74 | <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 800x400px)</p>
75 | </div>
76 | <input id="dropzone-file" type="file" class="hidden" />
77 | </label>
78 | </div>
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 | <label for="default-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Default range</label>
25 | <input id="default-range" type="range" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
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 | <label for="disabled-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Default range</label>
34 | <input id="disabled-range" type="range" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" disabled>
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 | <label for="minmax-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Min-max range</label>
43 | <input id="minmax-range" type="range" min="0" max="10" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
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 | <label for="steps-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Range steps</label>
52 | <input id="steps-range" type="range" min="0" max="5" value="2.5" step="0.5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
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 | <label for="small-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Small range</label>
61 | <input id="small-range" type="range" value="50" class="w-full h-1 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700">
62 |
63 | <label for="medium-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Default range</label>
64 | <input id="medium-range" type="range" value="50" class="w-full h-2 mb-6 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
65 |
66 | <label for="large-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Large range</label>
67 | <input id="large-range" type="range" value="50" class="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg dark:bg-gray-700">
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 | <div class="relative mb-6">
76 | <label for="labels-range-input" class="sr-only">Labels range</label>
77 | <input id="labels-range-input" type="range" value="1000" min="100" max="1500" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">
78 | <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6">Min ($100)</span>
79 | <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">$500</span>
80 | <span class="text-sm text-gray-500 dark:text-gray-400 absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6">$1000</span>
81 | <span class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6">Max ($1500)</span>
82 | </div>
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 <a href="https://getcomposer.org/" rel="nofollow">Composer</a> and <a href="https://nodejs.org/en/" rel="nofollow">Node.js</a> 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 | <body>
119 | @yield('content')
120 |
121 | <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
122 | </body>
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 `<ThemeProvider>` 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 <Button className="bg-red-500 hover:bg-red-600">Custom Button</Button>;
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 `<ThemeProvider>` 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 | <ThemeProvider theme={customTheme}>
87 | <Button color="primary">Red Button</Button>
88 | <Button color="secondary" size="lg">
89 | Large Blue Button
90 | </Button>
91 | </ThemeProvider>
92 | );
93 | }
94 | ```
95 |
96 | ## Storybook
97 |
98 | Flowbite React also has a [Storybook](https://storybook.flowbite-react.com/) 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 `<hr>` horizontal line.
19 |
20 | {{< example id="default-hr-example" github="typography/hr.md" show_dark=true >}}
21 | <p class="text-gray-500 dark:text-gray-400">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.</p>
22 | <hr class="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
23 | <p class="text-gray-500 dark:text-gray-400">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.</p>
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 | <p class="text-gray-500 dark:text-gray-400">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.</p>
32 | <hr class="w-48 h-1 mx-auto my-4 bg-gray-100 border-0 rounded-sm md:my-10 dark:bg-gray-700">
33 | <p class="text-gray-500 dark:text-gray-400">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.</p>
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 | <p class="text-gray-500 dark:text-gray-400">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.</p>
42 | <div class="inline-flex items-center justify-center w-full">
43 | <hr class="w-64 h-1 my-8 bg-gray-200 border-0 rounded-sm dark:bg-gray-700">
44 | <div class="absolute px-4 -translate-x-1/2 bg-white left-1/2 dark:bg-gray-900">
45 | <svg class="w-4 h-4 text-gray-700 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 14">
46 | <path d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z"/>
47 | </svg>
48 | </div>
49 | </div>
50 | <p class="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.</p>
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 | <p class="text-gray-500 dark:text-gray-400">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.</p>
59 | <div class="inline-flex items-center justify-center w-full">
60 | <hr class="w-64 h-px my-8 bg-gray-200 border-0 dark:bg-gray-700">
61 | <span class="absolute px-3 font-medium text-gray-900 -translate-x-1/2 bg-white left-1/2 dark:text-white dark:bg-gray-900">or</span>
62 | </div>
63 | <p class="text-gray-500 dark:text-gray-400">Deliver great service experiences fast - without the complexity of traditional ITSM solutions.Accelerate critical development work, eliminate toil.</p>
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 | <p class="text-gray-500 dark:text-gray-400">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.</p>
72 | <hr class="w-8 h-8 mx-auto my-8 bg-gray-200 border-0 rounded-sm md:my-12 dark:bg-gray-700">
73 | <blockquote class="text-xl italic font-semibold text-center text-gray-900 dark:text-white">
74 | <p>"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."</p>
75 | </blockquote>
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" }}<body>{{ end }}
2 | {{ define "main" }}
3 | <main id="content">
4 | {{ .Content }}
5 | </main>
6 | {{ end }}
7 |
--------------------------------------------------------------------------------
/layouts/_default/_markup/render-heading.html:
--------------------------------------------------------------------------------
1 | <!-- <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
2 | {{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
3 | <a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML }}"></a>
4 | {{- end -}}
5 | </h{{ .Level }}> -->
6 | <h{{ .Level }} class="relative group">{{ .Text | safeHTML }}
7 | <span id="{{ .Anchor | safeURL }}" class="absolute -top-[140px]"></span>
8 | {{- if and (ge .Level 2) (le .Level 4) }}{{" " -}}
9 | <a class="ml-2 text-blue-700 opacity-0 transition-opacity dark:text-blue-500 group-hover:opacity-100" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML }}">#</a>
10 | {{- end -}}
11 | </h{{ .Level }}>
--------------------------------------------------------------------------------
/layouts/_default/baseof.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html lang="en">
3 |
4 | <head>
5 | {{ partial "header" . }}
6 | </head>
7 | {{ block "body_override" . }}
8 |
9 | <body class="dark:bg-gray-900 antialiased">
10 | {{ end }}
11 |
12 | {{ block "main" . }}
13 | {{ end }}
14 |
15 | {{ partial "footer" . }}
16 | {{ partial "scripts" . }}
17 |
18 | {{ block "footer" . }}
19 | {{ end }}
20 | </body>
21 |
22 | </html>
--------------------------------------------------------------------------------
/layouts/_default/dashboard.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html lang="en">
3 | <head>
4 | {{ partial "header" . }}
5 | </head>
6 | {{ block "body_override" . }}<body>{{ end }}
7 |
8 | {{ partial "dashboard/navbar" . }}
9 |
10 | {{ partial "dashboard/sidebar" . }}
11 |
12 | <main class="pt-4 pb-4 content pt-lg-xl">
13 |
14 | {{ block "main" . }}
15 | {{ end }}
16 | </main>
17 |
18 | {{ partial "dashboard/footer" . }}
19 | {{ partial "scripts" . }}
20 |
21 | {{ block "footer" . }}
22 | {{ end }}
23 | </body>
24 | </html>
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 | <!-- Fathom - beautiful, simple website analytics -->
2 | <script src="https://cdn.usefathom.com/script.js" data-site="UGPDODOP" defer></script>
3 | <!-- / Fathom -->
--------------------------------------------------------------------------------
/layouts/partials/favicons.html:
--------------------------------------------------------------------------------
1 | <link rel="apple-touch-icon" sizes="57x57" href="/docs/apple-icon-57x57.png">
2 | <link rel="apple-touch-icon" sizes="60x60" href="/docs/apple-icon-60x60.png">
3 | <link rel="apple-touch-icon" sizes="72x72" href="/docs/apple-icon-72x72.png">
4 | <link rel="apple-touch-icon" sizes="76x76" href="/docs/apple-icon-76x76.png">
5 | <link rel="apple-touch-icon" sizes="114x114" href="/docs/apple-icon-114x114.png">
6 | <link rel="apple-touch-icon" sizes="120x120" href="/docs/apple-icon-120x120.png">
7 | <link rel="apple-touch-icon" sizes="144x144" href="/docs/apple-icon-144x144.png">
8 | <link rel="apple-touch-icon" sizes="152x152" href="/docs/apple-icon-152x152.png">
9 | <link rel="apple-touch-icon" sizes="180x180" href="/docs/apple-icon-180x180.png">
10 | <link rel="icon" type="image/png" sizes="192x192" href="/docs/android-icon-192x192.png">
11 | <link rel="icon" type="image/png" sizes="32x32" href="/docs/favicon-32x32.png">
12 | <link rel="icon" type="image/png" sizes="96x96" href="/docs/favicon-96x96.png">
13 | <link rel="icon" type="image/png" sizes="16x16" href="/docs/favicon-16x16.png">
14 | <link rel="manifest" href="/docs/manifest.json">
15 | <meta name="msapplication-TileColor" content="#ffffff">
16 | <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
17 | <meta name="theme-color" content="#ffffff">
18 |
--------------------------------------------------------------------------------
/layouts/partials/header.html:
--------------------------------------------------------------------------------
1 | <meta charset="utf-8">
2 | <meta name="viewport" content="width=device-width, initial-scale=1">
3 | <meta name="description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
4 | <meta name="author" content="{{ .Site.Params.authors }}">
5 | <meta name="generator" content="Hugo {{ hugo.Version }}">
6 |
7 | <title>{{ .Params.Title | markdownify }}</title>
8 |
9 | <link rel="canonical" href="{{ .Permalink }}">
10 |
11 | {{ with .Params.robots -}}
12 | <meta name="robots" content="{{ . }}">
13 | {{- end }}
14 |
15 | {{ partial "stylesheet" . }}
16 | {{ partial "favicons" . }}
17 | {{ partial "social" . }}
18 | {{ partial "analytics" . }}
19 |
20 | <script>
21 | // On page load or when changing themes, best to add inline in `head` to avoid FOUC
22 | if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
23 | document.documentElement.classList.add('dark');
24 | } else {
25 | document.documentElement.classList.remove('dark')
26 | }
27 | </script>
--------------------------------------------------------------------------------
/layouts/partials/redirect.html:
--------------------------------------------------------------------------------
1 | <!doctype html>
2 | <html lang="en">
3 | <head>
4 | <meta charset="utf-8">
5 | <meta name="viewport" content="width=device-width, initial-scale=1">
6 | <title>{{ . }}</title>
7 | <link rel="canonical" href="{{ . }}">
8 | <meta name="robots" content="noindex">
9 | <meta http-equiv="refresh" content="0; url={{ . }}">
10 | </head>
11 | </html>
12 |
--------------------------------------------------------------------------------
/layouts/partials/scripts.html:
--------------------------------------------------------------------------------
1 | <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"
2 | integrity="sha512-axJX7DJduStuBB8ePC8ryGzacZPr3rdLaIDZitiEgWWk2gsXxEFlm4UW0iNzj2h3wp5mOylgHAzBzM4nRSvTZA=="
3 | crossorigin="anonymous" referrerpolicy="no-referrer"></script>
4 | <script src="{{ .Site.BaseURL }}flowbite.min.js?v=3.1.2a"></script>
5 | <script src="{{ .Site.BaseURL }}docs.js?v=3.1.2a"></script>
--------------------------------------------------------------------------------
/layouts/partials/sidebar.html:
--------------------------------------------------------------------------------
1 | <div id="navWrapper" class="overflow-y-auto z-20 h-full bg-white scrolling-touch max-w-2xs lg:h-[calc(100vh-3rem)] lg:block lg:sticky top:24 lg:top-28 dark:bg-gray-900 lg:mr-0">
2 | <nav id="nav" class="pt-16 px-1 pl-3 lg:pl-0 lg:pt-2 font-normal text-base lg:text-sm pb-10 lg:pb-20 sticky?lg:h-(screen-18)" aria-label="Docs navigation">
3 | {{- $url := split .Permalink "/" -}}
4 | {{- $page_slug := index $url (sub (len $url) 2) -}}
5 |
6 | <ul class="mb-0 list-unstyled">
7 | {{- range $group := .Site.Data.sidebar -}}
8 | {{- $link := $group.title -}}
9 | {{- $link_slug := $link | urlize -}}
10 |
11 | {{- if $group.pages -}}
12 | {{- $link = index $group.pages 0 -}}
13 | {{- $link_slug = $link.title | urlize -}}
14 | {{- end -}}
15 |
16 | {{- $group_slug := $group.slug -}}
17 | {{- $is_active_group := eq $.Page.Params.group $group_slug -}}
18 |
19 | {{- if $group.pages }}
20 | <li class="mt-8">
21 | <h5 class="mb-2 text-sm font-semibold tracking-wide text-gray-900 uppercase lg:text-xs dark:text-white">{{ $group.title }}</h5>
22 | <ul class="py-1 list-unstyled fw-normal small">
23 | {{- range $doc := $group.pages -}}
24 | {{- $doc_slug := "" -}}
25 | {{- if $doc.slug -}}
26 | {{- $doc_slug = $doc.slug -}}
27 | {{- else -}}
28 | {{- $doc_slug = $doc.title | urlize -}}
29 | {{- end -}}
30 | {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}}
31 | {{- $href := printf "/docs/%s/%s/" $group_slug $doc_slug }}
32 | <li>
33 | <a href="{{ $href }}" data-sidebar-item class="py-2 transition-colors duration-200 relative flex items-center flex-wrap font-medium hover:text-gray-900 text-gray-500 dark:text-gray-400 dark:hover:text-white {{ if $is_active }} !text-blue-700 hover:!text-blue-700 dark:!text-blue-500 dark:hover:!text-blue-500{{ end }}"{{ if $is_active }} aria-current="page"{{ end }}>{{ $doc.title }} {{ if ( eq $doc.new true) }}<span><span class="bg-blue-100 text-blue-800 text-2xs font-semibold ml-2 px-1.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-blue-400 border border-blue-100 dark:border-blue-400">NEW</span></span>{{ end }}</a>
34 | </li>
35 | {{- end }}
36 | </ul>
37 | </li>
38 | {{- else }}
39 | <li class="mx-4 my-3 border-top"></li>
40 | <li>
41 | <a href="/{{ $group_slug }}/" data-sidebar-item class="d-inline-flex align-items-center {{ if $is_active_group }} active{{ end }}"{{ if $is_active_group }} aria-current="page"{{ end }}>
42 | {{ $group.title }}
43 | </a>
44 | </li>
45 | {{- end }}
46 | {{- end }}
47 | </ul>
48 | </nav>
49 | </div>
50 |
51 |
--------------------------------------------------------------------------------
/layouts/partials/social.html:
--------------------------------------------------------------------------------
1 | {{ "<!-- Twitter -->" | safeHTML }}
2 | <meta name="twitter:card" content="{{ if .IsHome }}summary_large_image{{ else }}summary{{ end }}">
3 | <meta name="twitter:site" content="@{{ .Site.Params.twitter }}">
4 | <meta name="twitter:creator" content="@{{ .Site.Params.twitter }}">
5 | <meta name="twitter:title" content="{{ .Title | markdownify }}">
6 | <meta name="twitter:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
7 | <meta name="twitter:image" content="{{ if .IsHome }}{{ .Site.Params.social_logo_path | absURL }}{{ else }}{{ .Site.Params.social_image_path | absURL }}{{ end }}">
8 |
9 | {{ "<!-- Facebook -->" | safeHTML }}
10 | <meta property="og:url" content="{{ .Permalink }}">
11 | <meta property="og:title" content="{{ .Title | markdownify }}">
12 | <meta property="og:description" content="{{ .Page.Params.description | default .Site.Params.description | markdownify }}">
13 | <meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
14 | <meta property="og:image" content="{{ .Site.Params.social_image_path | absURL }}">
15 | <meta property="og:image:type" content="image/png">
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/layouts/partials/stylesheet.html:
--------------------------------------------------------------------------------
1 | <link rel="preconnect" href="https://fonts.googleapis.com">
2 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3 | <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
4 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" />
5 | <link rel="stylesheet" href="{{ .Site.BaseURL }}main.css?v=3.1.2a">
--------------------------------------------------------------------------------
/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 | <svg class="bd-placeholder-img{{ with $class }} {{ . }}{{ end }}" width="{{ $width }}" height="{{ $height }}" xmlns="http://www.w3.org/2000/svg"{{ if (or $show_title $show_text) }} role="img" aria-label="{{ if $show_title }}{{ $title }}{{ if $show_text }}: {{ end }}{{ end }}{{ if ($show_text) }}{{ $text }}{{ end }}"{{ else }} aria-hidden="true"{{ end }} preserveAspectRatio="xMidYMid slice" focusable="false">
27 | {{- if $show_title -}}<title>{{ $title }}</title>{{- end -}}
28 | <rect width="100%" height="100%" fill="{{ $background }}"/>
29 | {{- if $show_text -}}<text x="50%" y="50%" fill="{{ $color }}" dy=".3em">{{ $text }}</text>{{- end -}}
30 | </svg>
31 |
--------------------------------------------------------------------------------
/layouts/shortcodes/preview.html:
--------------------------------------------------------------------------------
1 | <div class="rounded-t-xl overflow-hidden bg-gradient-to-r border border-gray-200 dark:border-gray-700 p-6 mt-8 {{ with .Get "class" }} {{ . }}{{ end }}">
2 | {{ .Inner | markdownify }}
3 | </div>
4 |
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_angular.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/angular/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Angular">
4 | <span class="px-3 py-px mr-3 text-xs text-white bg-white rounded-full">
5 | <svg class="w-6 h-6" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
6 | viewBox="0 0 250 250" style="enable-background:new 0 0 250 250;" xml:space="preserve">
7 | <style type="text/css">
8 | .st0{fill:#DD0031;}
9 | .st1{fill:#C3002F;}
10 | .st2{fill:#FFFFFF;}
11 | </style>
12 | <g>
13 | <polygon class="st0" points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2 "/>
14 | <polygon class="st1" points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30 "/>
15 | <path class="st2" d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
16 | L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
17 | </g>
18 | </svg>
19 | </span>
20 | <span class="text-sm font-medium">Requires Angular</span>
21 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_blazor.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/blazor/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Angular">
4 | <span class="px-3 py-px mr-3 text-xs text-white bg-white rounded-full">
5 | <svg fill="none" class="w-4 h-4" viewBox="-10.12021875 -53.60951036 339.95397529 343.02235093" width="2500" xmlns="http://www.w3.org/2000/svg"><path d="m303.935 88.479c-6.598 41.362-27.653 79.041-59.42 106.335s-72.185 42.433-114.064 42.723c-8.483.326-16.977-.19-25.358-1.539a77.723 77.723 0 0 1 -64.63-73.266 75.479 75.479 0 0 1 22.14-52.762 75.46 75.46 0 0 1 105.885-.748 75.478 75.478 0 0 1 22.884 52.443c.317 12.51-5.102 23.483-16.239 23.8-11.899 0-17.477-8.491-17.477-19.934v-31.797a19.478 19.478 0 0 0 -19.323-19.494h-26.653a46.386 46.386 0 0 0 -39.119 20.961 46.399 46.399 0 0 0 31.587 71.268 46.392 46.392 0 0 0 41.8-14.911l.932-1.39.933 1.543a32.82 32.82 0 0 0 27.986 13.328 36.992 36.992 0 0 0 34.268-38.671 100.64 100.64 0 0 0 -2.761-24.577c-4.943-22.734-18.126-42.834-37.008-56.423a94.153 94.153 0 0 0 -125.236 13.718 94.175 94.175 0 0 0 -23.92 63.097 95.352 95.352 0 0 0 27.473 65.824 95.331 95.331 0 0 0 65.448 28.344s6.98.635 14.849.454a200.94 200.94 0 0 0 107.769-32.155c.457-.318.914.317.61.78a158.177 158.177 0 0 1 -123.225 50.396 111.185 111.185 0 0 1 -80.961-32.871 111.215 111.215 0 0 1 -32.215-81.232 115.099 115.099 0 0 1 46.223-92.17 112.704 112.704 0 0 1 66.497-21.953h35.772a100.637 100.637 0 0 0 74.247-32.784 1.39 1.39 0 0 1 .755-.431 1.418 1.418 0 0 1 1.52.663c.153.257.222.555.197.854a100.93 100.93 0 0 1 -15.608 45.14 1.386 1.386 0 0 0 .115 1.511 1.387 1.387 0 0 0 1.424.507 108.158 108.158 0 0 0 75.198-62.013c.173-.277.411-.507.695-.67a1.902 1.902 0 0 1 1.869 0c.284.162.523.392.694.67a137.098 137.098 0 0 1 13.447 87.432zm-189.964 44.858a27.823 27.823 0 0 0 -27.293 33.255 27.83 27.83 0 0 0 21.862 21.865 27.824 27.824 0 0 0 33.251-27.296v-25.977a2.007 2.007 0 0 0 -1.904-1.904z" fill="#702af7"/></svg>
6 | </span>
7 | <span class="text-sm font-medium">Requires Blazor (.NET)</span>
8 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_django.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/django/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white"
3 | aria-label="Component requires Django">
4 | <span class="text-xs bg-white rounded-full text-white px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" class="h-4" viewBox="0 0 256 326" xmlns="http://www.w3.org/2000/svg"
6 | preserveAspectRatio="xMinYMin meet">
7 | <g fill="#2BA977">
8 | <path
9 | d="M114.784 0h53.278v244.191c-27.29 5.162-47.38 7.193-69.117 7.193C33.873 251.316 0 222.245 0 166.412c0-53.795 35.93-88.708 91.608-88.708 8.64 0 15.222.68 23.176 2.717V0zm1.867 124.427c-6.24-2.038-11.382-2.717-17.965-2.717-26.947 0-42.512 16.437-42.512 45.243 0 28.046 14.88 43.532 42.17 43.532 5.896 0 10.696-.332 18.307-1.351v-84.707z" />
10 | <path
11 | d="M255.187 84.26v122.263c0 42.105-3.154 62.353-12.411 79.81-8.64 16.783-20.022 27.366-43.541 39.055l-49.438-23.297c23.519-10.93 34.901-20.588 42.17-35.327 7.61-15.072 10.01-32.529 10.01-78.445V84.261h53.21zM196.608 0h53.278v54.135h-53.278V0z" />
12 | </g>
13 | </svg>
14 | <span class="sr-only">Django logo</span>
15 | </span>
16 | <span class="text-sm font-medium">Requires Django</span>
17 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_hugo.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/hugo/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires HUGO">
4 | <span class="px-3 py-px mr-3 text-xs text-white bg-white rounded-full">
5 | <svg aria-hidden="true" class="w-6 h-6" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
6 | viewBox="0 0 370 391" xml:space="preserve">
7 | <style type="text/css">
8 | .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4088;stroke:#C9177E;stroke-width:27;}
9 | .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
10 | </style>
11 | <path class="st0" d="M207.5,22.4L321.9,89c13.5,7.9,21.9,22.4,21.9,38v136.4c0,17.3-9.3,33.3-24.5,41.8l-113.5,63.9
12 | c-15.1,8.5-33.5,8.4-48.5-0.2L52.8,308.8c-16.4-9.5-26.6-27-26.6-45.9V133.4c0-19.1,9.9-36.8,26.1-46.8l102.8-63.5
13 | C171.1,13.2,191.3,13,207.5,22.4z"/>
14 | <polygon class="st1" points="105.6,298.2 105.6,91 149,91 149,166.5 220.9,166.5 220.9,91 264.4,91 264.4,298.2 220.9,298.2
15 | 220.9,207.6 149,207.6 149,298.2 "/>
16 | </svg>
17 | </span>
18 | <span class="text-sm font-medium">Requires HUGO</span>
19 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_js.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/quickstart/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Flowbite JavaScript">
4 | <span aria-hidden="true" class="text-xs bg-blue-600 rounded-full text-white px-3 py-1.5 mr-3"><svg class="w-4 h-4"
5 | fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
6 | <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
7 | d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
8 | </svg></span> <span class="text-sm font-medium">Requires Flowbite JS</span> <svg class="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
9 | <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
10 | </svg>
11 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_laravel.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/laravel/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Laravel">
4 | <span class="text-xs text-[#ff2d20] rounded-full bg-white dark:bg-gray-900 px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="laravel" class="w-4 h-4" role="img"
6 | xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
7 | <path fill="currentColor"
8 | d="M504.4,115.83a5.72,5.72,0,0,0-.28-.68,8.52,8.52,0,0,0-.53-1.25,6,6,0,0,0-.54-.71,9.36,9.36,0,0,0-.72-.94c-.23-.22-.52-.4-.77-.6a8.84,8.84,0,0,0-.9-.68L404.4,55.55a8,8,0,0,0-8,0L300.12,111h0a8.07,8.07,0,0,0-.88.69,7.68,7.68,0,0,0-.78.6,8.23,8.23,0,0,0-.72.93c-.17.24-.39.45-.54.71a9.7,9.7,0,0,0-.52,1.25c-.08.23-.21.44-.28.68a8.08,8.08,0,0,0-.28,2.08V223.18l-80.22,46.19V63.44a7.8,7.8,0,0,0-.28-2.09c-.06-.24-.2-.45-.28-.68a8.35,8.35,0,0,0-.52-1.24c-.14-.26-.37-.47-.54-.72a9.36,9.36,0,0,0-.72-.94,9.46,9.46,0,0,0-.78-.6,9.8,9.8,0,0,0-.88-.68h0L115.61,1.07a8,8,0,0,0-8,0L11.34,56.49h0a6.52,6.52,0,0,0-.88.69,7.81,7.81,0,0,0-.79.6,8.15,8.15,0,0,0-.71.93c-.18.25-.4.46-.55.72a7.88,7.88,0,0,0-.51,1.24,6.46,6.46,0,0,0-.29.67,8.18,8.18,0,0,0-.28,2.1v329.7a8,8,0,0,0,4,6.95l192.5,110.84a8.83,8.83,0,0,0,1.33.54c.21.08.41.2.63.26a7.92,7.92,0,0,0,4.1,0c.2-.05.37-.16.55-.22a8.6,8.6,0,0,0,1.4-.58L404.4,400.09a8,8,0,0,0,4-6.95V287.88l92.24-53.11a8,8,0,0,0,4-7V117.92A8.63,8.63,0,0,0,504.4,115.83ZM111.6,17.28h0l80.19,46.15-80.2,46.18L31.41,63.44Zm88.25,60V278.6l-46.53,26.79-33.69,19.4V123.5l46.53-26.79Zm0,412.78L23.37,388.5V77.32L57.06,96.7l46.52,26.8V338.68a6.94,6.94,0,0,0,.12.9,8,8,0,0,0,.16,1.18h0a5.92,5.92,0,0,0,.38.9,6.38,6.38,0,0,0,.42,1v0a8.54,8.54,0,0,0,.6.78,7.62,7.62,0,0,0,.66.84l0,0c.23.22.52.38.77.58a8.93,8.93,0,0,0,.86.66l0,0,0,0,92.19,52.18Zm8-106.17-80.06-45.32,84.09-48.41,92.26-53.11,80.13,46.13-58.8,33.56Zm184.52,4.57L215.88,490.11V397.8L346.6,323.2l45.77-26.15Zm0-119.13L358.68,250l-46.53-26.79V131.79l33.69,19.4L392.37,178Zm8-105.28-80.2-46.17,80.2-46.16,80.18,46.15Zm8,105.28V178L455,151.19l33.68-19.4v91.39h0Z">
9 | </path>
10 | </svg></span> <span class="text-sm font-medium">Requires Laravel</span>
11 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_nextjs.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/next-js/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Next.js">
4 | <span class="px-3 py-px mr-3 text-xs text-white bg-white rounded-full">
5 | <svg class="w-7 h-7" aria-hidden="true" viewBox="0 0 207 124" version="1.1"
6 | xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
7 | <defs></defs>
8 | <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
9 | <g id="Black-Next.js" transform="translate(-247.000000, -138.000000)" fill="#000000"
10 | fill-rule="nonzero">
11 | <g id="next-black" transform="translate(247.000000, 138.000000)">
12 | <g id="EXT-+-Type-something">
13 | <path
14 | d="M48.9421964,32.6320058 L87.9011585,32.6320058 L87.9011585,35.7136421 L52.5134345,35.7136421 L52.5134345,58.9070103 L85.7908813,58.9070103 L85.7908813,61.9886466 L52.5134345,61.9886466 L52.5134345,87.4526941 L88.306981,87.4526941 L88.306981,90.5343303 L48.9421964,90.5343303 L48.9421964,32.6320058 Z M91.3912326,32.6320058 L95.5306221,32.6320058 L113.8738,58.0960534 L132.622801,32.6320058 L158.124498,0.286809811 L116.22757,60.7722112 L137.817329,90.5343303 L133.51561,90.5343303 L113.8738,63.4483691 L94.1508254,90.5343303 L89.9302715,90.5343303 L111.682358,60.7722112 L91.3912326,32.6320058 Z M139.359455,35.713642 L139.359455,32.6320058 L183.756439,32.6320058 L183.756439,35.7136421 L163.302983,35.7136421 L163.302983,90.5343303 L159.731745,90.5343303 L159.731745,35.7136421 L139.359455,35.713642 Z"
15 | id="EXT"></path>
16 | <polygon id="Type-something"
17 | points="0.202923647 32.6320058 4.66697141 32.6320058 66.2235778 124.303087 40.785176 90.5343303 3.93649086 37.0111732 3.77416185 90.5343303 0.202923647 90.5343303">
18 | </polygon>
19 | </g>
20 | <path
21 | d="M183.396622,86.5227221 C184.134938,86.5227221 184.673474,85.9601075 184.673474,85.233037 C184.673474,84.5059658 184.134938,83.9433513 183.396622,83.9433513 C182.666993,83.9433513 182.11977,84.5059658 182.11977,85.233037 C182.11977,85.9601075 182.666993,86.5227221 183.396622,86.5227221 Z M186.905793,83.1297235 C186.905793,85.2763149 188.460599,86.678523 190.727662,86.678523 C193.142388,86.678523 194.601647,85.233037 194.601647,82.7229099 L194.601647,73.8855335 L192.655968,73.8855335 L192.655968,82.7142542 C192.655968,84.1078073 191.952397,84.8521899 190.710289,84.8521899 C189.598473,84.8521899 188.842785,84.1597409 188.816727,83.1297235 L186.905793,83.1297235 Z M197.146664,83.0172011 C197.285642,85.2503478 199.153145,86.678523 201.932686,86.678523 C204.903321,86.678523 206.762139,85.1811034 206.762139,82.792155 C206.762139,80.9138876 205.702439,79.8752151 203.131364,79.2779777 L201.750279,78.9404092 C200.117298,78.5595622 199.457158,78.0488813 199.457158,77.1573541 C199.457158,76.0321243 200.482113,75.296398 202.019547,75.296398 C203.478806,75.296398 204.48639,76.0148135 204.668797,77.1660091 L206.562359,77.1660091 C206.44944,75.0626962 204.590622,73.5825873 202.045605,73.5825873 C199.309495,73.5825873 197.48542,75.0626962 197.48542,77.2871878 C197.48542,79.1221767 198.519063,80.2127835 200.786126,80.7407758 L202.401734,81.1302779 C204.060773,81.5197807 204.790402,82.091051 204.790402,83.0431676 C204.790402,84.1510859 203.643842,84.9560573 202.08035,84.9560573 C200.403939,84.9560573 199.240006,84.2030196 199.074971,83.0172011 L197.146664,83.0172011 Z"
22 | id=".JS"></path>
23 | </g>
24 | </g>
25 | </g>
26 | </svg>
27 | </span>
28 | <span class="text-sm font-medium">Requires Next.js</span>
29 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_nuxtjs.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/nuxt-js/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Nuxt">
4 | <span class="px-3 py-px mr-3 text-xs text-white bg-white rounded-full">
5 | <svg class="w-6 h-6" aria-hidden="true" viewBox="0 0 900 900" fill="none" xmlns="http://www.w3.org/2000/svg">
6 | <path d="M504.908 750H839.476C850.103 750.001 860.542 747.229 869.745 741.963C878.948 736.696 886.589 729.121 891.9 719.999C897.211 710.876 900.005 700.529 900 689.997C899.995 679.465 897.193 669.12 891.873 660.002L667.187 274.289C661.876 265.169 654.237 257.595 645.036 252.329C635.835 247.064 625.398 244.291 614.773 244.291C604.149 244.291 593.711 247.064 584.511 252.329C575.31 257.595 567.67 265.169 562.36 274.289L504.908 372.979L392.581 179.993C387.266 170.874 379.623 163.301 370.42 158.036C361.216 152.772 350.777 150 340.151 150C329.525 150 319.086 152.772 309.883 158.036C300.679 163.301 293.036 170.874 287.721 179.993L8.12649 660.002C2.80743 669.12 0.00462935 679.465 5.72978e-06 689.997C-0.00461789 700.529 2.78909 710.876 8.10015 719.999C13.4112 729.121 21.0523 736.696 30.255 741.963C39.4576 747.229 49.8973 750.001 60.524 750H270.538C353.748 750 415.112 713.775 457.336 643.101L559.849 467.145L614.757 372.979L779.547 655.834H559.849L504.908 750ZM267.114 655.737L120.551 655.704L340.249 278.586L449.87 467.145L376.474 593.175C348.433 639.03 316.577 655.737 267.114 655.737Z" fill="#00DC82"/>
7 | </svg>
8 | </span>
9 | <span class="text-sm font-medium">Requires Nuxt</span>
10 | </a>
11 |
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_react.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/react/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires React">
4 | <span class="text-xs bg-blue-600 rounded-full text-white px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="react" class="w-4 h-4" role="img"
6 | xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
7 | <path fill="currentColor"
8 | d="M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z">
9 | </path>
10 | </svg></span> <span class="text-sm font-medium">Requires React</span>
11 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_ruby.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/rails/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white"
3 | aria-label="Component requires Ruby on Rails">
4 | <span class="text-xs bg-white rounded-full text-white px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="h-3" viewBox="0 0 411 155">
6 | <g fill="#CC0000" fill-rule="evenodd" transform="translate(8 8)">
7 | <path
8 | d="M344.6 121.5L344.6 139.6 377.3 139.6C384 139.6 395.5 134.7 395.9 121L395.9 114C395.9 102.3 386.3 95.4 377.3 95.4L361 95.4 361 87 393.3 87 393.3 68.8 362.3 68.8C354.3 68.8 343.6 75.4 343.6 87.7L343.6 94C343.6 106.3 354.2 112.6 362.3 112.6 384.8 112.7 356.9 112.6 377.7 112.6L377.7 121.4M169.4 117.1C169.4 117.1 186.9 115.6 186.9 93 186.9 70.4 165.7 68.3 165.7 68.3L127.5 68.3 127.5 139.6 146.7 139.6 146.7 122.4 163.3 139.6 191.7 139.6 169.4 117.1zM162 102.5L146.7 102.5 146.7 86.2 162.1 86.2C162.1 86.2 166.4 87.8 166.4 94.3 166.4 100.8 162 102.5 162 102.5zM234.3 68.8L214.8 68.8C200.9 68.8 196.2 81.4 196.2 87.4L196.2 139.6 215.7 139.6 215.7 127.1 234 127.1 234 139.6 252.9 139.6 252.9 87.4C252.9 72.2 239.1 68.8 234.3 68.8zM234 106.9L215.6 106.9 215.6 89.6C215.6 89.6 215.6 85.7 221.7 85.7L228.4 85.7C233.8 85.7 233.9 89.6 233.9 89.6L233.9 106.9 234 106.9z" />
9 | <rect width="20.3" height="70.8" x="261.8" y="68.8" />
10 | <polygon
11 | points="310.6 121.3 310.6 68.8 290.4 68.8 290.4 121.3 290.4 139.6 310.6 139.6 337.9 139.6 337.9 121.3" />
12 | <path
13 | d="M7,139.6 L86,139.6 C86,139.6 70.9,70.7 120.9,42.8 C131.8,37.5 166.5,17.7 223.3,59.7 C225.1,58.2 226.8,57 226.8,57 C226.8,57 174.8,5.1 116.9,10.9 C87.8,13.5 52,40 31,75 C10,110 7,139.6 7,139.6 Z" />
14 | <path
15 | d="M7,139.6 L86,139.6 C86,139.6 70.9,70.7 120.9,42.8 C131.8,37.5 166.5,17.7 223.3,59.7 C225.1,58.2 226.8,57 226.8,57 C226.8,57 174.8,5.1 116.9,10.9 C87.8,13.5 52,40 31,75 C10,110 7,139.6 7,139.6 Z" />
16 | <path
17 | d="M7 139.6L86 139.6C86 139.6 70.9 70.7 120.9 42.8 131.8 37.5 166.5 17.7 223.3 59.7 225.1 58.2 226.8 57 226.8 57 226.8 57 174.8 5.1 116.9 10.9 87.7 13.5 51.9 40 30.9 75 9.9 110 7 139.6 7 139.6zM171.6 16.5L172 9.8C171.1 9.3 168.6 8.1 162.3 6.3L161.9 12.9C165.2 14 168.4 15.2 171.6 16.5z" />
18 | <path
19 | d="M162.1 37.7L161.7 44C165 44.1 168.3 44.5 171.6 45.2L172 39C168.6 38.3 165.3 37.9 162.1 37.7zM125.1 6.5L126.1 6.5 124.1.4C121 .4 117.8.6 114.5 1L116.4 6.9C119.3 6.6 122.2 6.5 125.1 6.5zM129.9 43.3L132.2 50.2C135.1 48.8 138 47.6 140.9 46.7L138.7 40.1C135.3 41.1 132.4 42.2 129.9 43.3zM84.5 17L80 10.1C77.5 11.4 74.9 12.8 72.2 14.4L76.8 21.4C79.4 19.8 81.9 18.3 84.5 17zM105 62L109.8 69.2C111.5 66.7 113.5 64.4 115.7 62.1L111.2 55.3C108.9 57.4 106.8 59.7 105 62zM90.5 94.2L98.6 100.6C99 96.7 99.7 92.8 100.7 88.9L93.5 83.2C92.2 86.9 91.3 90.6 90.5 94.2zM46.7 46.7L39.6 40.5C37 43 34.5 45.5 32.2 48L39.9 54.6C42 51.9 44.3 49.2 46.7 46.7zM16.5 91.4L5 87.2C3.1 91.5 1 96.5 0 99.2L11.5 103.4C12.8 100 14.9 95.1 16.5 91.4zM89 119.6C89.2 124.9 89.7 129.2 90.2 132.2L102.2 136.5C101.3 132.6 100.4 128.2 99.8 123.5L89 119.6z" />
20 | </g>
21 | </svg>
22 | </span>
23 | <span class="text-sm font-medium">Requires Ruby on Rails</span>
24 | </a>
25 | </aside>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_svelte.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/svelte/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Svelte">
4 | <span class="text-xs bg-white rounded-full text-white px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" class="w-4 h-4" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
6 | xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 98.1 118"
7 | style="enable-background:new 0 0 98.1 118;" xml:space="preserve">
8 | <style type="text/css">
9 | .st0 {
10 | fill: #FF3E00;
11 | }
12 |
13 | .st1 {
14 | fill: #FFFFFF;
15 | }
16 | </style>
17 | <path class="st0" d="M91.8,15.6C80.9-0.1,59.2-4.7,43.6,5.2L16.1,22.8C8.6,27.5,3.4,35.2,1.9,43.9c-1.3,7.3-0.2,14.8,3.3,21.3
18 | c-2.4,3.6-4,7.6-4.7,11.8c-1.6,8.9,0.5,18.1,5.7,25.4c11,15.7,32.6,20.3,48.2,10.4l27.5-17.5c7.5-4.7,12.7-12.4,14.2-21.1
19 | c1.3-7.3,0.2-14.8-3.3-21.3c2.4-3.6,4-7.6,4.7-11.8C99.2,32.1,97.1,22.9,91.8,15.6" />
20 | <path class="st1"
21 | d="M40.9,103.9c-8.9,2.3-18.2-1.2-23.4-8.7c-3.2-4.4-4.4-9.9-3.5-15.3c0.2-0.9,0.4-1.7,0.6-2.6l0.5-1.6l1.4,1
22 | c3.3,2.4,6.9,4.2,10.8,5.4l1,0.3l-0.1,1c-0.1,1.4,0.3,2.9,1.1,4.1c1.6,2.3,4.4,3.4,7.1,2.7c0.6-0.2,1.2-0.4,1.7-0.7L65.5,72
23 | c1.4-0.9,2.3-2.2,2.6-3.8c0.3-1.6-0.1-3.3-1-4.6c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7l-10.5,6.7
24 | c-1.7,1.1-3.6,1.9-5.6,2.4c-8.9,2.3-18.2-1.2-23.4-8.7c-3.1-4.4-4.4-9.9-3.4-15.3c0.9-5.2,4.1-9.9,8.6-12.7l27.5-17.5
25 | c1.7-1.1,3.6-1.9,5.6-2.5c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.2,0.9-0.4,1.7-0.7,2.6l-0.5,1.6l-1.4-1
26 | c-3.3-2.4-6.9-4.2-10.8-5.4l-1-0.3l0.1-1c0.1-1.4-0.3-2.9-1.1-4.1c-1.6-2.3-4.4-3.3-7.1-2.6c-0.6,0.2-1.2,0.4-1.7,0.7L32.4,46.1
27 | c-1.4,0.9-2.3,2.2-2.6,3.8s0.1,3.3,1,4.6c1.6,2.3,4.4,3.3,7.1,2.6c0.6-0.2,1.2-0.4,1.7-0.7l10.5-6.7c1.7-1.1,3.6-1.9,5.6-2.5
28 | c8.9-2.3,18.2,1.2,23.4,8.7c3.2,4.4,4.4,9.9,3.5,15.3c-0.9,5.2-4.1,9.9-8.6,12.7l-27.5,17.5C44.8,102.5,42.9,103.3,40.9,103.9" />
29 | </svg></span> <span class="text-sm font-medium">Requires Svelte</span>
30 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_symfony.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/symfony/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Symfony">
4 | <span class="text-xs rounded-full bg-white dark:bg-gray-900 px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" class="w-4 h-4 dark:hidden" viewBox="0 0 911 912" fill="none" xmlns="http://www.w3.org/2000/svg">
6 | <path d="M911 455.685C911 707.389 707.066 911.435 455.488 911.435C203.926 911.435 0 707.389 0 455.685C0 204.022 203.918 0 455.488 0C707.066 0 911 204.022 911 455.685Z" fill="black"/>
7 | <path d="M654.655 168.61C608.384 170.194 567.993 195.75 537.918 231.016C504.618 269.735 482.493 315.613 466.517 362.491C437.977 339.072 415.974 308.771 370.158 295.591C334.755 285.41 297.581 289.602 263.387 315.085C247.208 327.184 236.04 345.459 230.737 362.694C216.994 407.369 245.178 447.169 257.978 461.43L285.974 491.422C291.733 497.313 305.646 512.655 298.839 534.643C291.53 558.59 262.689 574.053 233.117 564.96C219.902 560.906 200.929 551.065 205.185 537.227C206.931 531.547 210.992 527.273 213.177 522.43C215.159 518.197 216.125 515.06 216.735 513.167C222.136 495.542 214.745 472.587 195.861 466.744C178.228 461.332 160.198 465.623 153.205 488.318C145.269 514.109 157.615 560.922 223.711 581.285C301.154 605.134 366.633 562.929 375.933 507.942C381.789 473.497 366.227 447.876 337.752 414.975L314.531 389.273C300.48 375.224 295.656 351.269 310.202 332.864C322.482 317.328 339.961 310.713 368.607 318.498C410.435 329.841 429.059 358.875 460.15 382.293C447.333 424.441 438.927 466.736 431.341 504.659L426.679 532.945C404.457 649.566 387.483 713.621 343.38 750.39C334.495 756.72 321.792 766.179 302.657 766.861C292.602 767.162 289.361 760.247 289.223 757.224C289.004 750.195 294.933 746.953 298.872 743.8C304.777 740.583 313.686 735.244 313.069 718.156C312.436 697.971 295.713 680.46 271.558 681.256C253.454 681.866 225.872 698.897 226.911 730.1C227.975 762.335 257.994 786.477 303.266 784.949C327.461 784.121 381.505 774.288 434.744 710.964C496.723 638.36 514.063 555.153 527.107 494.242L541.67 413.821C549.727 414.788 558.393 415.446 567.798 415.674C644.989 417.307 683.585 377.32 684.17 348.214C684.568 330.605 672.637 313.257 655.913 313.671C643.966 314.004 628.949 321.976 625.359 338.511C621.817 354.722 649.911 369.373 627.958 383.634C612.363 393.726 584.416 400.828 545.041 395.067L552.196 355.478C566.807 280.412 584.83 188.087 653.201 185.828C658.196 185.593 676.405 186.04 676.836 198.114C676.949 202.12 675.95 203.177 671.24 212.391C666.431 219.575 664.628 225.718 664.864 232.738C665.514 251.883 680.076 264.494 701.177 263.763C729.385 262.82 737.474 235.355 737.011 221.24C735.826 188.047 700.877 167.082 654.655 168.61Z" fill="white"/>
8 | </svg>
9 | <svg aria-hidden="true" class="hidden w-4 h-4 dark:inline-block" viewBox="0 0 911 912" fill="none" xmlns="http://www.w3.org/2000/svg">
10 | <path d="M911 455.685C911 707.389 707.066 911.435 455.488 911.435C203.926 911.435 0 707.389 0 455.685C0 204.022 203.918 0 455.488 0C707.066 0 911 204.022 911 455.685Z" fill="white"/>
11 | <path d="M654.655 168.61C608.384 170.194 567.993 195.75 537.918 231.016C504.617 269.735 482.493 315.613 466.517 362.491C437.977 339.072 415.974 308.771 370.158 295.591C334.755 285.41 297.58 289.602 263.387 315.085C247.208 327.184 236.04 345.459 230.737 362.694C216.994 407.369 245.178 447.169 257.978 461.43L285.974 491.422C291.733 497.313 305.646 512.655 298.839 534.643C291.53 558.59 262.689 574.053 233.116 564.96C219.902 560.906 200.929 551.065 205.185 537.227C206.931 531.547 210.992 527.273 213.177 522.43C215.159 518.197 216.125 515.06 216.735 513.167C222.136 495.542 214.745 472.587 195.861 466.744C178.228 461.332 160.197 465.623 153.204 488.318C145.269 514.109 157.615 560.922 223.711 581.285C301.154 605.134 366.633 562.929 375.933 507.942C381.789 473.497 366.227 447.876 337.752 414.975L314.531 389.273C300.48 375.224 295.656 351.269 310.202 332.864C322.482 317.328 339.961 310.713 368.607 318.498C410.435 329.841 429.059 358.875 460.15 382.293C447.333 424.441 438.927 466.736 431.341 504.659L426.679 532.945C404.457 649.566 387.483 713.621 343.38 750.39C334.495 756.72 321.792 766.179 302.657 766.861C292.602 767.162 289.361 760.247 289.223 757.224C289.004 750.195 294.933 746.953 298.872 743.8C304.777 740.583 313.686 735.244 313.069 718.156C312.436 697.971 295.712 680.46 271.558 681.256C253.454 681.866 225.872 698.897 226.911 730.1C227.975 762.335 257.994 786.477 303.266 784.949C327.461 784.121 381.505 774.288 434.744 710.964C496.723 638.36 514.063 555.153 527.107 494.242L541.67 413.821C549.727 414.788 558.393 415.446 567.798 415.674C644.989 417.307 683.585 377.32 684.17 348.214C684.568 330.605 672.637 313.257 655.913 313.671C643.966 314.004 628.948 321.976 625.359 338.511C621.817 354.722 649.911 369.373 627.958 383.634C612.363 393.726 584.416 400.828 545.04 395.067L552.196 355.478C566.807 280.412 584.83 188.087 653.201 185.828C658.196 185.593 676.405 186.04 676.836 198.114C676.949 202.12 675.95 203.177 671.24 212.391C666.431 219.575 664.628 225.718 664.864 232.738C665.514 251.883 680.076 264.494 701.177 263.763C729.385 262.82 737.474 235.355 737.011 221.24C735.826 188.047 700.877 167.082 654.655 168.61Z" fill="#1F2A37"/>
12 | </svg>
13 | </span>
14 | <span class="text-sm font-medium">Requires Symfony</span>
15 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_tw3.html:
--------------------------------------------------------------------------------
1 | <aside class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white"
2 | aria-label="Component requires Tailwind v3.0">
3 | <span class="text-xs bg-white dark:bg-gray-900 rounded-full text-white px-3 py-1.5 mr-3">
4 | <svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
5 | <g clip-path="url(#prefix__clip0)">
6 | <path fill="#38bdf8" fill-rule="evenodd"
7 | d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
8 | clip-rule="evenodd" />
9 | </g>
10 | <defs>
11 | <clipPath id="prefix__clip0">
12 | <path fill="#fff" d="M0 0h54v32.4H0z" />
13 | </clipPath>
14 | </defs>
15 | </svg></span> <span class="text-sm font-medium">Requires Tailwind CSS v3.0</span>
16 | </aside>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_tw4.html:
--------------------------------------------------------------------------------
1 | <aside class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white"
2 | aria-label="Component requires Tailwind v3.0">
3 | <span class="text-xs bg-white dark:bg-gray-900 rounded-full text-white px-3 py-1.5 mr-3">
4 | <svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 54 33">
5 | <g clip-path="url(#prefix__clip0)">
6 | <path fill="#38bdf8" fill-rule="evenodd"
7 | d="M27 0c-7.2 0-11.7 3.6-13.5 10.8 2.7-3.6 5.85-4.95 9.45-4.05 2.054.513 3.522 2.004 5.147 3.653C30.744 13.09 33.808 16.2 40.5 16.2c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C36.756 3.11 33.692 0 27 0zM13.5 16.2C6.3 16.2 1.8 19.8 0 27c2.7-3.6 5.85-4.95 9.45-4.05 2.054.514 3.522 2.004 5.147 3.653C17.244 29.29 20.308 32.4 27 32.4c7.2 0 11.7-3.6 13.5-10.8-2.7 3.6-5.85 4.95-9.45 4.05-2.054-.513-3.522-2.004-5.147-3.653C23.256 19.31 20.192 16.2 13.5 16.2z"
8 | clip-rule="evenodd" />
9 | </g>
10 | <defs>
11 | <clipPath id="prefix__clip0">
12 | <path fill="#fff" d="M0 0h54v32.4H0z" />
13 | </clipPath>
14 | </defs>
15 | </svg></span> <span class="text-sm font-medium">Tailwind CSS v4.0</span>
16 | </aside>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_typescript:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/typescript/" | relURL }}">
2 | <aside class="mb-5" aria-label="Integration requires TypeScript">
3 | <span class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white">
4 | <span class="text-xs rounded-full bg-white dark:bg-gray-900 px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" fill="none" class="w-4 h-4" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect fill="#3178c6" height="512" rx="50" width="512"/><rect fill="#3178c6" height="512" rx="50" width="512"/><path clip-rule="evenodd" d="m316.939 407.424v50.061c8.138 4.172 17.763 7.3 28.875 9.386s22.823 3.129 35.135 3.129c11.999 0 23.397-1.147 34.196-3.442 10.799-2.294 20.268-6.075 28.406-11.342 8.138-5.266 14.581-12.15 19.328-20.65s7.121-19.007 7.121-31.522c0-9.074-1.356-17.026-4.069-23.857s-6.625-12.906-11.738-18.225c-5.112-5.319-11.242-10.091-18.389-14.315s-15.207-8.213-24.18-11.967c-6.573-2.712-12.468-5.345-17.685-7.9-5.217-2.556-9.651-5.163-13.303-7.822-3.652-2.66-6.469-5.476-8.451-8.448-1.982-2.973-2.974-6.336-2.974-10.091 0-3.441.887-6.544 2.661-9.308s4.278-5.136 7.512-7.118c3.235-1.981 7.199-3.52 11.894-4.615 4.696-1.095 9.912-1.642 15.651-1.642 4.173 0 8.581.313 13.224.938 4.643.626 9.312 1.591 14.008 2.894 4.695 1.304 9.259 2.947 13.694 4.928 4.434 1.982 8.529 4.276 12.285 6.884v-46.776c-7.616-2.92-15.937-5.084-24.962-6.492s-19.381-2.112-31.066-2.112c-11.895 0-23.163 1.278-33.805 3.833s-20.006 6.544-28.093 11.967c-8.086 5.424-14.476 12.333-19.171 20.729-4.695 8.395-7.043 18.433-7.043 30.114 0 14.914 4.304 27.638 12.912 38.172 8.607 10.533 21.675 19.45 39.204 26.751 6.886 2.816 13.303 5.579 19.25 8.291s11.086 5.528 15.415 8.448c4.33 2.92 7.747 6.101 10.252 9.543 2.504 3.441 3.756 7.352 3.756 11.733 0 3.233-.783 6.231-2.348 8.995s-3.939 5.162-7.121 7.196-7.147 3.624-11.894 4.771c-4.748 1.148-10.303 1.721-16.668 1.721-10.851 0-21.597-1.903-32.24-5.71-10.642-3.806-20.502-9.516-29.579-17.13zm-84.159-123.342h64.22v-41.082h-179v41.082h63.906v182.918h50.874z" fill="#fff" fill-rule="evenodd"/></svg>
6 | </span>
7 | <span class="text-sm font-medium">Requires TypeScript</span>
8 | </aside>
9 | </a>
--------------------------------------------------------------------------------
/layouts/shortcodes/requires_vue.html:
--------------------------------------------------------------------------------
1 | <a href="{{ "getting-started/vue/" | relURL }}"
2 | class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
3 | aria-label="Component requires Vue">
4 | <span class="text-xs bg-green-500 rounded-full text-white px-3 py-1.5 mr-3">
5 | <svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="vuejs" class="w-4 h-4" role="img"
6 | xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
7 | <path fill="currentColor"
8 | d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z">
9 | </path>
10 | </svg></span> <span class="text-sm font-medium">Requires Vue.js</span>
11 | </a>
--------------------------------------------------------------------------------
/layouts/sitemap.xml:
--------------------------------------------------------------------------------
1 | {{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\" ?>" | safeHTML }}
2 | <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3 | {{- range .Data.Pages -}}{{ if ne .Params.sitemap_exclude true }}
4 | <url>
5 | <loc>{{ .Permalink }}</loc>{{ if not .Lastmod.IsZero }}
6 | <lastmod>{{ safeHTML (.Lastmod.Format "2006-01-02T15:04:05-07:00") }}</lastmod>{{ end }}{{ with .Sitemap.ChangeFreq }}
7 | <changefreq>{{ . }}</changefreq>{{ end }}{{ if ge .Sitemap.Priority 0.0 }}
8 | <priority>{{ .Sitemap.Priority }}</priority>{{ end }}
9 | </url>{{ end }}{{ end }}
10 | </urlset>
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/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-chrome-192x192.png
--------------------------------------------------------------------------------
/static/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-chrome-512x512.png
--------------------------------------------------------------------------------
/static/android-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-icon-144x144.png
--------------------------------------------------------------------------------
/static/android-icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-icon-192x192.png
--------------------------------------------------------------------------------
/static/android-icon-36x36.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-icon-36x36.png
--------------------------------------------------------------------------------
/static/android-icon-48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-icon-48x48.png
--------------------------------------------------------------------------------
/static/android-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-icon-72x72.png
--------------------------------------------------------------------------------
/static/android-icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/android-icon-96x96.png
--------------------------------------------------------------------------------
/static/apple-icon-114x114.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-114x114.png
--------------------------------------------------------------------------------
/static/apple-icon-120x120.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-120x120.png
--------------------------------------------------------------------------------
/static/apple-icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-144x144.png
--------------------------------------------------------------------------------
/static/apple-icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-152x152.png
--------------------------------------------------------------------------------
/static/apple-icon-180x180.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-180x180.png
--------------------------------------------------------------------------------
/static/apple-icon-57x57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-57x57.png
--------------------------------------------------------------------------------
/static/apple-icon-60x60.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-60x60.png
--------------------------------------------------------------------------------
/static/apple-icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-72x72.png
--------------------------------------------------------------------------------
/static/apple-icon-76x76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-76x76.png
--------------------------------------------------------------------------------
/static/apple-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon-precomposed.png
--------------------------------------------------------------------------------
/static/apple-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-icon.png
--------------------------------------------------------------------------------
/static/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/apple-touch-icon.png
--------------------------------------------------------------------------------
/static/browserconfig.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="utf-8"?>
2 | <browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
--------------------------------------------------------------------------------
/static/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/favicon-16x16.png
--------------------------------------------------------------------------------
/static/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/favicon-32x32.png
--------------------------------------------------------------------------------
/static/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/favicon-96x96.png
--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/favicon.ico
--------------------------------------------------------------------------------
/static/images/blog/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/blog/image-1.jpg
--------------------------------------------------------------------------------
/static/images/blog/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/blog/image-2.jpg
--------------------------------------------------------------------------------
/static/images/blog/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/blog/image-3.jpg
--------------------------------------------------------------------------------
/static/images/blog/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/blog/image-4.jpg
--------------------------------------------------------------------------------
/static/images/blog/image-7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/blog/image-7.jpg
--------------------------------------------------------------------------------
/static/images/carousel/carousel-1.svg:
--------------------------------------------------------------------------------
1 | <svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="800" height="800" rx="4" fill="#374151"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M435.728 374.699C442.49 374.699 447.972 369.17 447.972 362.349C447.972 355.529 442.49 350 435.728 350C428.966 350 423.484 355.529 423.484 362.349C423.484 369.17 428.966 374.699 435.728 374.699ZM401.84 449.481H323.72C322.935 449.481 322.456 448.618 322.871 447.952L377.41 360.384C377.796 359.765 378.685 359.743 379.086 360.351C383.293 366.72 402.278 395.489 418.118 419.866L435.099 392.44C435.476 391.832 436.35 391.805 436.765 392.387L476.23 447.899C476.699 448.557 476.237 449.47 475.429 449.478L437.22 449.854L401.84 449.481Z" fill="#6B7280"/>
4 | </svg>
5 |
--------------------------------------------------------------------------------
/static/images/carousel/carousel-2.svg:
--------------------------------------------------------------------------------
1 | <svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="800" height="800" rx="4" fill="#4B5563"/>
3 | <path fill-rule="evenodd" clip-rule="evenodd" d="M400 392C406.365 392 412.47 389.471 416.971 384.971C421.471 380.47 424 374.365 424 368C424 361.635 421.471 355.53 416.971 351.029C412.47 346.529 406.365 344 400 344C393.635 344 387.53 346.529 383.029 351.029C378.529 355.53 376 361.635 376 368C376 374.365 378.529 380.47 383.029 384.971C387.53 389.471 393.635 392 400 392V392ZM344 464C344 456.646 345.448 449.364 348.263 442.57C351.077 435.776 355.202 429.602 360.402 424.402C365.602 419.202 371.775 415.077 378.57 412.263C385.364 409.449 392.646 408 400 408C407.354 408 414.636 409.449 421.43 412.263C428.225 415.077 434.398 419.202 439.598 424.402C444.798 429.602 448.923 435.776 451.737 442.57C454.552 449.364 456 456.646 456 464H344Z" fill="#6B7280"/>
4 | </svg>
5 |
--------------------------------------------------------------------------------
/static/images/carousel/carousel-3.svg:
--------------------------------------------------------------------------------
1 | <svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="800" height="800" rx="4" fill="#374151"/>
3 | <path d="M349.625 345.75C343.207 345.75 338 350.957 338 357.375V442.625C338 449.043 343.207 454.25 349.625 454.25H450.375C456.793 454.25 462 449.043 462 442.625V357.375C462 350.957 456.793 345.75 450.375 345.75H349.625ZM349.625 353.5H375.297C376.096 353.5 376.75 354.154 376.75 354.953V359.797C376.75 360.596 376.096 361.25 375.297 361.25H347.203C346.404 361.25 345.75 360.596 345.75 359.797V357.375C345.75 355.244 347.494 353.5 349.625 353.5ZM452.797 376.75H347.203C346.404 376.75 345.75 376.096 345.75 375.297V366.578C345.75 365.779 346.404 365.125 347.203 365.125H380.625L387.939 354.154C388.205 353.742 388.666 353.5 389.15 353.5H450.375C452.506 353.5 454.25 355.244 454.25 357.375V375.297C454.25 376.096 453.596 376.75 452.797 376.75ZM400 440.688C383.967 440.688 370.938 427.658 370.938 411.625C370.938 395.592 383.967 382.562 400 382.562C416.033 382.562 429.062 395.592 429.062 411.625C429.062 427.658 416.033 440.688 400 440.688ZM400 390.312C388.254 390.312 378.688 399.879 378.688 411.625C378.688 423.371 388.254 432.938 400 432.938C411.746 432.938 421.312 423.371 421.312 411.625C421.312 399.879 411.746 390.312 400 390.312ZM388.375 415.5C386.244 415.5 384.5 413.756 384.5 411.625C384.5 403.076 391.451 396.125 400 396.125C402.131 396.125 403.875 397.869 403.875 400C403.875 402.131 402.131 403.875 400 403.875C395.737 403.875 392.25 407.362 392.25 411.625C392.25 413.756 390.506 415.5 388.375 415.5Z" fill="#6B7280"/>
4 | </svg>
5 |
--------------------------------------------------------------------------------
/static/images/carousel/carousel-4.svg:
--------------------------------------------------------------------------------
1 | <svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="800" height="800" rx="4" fill="#4B5563"/>
3 | <path d="M457.42 413.283C457.465 412.855 457.6 412.45 457.6 412.023C457.6 404.08 451.142 397.623 443.2 397.623C440.365 397.623 437.755 398.478 435.527 399.873C431.567 391.143 422.815 385.023 412.6 385.023C398.695 385.023 387.4 396.295 387.4 410.223C387.4 410.898 387.557 411.528 387.602 412.18C376.442 413.013 367.6 422.238 367.6 433.623C367.6 445.548 377.275 455.222 389.2 455.222H450.4C462.325 455.222 472 445.548 472 433.623C472 424.15 465.88 416.208 457.42 413.283V413.283ZM360.58 408.198C350.747 398.365 350.747 382.39 360.58 372.58C370.412 362.748 386.388 362.748 396.22 372.58C398.403 374.763 400.022 377.283 401.237 379.938C403.442 379.105 405.76 378.588 408.145 378.25L414.85 358.248C415.75 355.57 413.207 353.05 410.53 353.928L390.775 360.52L381.437 341.89C380.2 339.37 376.6 339.37 375.34 341.89L366.025 360.52L346.247 353.928C343.592 353.05 341.05 355.593 341.927 358.248L348.52 378.003L329.89 387.34C327.37 388.6 327.37 392.178 329.89 393.438L348.52 402.753L341.927 422.508C341.027 425.185 343.57 427.705 346.247 426.828L363.37 421.135C364.742 418.345 366.52 415.803 368.68 413.598C365.732 412.383 362.965 410.583 360.58 408.198V408.198ZM359.5 390.378C359.5 399.558 366.092 407.208 374.777 408.895C376.577 407.838 378.445 406.915 380.447 406.263C381.662 396.295 387.422 387.7 395.612 382.638C392.642 376.09 386.05 371.5 378.4 371.5C367.982 371.5 359.5 379.96 359.5 390.378V390.378Z" fill="#6B7280"/>
4 | </svg>
5 |
--------------------------------------------------------------------------------
/static/images/carousel/carousel-5.svg:
--------------------------------------------------------------------------------
1 | <svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="800" height="800" rx="4" fill="#374151"/>
3 | <path d="M400 338.583C383.811 338.583 370.688 351.707 370.688 367.896C370.688 380.984 389.845 404.839 397.185 413.498C398.672 415.252 401.331 415.252 402.815 413.498C410.155 404.839 429.313 380.984 429.313 367.896C429.313 351.707 416.189 338.583 400 338.583ZM400 377.667C394.603 377.667 390.229 373.293 390.229 367.896C390.229 362.499 394.603 358.125 400 358.125C405.397 358.125 409.771 362.499 409.771 367.896C409.771 373.293 405.397 377.667 400 377.667ZM337.681 388.822C336.299 389.374 335.115 390.328 334.281 391.56C333.446 392.792 333 394.246 333 395.734V453.968C333 456.601 335.659 458.402 338.104 457.425L370.222 442.806V388.582C368.166 384.865 366.484 381.245 365.279 377.783L337.681 388.822ZM400 422.257C396.727 422.257 393.63 420.819 391.506 418.311C386.933 412.914 382.068 406.768 377.667 400.463V442.803L422.333 457.692V400.465C417.932 406.768 413.07 412.916 408.494 418.313C406.37 420.819 403.273 422.257 400 422.257ZM461.896 376.076L429.778 390.695V457.695L462.319 444.678C463.701 444.126 464.885 443.172 465.72 441.94C466.554 440.708 467 439.255 467 437.767V379.533C467 376.899 464.341 375.098 461.896 376.076Z" fill="#6B7280"/>
4 | </svg>
5 |
--------------------------------------------------------------------------------
/static/images/chatbubble/calendar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/chatbubble/calendar.png
--------------------------------------------------------------------------------
/static/images/dashboard-overview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/dashboard-overview.png
--------------------------------------------------------------------------------
/static/images/examples/image-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-1.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-1@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-1@2x.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-2.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-2@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-2@2x.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-3.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-3@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-3@2x.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-4.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-4@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-4@2x.jpg
--------------------------------------------------------------------------------
/static/images/examples/image-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/examples/image-5.jpg
--------------------------------------------------------------------------------
/static/images/gradients/mesh-gradient-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/gradients/mesh-gradient-1.png
--------------------------------------------------------------------------------
/static/images/gradients/mesh-gradient-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/gradients/mesh-gradient-2.png
--------------------------------------------------------------------------------
/static/images/gradients/mesh-gradient-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/gradients/mesh-gradient-3.png
--------------------------------------------------------------------------------
/static/images/gradients/mesh-gradient-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/gradients/mesh-gradient-4.png
--------------------------------------------------------------------------------
/static/images/gradients/mesh-gradient-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/gradients/mesh-gradient-5.png
--------------------------------------------------------------------------------
/static/images/misc/flowbite-yt-screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/misc/flowbite-yt-screenshot.png
--------------------------------------------------------------------------------
/static/images/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/og-image.png
--------------------------------------------------------------------------------
/static/images/people/profile-picture-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/people/profile-picture-1.jpg
--------------------------------------------------------------------------------
/static/images/people/profile-picture-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/people/profile-picture-2.jpg
--------------------------------------------------------------------------------
/static/images/people/profile-picture-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/people/profile-picture-3.jpg
--------------------------------------------------------------------------------
/static/images/people/profile-picture-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/people/profile-picture-4.jpg
--------------------------------------------------------------------------------
/static/images/people/profile-picture-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/people/profile-picture-5.jpg
--------------------------------------------------------------------------------
/static/images/popovers/italy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/popovers/italy.png
--------------------------------------------------------------------------------
/static/images/products/apple-watch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/products/apple-watch.png
--------------------------------------------------------------------------------
/static/images/products/imac.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/products/imac.png
--------------------------------------------------------------------------------
/static/images/products/iphone-12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/images/products/iphone-12.png
--------------------------------------------------------------------------------
/static/images/themesberg.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"><defs><style>.cls-1{fill:#ff7f66;}.cls-2,.cls-4{fill:#2a344f;}.cls-2{opacity:0.32;isolation:isolate;}.cls-3{opacity:0.16;}</style></defs><title>logo</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Group_16" data-name="Group 16"><g id="Group_15" data-name="Group 15"><g id="Group_12" data-name="Group 12"><path id="Path_35" data-name="Path 35" class="cls-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z"/><path id="Path_36" data-name="Path 36" class="cls-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z"/><path id="Path_37" data-name="Path 37" class="cls-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z"/></g><path id="Path_38" data-name="Path 38" class="cls-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z"/><g id="Group_13" data-name="Group 13" class="cls-3"><path id="Path_39" data-name="Path 39" class="cls-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z"/><path id="Path_40" data-name="Path 40" class="cls-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z"/><path id="Path_41" data-name="Path 41" class="cls-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z"/></g></g></g></g></g></svg>
--------------------------------------------------------------------------------
/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/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/ms-icon-144x144.png
--------------------------------------------------------------------------------
/static/ms-icon-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/ms-icon-150x150.png
--------------------------------------------------------------------------------
/static/ms-icon-310x310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/ms-icon-310x310.png
--------------------------------------------------------------------------------
/static/ms-icon-70x70.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/ms-icon-70x70.png
--------------------------------------------------------------------------------
/static/mstile-150x150.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/themesberg/flowbite/d9a2e544c679232b5cc67ff3734e3c890cf8f580/static/mstile-150x150.png
--------------------------------------------------------------------------------
/static/safari-pinned-tab.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" standalone="no"?>
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
3 | "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
4 | <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
5 | width="528.000000pt" height="528.000000pt" viewBox="0 0 528.000000 528.000000"
6 | preserveAspectRatio="xMidYMid meet">
7 | <metadata>
8 | Created by potrace 1.14, written by Peter Selinger 2001-2017
9 | </metadata>
10 | <g transform="translate(0.000000,528.000000) scale(0.100000,-0.100000)"
11 | fill="#000000" stroke="none">
12 | <path d="M2659 5205 c-3 -2 -64 -6 -138 -9 -73 -3 -135 -7 -139 -10 -4 -2 -36
13 | -7 -71 -10 -35 -4 -85 -11 -110 -16 -25 -6 -55 -12 -66 -13 -98 -17 -354 -93
14 | -430 -127 -63 -28 -111 -48 -117 -49 -8 -1 -119 -59 -228 -119 -36 -20 -66
15 | -40 -68 -44 -2 -4 -8 -8 -13 -8 -30 0 -341 -242 -433 -336 -90 -93 -197 -214
16 | -228 -257 -12 -17 -27 -37 -33 -43 -6 -6 -28 -37 -50 -70 -22 -32 -43 -61 -46
17 | -64 -3 -3 -9 -12 -12 -20 -4 -8 -16 -28 -26 -45 -57 -92 -105 -183 -166 -320
18 | -31 -69 -121 -336 -130 -383 -3 -17 -12 -60 -20 -94 -7 -35 -16 -81 -20 -103
19 | -3 -23 -7 -52 -10 -65 -26 -136 -27 -586 -1 -717 3 -11 8 -43 11 -70 4 -26 11
20 | -64 15 -83 5 -19 11 -46 14 -60 13 -75 81 -297 111 -367 10 -21 20 -47 25 -58
21 | 4 -11 17 -42 30 -70 12 -27 22 -52 22 -55 0 -3 8 -16 17 -30 9 -14 23 -38 31
22 | -55 27 -57 172 -288 191 -305 3 -3 18 -23 34 -45 16 -22 34 -44 39 -50 6 -5
23 | 34 -37 61 -70 76 -90 156 -169 300 -294 17 -14 59 -47 95 -73 36 -26 70 -52
24 | 77 -58 7 -5 15 -10 18 -10 3 0 26 -15 52 -34 27 -18 68 -45 93 -59 45 -27 276
25 | -141 318 -158 63 -26 134 -53 142 -55 3 0 12 -3 20 -7 76 -30 323 -92 410
26 | -102 19 -3 46 -7 60 -10 50 -10 132 -17 325 -27 24 -1 283 13 310 17 17 3 50
27 | 7 75 10 25 3 56 7 70 10 14 4 36 8 50 11 14 2 46 9 71 15 26 6 53 11 60 12 8
28 | 2 20 6 27 10 6 5 12 6 12 4 0 -7 170 45 255 78 102 39 209 88 285 130 25 14
29 | 50 25 57 25 7 0 13 3 13 8 0 4 21 18 48 32 26 13 49 27 52 30 3 3 25 18 50 34
30 | 209 133 433 337 598 543 41 51 141 192 167 235 79 132 115 200 115 215 0 7 3
31 | 13 8 13 4 0 16 21 26 48 11 26 27 65 37 87 20 43 78 200 84 226 2 9 12 47 23
32 | 85 21 72 46 187 58 264 3 25 8 53 10 64 25 133 25 662 0 704 -2 4 -7 32 -11
33 | 62 -11 87 -12 93 -24 135 -6 22 -12 49 -14 60 -26 138 -125 402 -215 575 -86
34 | 163 -208 351 -279 426 -17 19 -29 34 -27 34 20 0 -254 269 -346 340 -25 19
35 | -47 38 -50 41 -14 16 -130 95 -222 153 -161 99 -360 194 -504 241 -27 9 -56
36 | 19 -64 22 -8 3 -19 7 -25 9 -5 1 -41 12 -80 22 -171 49 -365 80 -537 87 -54 2
37 | -102 6 -106 9 -5 3 -11 4 -13 1z m-361 -1756 c59 -34 123 -70 142 -81 19 -11
38 | 76 -44 125 -73 50 -29 108 -62 130 -74 22 -12 57 -32 77 -44 45 -27 242 -141
39 | 314 -182 28 -16 89 -51 134 -77 46 -27 87 -48 91 -48 5 0 9 -4 9 -10 0 -5 5
40 | -10 11 -10 6 0 56 -27 111 -60 54 -33 102 -60 106 -60 13 0 52 -53 52 -71 0
41 | -18 -40 -51 -65 -55 -7 -1 -44 -9 -81 -17 -38 -9 -82 -18 -99 -21 -25 -5 -163
42 | -34 -240 -51 -28 -6 -116 -24 -140 -28 -133 -23 -221 -65 -301 -143 -33 -32
43 | -114 -120 -180 -194 -65 -74 -126 -141 -134 -150 -8 -9 -44 -49 -80 -89 -102
44 | -115 -152 -127 -165 -38 -3 23 -5 399 -3 835 3 860 0 817 56 807 12 -2 71 -32
45 | 130 -66z"/>
46 | </g>
47 | </svg>
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/d9a2e544c679232b5cc67ff3734e3c890cf8f580/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 |
--------------------------------------------------------------------------------