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 = {
  content: ['./node_modules/flowbite-react/**/*.js', './pages/**/*.{ts,tsx}', './public/**/*.html'],
  plugins: [require('flowbite/plugin')],
  theme: {},
};

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

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

5. Start using flowbite-react!

import { Alert } from 'flowbite-react';

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