Use with AdonisJS - Flowbite React

Learn how to install Flowbite React for your AdonisJS project and start developing modern full-stack web applications

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 (Recommended)

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 --template 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

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

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#

First, install Tailwind CSS and its Vite plugin:

npm install tailwindcss @tailwindcss/vite

Then, configure the Vite plugin in your configuration:

// vite.config.ts
import adonisjs from "@adonisjs/vite/client";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    tailwindcss(),
    adonisjs({
      // ...
    }),
  ],
});

Add an @import to ./resources/css/app.css that imports Tailwind CSS's styles and tell Tailwind CSS to scan your resources/views directory for utilities:

@import "tailwindcss";
@source "../views";

Make sure your compiled CSS is included in the <head>:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
  </head>
  <body>
    <!-- Your content -->
  </body>
</html>

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#