flowbite-ts-test

Build websites even faster with components on top of Tailwind CSS

------

Table of Contents

- Table of Contents
- Documentation
- Getting started
- Install using NPM
- Include via CDN
- Bundled JavaScript
- Data attributes
- ESM and CJS
- TypeScript
- JavaScript Frameworks
- Back-end Frameworks
- Components
- Figma Design System
- Flowbite Blocks
- Pro version
- Community
- Copyright and license

Documentation

For full documentation, visit flowbite.com.

Getting started

Flowbite can be included as a plugin into an existing Tailwind CSS project and it is supposed to help you build websites faster by having a set of web components to work with built with the utility classes from Tailwind CSS.

$3

Make sure that you have Node.js and Tailwind CSS installed.

1. Install Flowbite as a dependency using NPM by running the following command:

``bash
npm install flowbite
`

2. Require Flowbite as a plugin inside the tailwind.config.js file:

`javascript
module.exports = {

plugins: [
require('flowbite/plugin')
]

}
`

3. Make sure that you add the template path to the tailwind.config.js file:

`javascript
module.exports = {

content: [
"./node_modules/flowbite/*/.js"
]

}
`

4. Include the main JavaScript file to make interactive elements work:

`html

`

$3

The quickest way to get started working with Flowbite is to simply include the CSS and JavaScript into your project via a CDN service such as UNPKG or CDNJS (content delivery networks).

Require the following minified stylesheet inside the head tag:

`html

`

And include the following javascript file before the end of the body tag:

`html

`

$3

One of the most popular way of using Flowbite is to include the bundled Javascript file which is UMD ready using a bundler such as Webpack or Parcel which makes sure that all of the data attributes and functionality will work out-of-the-box.

You can directly import the main JavaScript file inside your bundled app-bundle.js file like this:

`javascript
import 'flowbite';
`

This file has access to all of the components and it automatically applies event listeners to the data attributes.

$3

The preferred way to use the interactive UI components from Flowbite is via the data attributes interface which allows us to add functionality via the HTML element attributes and most of the examples on our documentation applies this strategy.

For example, to set up a modal component all you need to do is use data-modal-target and data-modal-{toggle|show|hide} to toggle, show, or hide the component by clicking on any trigger element.

`html

Toggle modal


`javascript
import { Modal } from 'flowbite'

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

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

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

modal.show();
`

Check out the JavaScript behaviour section of each component's page to learn how you can use this.

$3

Flowbite supports type declarations for the interactive UI components including object interfaces and parameter types. Check out the following examples to learn how you can use types with Flowbite.

Additionally to our code above, we will now import some relevant types from the Flowbite package, namely the ModalOptions and ModalInterface:

`javascript
import { Modal } from 'flowbite'
import type { ModalOptions, ModalInterface } from 'flowbite'

// other code
`

Generally speaking, all of the components have an interface definition that you can use whenever you create a new object to make sure that you're using the correct types of parameters and methods.

When creating a new modal you can set the ModalInterface as the main type:

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

Flowbite also supports type definitions for the options object so if you want to set the placement of the modal based on types, here's how you would do that:

`javascript
const modalOptions: ModalOptions = {
placement: 'top-right'
}

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

Learn more about Flowbite and TypeScript in the quickstart guide.

$3

The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, and Angular:

- 🌀 Flowbite React Library
- 🍀 Flowbite Vue Library
- 🎸 Flowbite Svelte Library
- 📕 Flowbite Angular Library

We also wrote integration guides for the following front-end frameworks and libraries:

- 📝 Flowbite with React guide
- 📝 Flowbite with Next.js guide
- 📝 Flowbite with Vue guide
- 📝 Flowbite with Nuxt.js guide
- 📝 Flowbite with Svelte guide

$3

Flowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript:

- 📚 Using Flowbite with Laravel
- 🚊 Using Flowbite with Ruby on Rails 7
- 🐸 Using Flowbite with Django
- 🌶 Using Flowbite with Flask

Components

Flowbite is an open source collection of UI components built with the utility classes from Tailwind CSS that you can use as a starting point when coding user interfaces and websites.

Alerts	Badge	Breadcrumbs
Buttons	Button group	Cards
Dropdown	Forms	List group
Typography	Modal	Tabs
Navbar	Pagination	Timeline
Progress bar	Tables	Toast
Tooltips	Datepicker	Spinner
Footer	Accordion	Sidebar
Carousel	Avatar	Rating
Input Field	File Input	Search Input
Select	Textarea	Checkbox
Radio	Toggle	Range Slider
Floating Label	Mega Menu	Skeleton
KBD (keyboard)	Drawer (offcanvas)	Popover
Video	Heading	Paragraph
Blockquote	Image	List
Link	Text	Horizontal line (HR)
Speed Dial	Stepper	Indicators

Figma Design System

If you need the Figma files for the components you can check out our website for more information:

🎨 Get access to the Figma design files

Flowbite Blocks

Check out Flowbite Blocks to get access to over 250+ website sections coded in Tailwind CSS and Flowbite:

📦 Check out Flowbite Blocks

Pro version

Get access to all premium features including the Figma design system, access to all Flowbite Block sections and a dashboard UI interface:

💎 Check out Flowbite Pro

Community

If you need help or just want to discuss about the library join the community on Github:

⌨️ Discuss about Flowbite on GitHub

For casual chatting with others using the library:

💬 Join the Flowbite Discord Server

Video tutorials and presentations using Flowbite:

🎥 Subscribe to our YouTube channel

Copyright and license

The Flowbite name and logos are trademarks of Bergside Inc.

📝 Read about the licensing terms