Use with Next.js - Flowbite React

Flowbite Next.js Starter#

• GitHub Repo
• Demo

Add Flowbite React to your Next.js project#

1. Install dependencies:

npm install --save autoprefixer postcss tailwindcss flowbite flowbite-react

2. Create postcss.config.js:

module.exports = {
  plugins: {
    autoprefixer: {},
    tailwindcss: {},
  },
};

3. Create tailwind.config.js:

/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  // note: if using Next.js 12 or earlier, you'll want to include ./pages/ instead of ./app/
  content: ['./app/**/*.{ts,tsx}', './node_modules/flowbite-react/lib/**/*.js'],
  plugins: [require('flowbite/plugin')],
  // ...
};

4. And replace the contents of styles/globals.css by:

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start using flowbite-react!

'use client';

import { Alert } from 'flowbite-react';

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