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>;
}