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