Use with Laravel - Flowbite React

Learn how to install Flowbite React for your Laravel project using Inertia and start building modern websites with the most popular PHP framework in the world

Using the CLI#

Run the following command to scaffold a new Flowbite React project using Laravel and Inertia:

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

# yarn
yarn create flowbite-react --template laravel

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

# bun
bun create flowbite-react@latest --template laravel

Manual Installation

Create project#

Run the following command to create a new Laravel project with Inertia and Tailwind CSS:

laravel new flowbite-react-laravel --breeze --stack=react

Note: The installer will ask some more questions.

Install Flowbite React#

  1. Run the following command to install flowbite-react:
npm i flowbite-react
  1. Add the Flowbite plugin to tailwind.config.js and include content from flowbite-react:
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "node_modules/flowbite-react/lib/esm/**/*.js",
  ],
  plugins: [
    // ...
    require("flowbite/plugin"),
  ],
};

Try it out#

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

// resources/js/Pages/Welcome.jsx

import { Button } from "flowbite-react";

export default function Welcome() {
  return <Button>Click me</Button>;
}

Templates#