Use with AdonisJS - Flowbite React

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

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

npx create-flowbite-react@latest -t adonisjs 

This will:

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

Add to Existing Project#

If you already have an AdonisJS 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
• Configure Vite to include Flowbite React plugin

Manual Setup#

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

1. Create AdonisJS Project#

Create a new AdonisJS project with Inertia.js and React support:

npx create-adonisjs@latest -K=inertia --adapter=react 

2. Set Up 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 { defineConfig } from "vite";  export default defineConfig({  plugins: [  // ...  tailwindcss(),  ], }); 

3. Add Tailwind CSS to your CSS file (inertia/css/app.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

4. Configure Dark Mode#

Add the ThemeModeScript component to prevent dark mode flickering:

// inertia/app/ssr.tsx import { createInertiaApp } from "@inertiajs/react"; import { ThemeModeScript } from "flowbite-react"; import ReactDOMServer from "react-dom/server";  export default function render(page: any) {  return createInertiaApp({  page,  render: ReactDOMServer.renderToString,  resolve: (name) => {  const pages = import.meta.glob("../pages/**/*.tsx", { eager: true });  return pages[`../pages/${name}.tsx`];  },  setup: ({ App, props }) => (  <>  <ThemeModeScript />  <App {...props} />  </>  ),  }); } 

Try it out#

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

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

Templates#

• Github
• StackBlitz