v3-docs/docs/tutorials/integrations/flowbite.md
Learn how to install Tailwind CSS with Flowbite for your Meteor.js project to build modern, responsive web applications.
Flowbite is an open-source library of UI components based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, templates, and more.
It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, but also some more advanced interactive elements such as datepickers.
Using both Meteor.js, Tailwind CSS and Flowbite can help you get started building modern UI web applications by leveraging the extensive framework features of Meteor.js, the utility-first approach of the Tailwind CSS framework and the open-source UI components from the Flowbite Library.
Make sure that you have Node.js v14 or newer installed on your computer to be able to install Meteor.js, Tailwind CSS and Flowbite using npm.
For more information on how to install Meteor.js, check out the official installation guide.
The easiest way to create a new Meteor.js project with Tailwind CSS support is by using the --tailwind flag:
meteor create flowbite-app --tailwind
cd flowbite-app
This will create a new Meteor project with Tailwind CSS pre-configured. No extra configuration needed as we added the --tailwind flag when setting up the project.
Now that you have created a new Meteor.js project with Tailwind CSS configured automatically, we can proceed with installing Flowbite and Flowbite React to start leveraging the open-source UI components.
npm install --save flowbite flowbite-react
tailwind.config.js file:module.exports = {
content: [
'./imports/ui/**/*.{js,jsx,ts,tsx}',
'./client/*.html',
'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}',
],
theme: {
extend: {},
},
plugins: [require('flowbite/plugin')],
};
import { Alert } from 'flowbite-react';
export default function MyPage() {
return <Alert color="info">Alert!</Alert>;
}
The code above will import the <Alert> component that you can use to send feedback messages.
To get you started, here are some examples of how to use Flowbite components in your Meteor.js project.
import { useState } from 'react';
import { Button, Modal } from 'flowbite-react';
export default function DefaultModal() {
const [openModal, setOpenModal] = useState(false);
return (
<>
<Button onClick={() => setOpenModal(true)}>Toggle modal</Button>
<Modal show={openModal} onClose={() => setOpenModal(false)}>
<Modal.Header>Terms of Service</Modal.Header>
<Modal.Body>
<div className="space-y-6">
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens,
companies around the world are updating their terms of service agreements to comply.
</p>
<p className="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union's General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to
ensure a common set of data rights in the European Union.
</p>
</div>
</Modal.Body>
<Modal.Footer>
<Button onClick={() => setOpenModal(false)}>I accept</Button>
<Button color="gray" onClick={() => setOpenModal(false)}>
Decline
</Button>
</Modal.Footer>
</Modal>
</>
);
}
import { Dropdown } from 'flowbite-react';
export default function DropdownExample() {
return (
<Dropdown label="Dropdown button">
<Dropdown.Item>Dashboard</Dropdown.Item>
<Dropdown.Item>Settings</Dropdown.Item>
<Dropdown.Item>Earnings</Dropdown.Item>
<Dropdown.Item>Sign out</Dropdown.Item>
</Dropdown>
);
}
import { Navbar } from 'flowbite-react';
export default function NavbarExample() {
return (
<Navbar fluid={true} rounded={true}>
<Navbar.Brand href="/">
<span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
My App
</span>
</Navbar.Brand>
<Navbar.Toggle />
<Navbar.Collapse>
<Navbar.Link href="/" active={true}>
Home
</Navbar.Link>
<Navbar.Link href="/about">About</Navbar.Link>
<Navbar.Link href="/services">Services</Navbar.Link>
<Navbar.Link href="/pricing">Pricing</Navbar.Link>
<Navbar.Link href="/contact">Contact</Navbar.Link>
</Navbar.Collapse>
</Navbar>
);
}
import { Card } from 'flowbite-react';
export default function CardExample() {
return (
<Card className="max-w-sm">
<h5 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Noteworthy technology acquisitions
</h5>
<p className="font-normal text-gray-700 dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of 2021 so far,
in reverse chronological order.
</p>
</Card>
);
}
import { Button, Label, TextInput } from 'flowbite-react';
export default function FormExample() {
const handleSubmit = (e) => {
e.preventDefault();
// Handle form submission
};
return (
<form className="flex max-w-md flex-col gap-4" onSubmit={handleSubmit}>
<div>
<div className="mb-2 block">
<Label htmlFor="email" value="Your email" />
</div>
<TextInput
id="email"
type="email"
placeholder="[email protected]"
required
/>
</div>
<div>
<div className="mb-2 block">
<Label htmlFor="password" value="Your password" />
</div>
<TextInput id="password" type="password" required />
</div>
<Button type="submit">Submit</Button>
</form>
);
}
The Flowbite community has created an open-source Meteor.js starter project that has Tailwind CSS and Flowbite React set up beforehand. You can clone it by checking out the repository on GitHub.