Use with React Router - Flowbite React

React Router v7 can be used either as a framework or as a library. This guide covers both approaches and provides three ways to integrate Flowbite React with each mode:

1. Quick Start: Create a new project with everything pre-configured
2. Add to Existing Project: Add Flowbite React to an existing React Router 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 React Router project with Flowbite React, Tailwind CSS, and all necessary configurations:

npx create-flowbite-react@latest -t react-router 

This will:

• Create a new React Router project
• Install and configure Tailwind CSS
• Set up Flowbite React with all required dependencies
• Configure dark mode support
• Set up example components and routes

Add to Existing Project#

If you already have a React Router 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, follow these steps:

1. Choose Your Mode#

Framework Mode Setup:#

See React Router as a Framework for more information.

npx create-react-router@latest my-app cd my-app 

Library Mode Setup:#

See React Router as a Library for more information.

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

When prompted, select the "React" option.

Install React Router:

npm install react-router 

Set up React Router by updating your src/main.tsx file to use the BrowserRouter component:

import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router"; import App from "./App";  import "./index.css";  createRoot(document.getElementById("root")!).render(  <StrictMode>  <BrowserRouter>  <App />  </BrowserRouter>  </StrictMode>, ); 

Configure Tailwind CSS with Vite (Library Mode)#

Since the library mode doesn't include Tailwind CSS by default, you'll need to set it up manually:

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"; 

2. 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#

Framework Mode Example#

// app/routes/home.tsx import { Button } from "flowbite-react";  export default function Home() {  return (  <>  <Button>Click me</Button>  </>  ); } 

Library Mode Example#

// src/App.tsx import { Button } from "flowbite-react";  export default function App() {  return (  <>  <Button>Click me</Button>  </>  ); } 

Templates#

• Github
• StackBlitz