Use with RedwoodJS - Flowbite React

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

Using the CLI#

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

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

# yarn
yarn create flowbite-react --template redwoodjs

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

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

Manual Installation

Create project#

  1. Run the following command to create a new RedwoodJS project using the CLI:
yarn create redwood-app
  1. Create a new homepage using the CLI:
yarn redwood generate page home /

Setup Tailwind CSS#

Install tailwindcss using the CLI:

yarn rw setup ui tailwindcss

Install Flowbite React#

  1. Run the following command to install flowbite-react:
yarn workspace web add flowbite-react
  1. Add the Flowbite plugin to tailwind.config.js and include content from flowbite-react:
/** @type {import('tailwindcss').Config} */
module.exports = {
  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.

import { Button } from "flowbite-react";

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

Templates#