Use with Next.js - Flowbite React

Copy the starter or follow the steps below to get started with Flowbite React in Next.js

Table of Contents

Flowbite Next.js Starter

Add Flowbite React to your Next.js project

  1. Install dependencies:
npm install --save autoprefixer postcss tailwindcss flowbite flowbite-react
  1. Create postcss.config.js:
module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
};
  1. Create tailwind.config.js:
/**
 * @type {import('@types/tailwindcss/tailwind-config').TailwindConfig}
 */
module.exports = {
  content: ['./node_modules/flowbite-react/**/*.js', './pages/**/*.{ts,tsx}', './public/**/*.html'],
  plugins: [require('flowbite/plugin')],
  theme: {},
};
  1. And replace the contents of styles/globals.css by:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Start using flowbite-react!
'use client';

import { Alert } from 'flowbite-react';

export default function MyPage() {
  return <Alert color="info">Alert!</Alert>;
}