Use with TanStack Router - Flowbite React

This guide provides three ways to integrate Flowbite React with TanStack Router:

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

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

This will:

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

Add to Existing Project#

If you already have a TanStack 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 or need more control over the configuration, follow these steps:

1. Create Project#

Create a new TanStack Router project:

npx @tanstack/create-router@latest 

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 { TanStackRouterVite } from "@tanstack/router-plugin/vite"; import react from "@vitejs/plugin-react"; import { defineConfig } from "vite";  // https://vitejs.dev/config/ export default defineConfig({  plugins: [  TanStackRouterVite({  target: "react",  autoCodeSplitting: true,  }),  react(),  tailwindcss(),  ], }); 

3. Create a new CSS file (src/index.css):

touch src/index.css 

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

@import "tailwindcss"; 

5. Import the CSS file in your src/main.tsx file:

import "./index.css"; 

6. Remove Tailwind CSS browser script from the index.html file, since we are using the Vite plugin (recommended):

<script src="https://unpkg.com/@tailwindcss/browser@4"></script> <style type="text/tailwindcss">  html {  color-scheme: light dark;  }  * {  @apply border-gray-200 dark:border-gray-800;  }  body {  @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;  } </style> 

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 you can start using Flowbite React components in your routes:

// src/routes/index.tsx import { createFileRoute } from "@tanstack/react-router"; import { Button } from "flowbite-react";  export const Route = createFileRoute("/")({  component: HomeComponent, });  function HomeComponent() {  return (  <div className="p-2">  <Button>Click me</Button>  </div>  ); } 

Templates#

• Github
• StackBlitz