Use with Vite - Flowbite React

This guide provides three ways to integrate Flowbite React with Vite:

1. Quick Start: Create a new project with everything pre-configured
2. Add to Existing Project: Add Flowbite React to an existing Vite project
3. Manual Setup: Set up everything from scratch manually

Quick Start#

The fastest way to get started is using our project creation CLI, which sets up a new Vite project with Flowbite React, Tailwind CSS, and all necessary configurations:

npx create-flowbite-react@latest -t vite

This will:

• Create a new Vite project
• Install and configure Tailwind CSS
• Set up Flowbite React with all required dependencies
• Configure necessary plugins
• Set up example components

Add to Existing Project#

If you already have a Vite project and want to add Flowbite React, you can use our initialization CLI:

npx flowbite-react@latest init

This will automatically:

• Install Flowbite React and its dependencies
• Configure Tailwind CSS to include Flowbite React plugin
• Set up necessary configurations

Manual Setup#

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

1. Create Project#

Create a new Vite project with React and TypeScript:

npx create-vite@latest my-app
cd my-app

When prompted, select the "React" option.

2. Configure Tailwind CSS#

1. Install Tailwind CSS and its Vite plugin:

npm install -D tailwindcss @tailwindcss/vite

2. Configure the Vite plugin in your vite.config.ts:

import tailwindcss from "@tailwindcss/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

3. Add Tailwind CSS to your CSS file (src/index.css):

@import "tailwindcss";

3. Install Flowbite React#

Install Flowbite React:

npx flowbite-react@latest init

This will:

• Install Flowbite React and its dependencies
• Configure Tailwind CSS to include Flowbite React plugin
• Configure Vite to include Flowbite React plugin

Try it out#

Now that you have successfully installed Flowbite React you can start using the components from the library:

// src/App.tsx
import { Button } from "flowbite-react";

export default function App() {
  return <Button>Click me</Button>;
}

Templates#

• Github
• StackBlitz