Use with Create React App - Flowbite React

Learn how to install Flowbite React for your Create React App project and start developing modern web applications with interactive components

Using the CLI#

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

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

# yarn
yarn create flowbite-react --template cra

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

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

Manual Installation

Create project#

Run the following command to create a new Create React App project:

npx create-react-app flowbite-react-cra

Setup Tailwind CSS#

  1. Install tailwindcss and its peer dependencies:
npm i -D tailwindcss
  1. Generate tailwind.config.js file:
npx tailwindcss init
  1. Add the paths to all of your template files in your tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  plugins: [],
  1. Add the @tailwind directives for each of Tailwind's layers to your ./src/index.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:
const flowbite = require("flowbite-react/tailwind");

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
  plugins: [
    // ...

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 App() {
  return <Button>Click me</Button>;