Use with AdonisJS - Flowbite React

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

Using the CLI#

Run the following command to scaffold a new Flowbite React project using AdonisJS:

# npm
npm create flowbite-react@latest -- --template adonisjs

# yarn
yarn create flowbite-react --template adonisjs

# pnpm
pnpm create flowbite-react@latest --template adonisjs

# bun
bun create flowbite-react@latest --template adonisjs
Manual Installation

Create project#

Run the following command to create a new AdonisJS project using the CLI:

npm init adonisjs@latest -- -K=inertia --adapter=react --ssr --install

Setup Tailwind CSS#

  1. Install tailwindcss and its peer dependencies:
npm i -D tailwindcss postcss autoprefixer
  1. Generate tailwind.config.js and postcss.config.js files:
npx tailwindcss init -p
  1. Add the paths to all of your template files in your tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./inertia/**/*.{js,ts,jsx,tsx}", "./resources/**/*.{edge,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Add the @tailwind directives for each of Tailwind's layers to your ./inertia/css/app.css file:
@tailwind base;
@tailwind components;
@tailwind utilities;

Install Flowbite React#

  1. Run the following command to install flowbite-react:
npm i flowbite-react
  1. Add the Flowbite React content path and plugin to tailwind.config.js:
import flowbite from "flowbite-react/tailwind";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    flowbite.content(),
  ],
  plugins: [
    // ...
    flowbite.plugin(),
  ],
};

Dark mode#

In server side rendered applications, such as AdonisJS, to avoid page flicker (if dark mode is set) before AdonisJS hydrates the content, ThemeModeScript component must be rendered (see implementation below).

ThemeModeScript renders a script tag that sets dark or removes dark from <html> element before hydration occurs.

Configure#

  1. Import and render ThemeModeScript in the return body of setup function:
// 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#