Use with Next.js - Flowbite React

Learn how to install Flowbite React for your Next.js project and start developing with the most popular React-based framework built by Vercel

This guide provides three ways to integrate Flowbite React with Next.js:

Quick Start: Create a new project with everything pre-configured
Add to Existing Project: Add Flowbite React to an existing Next.js project
Manual Setup: Set up everything from scratch manually

Quick Start (Recommended)

Quick Start#

The fastest way to get started is using our project creation CLI, which sets up a new Next.js project with Flowbite React, Tailwind CSS, and all necessary configurations:

npx create-flowbite-react@latest -t nextjs

This will:

Create a new Next.js project
Install and configure Tailwind CSS
Set up Flowbite React with all required dependencies
Configure dark mode support
Set up example components

Add to Existing Project

Add to Existing Project#

If you already have a Next.js project and want to add Flowbite React, you can use our initialization CLI:

npx flowbite-react@latest init

This will automatically:

Install Flowbite React and its dependencies
Configure Tailwind CSS to include Flowbite React plugin
Set up necessary configurations

Manual Setup

Manual Setup#

If you prefer to set everything up manually or need more control over the configuration, follow these steps:

1. Create Project#

Create a new Next.js project:

When prompted:

Would you like to use Tailwind CSS? » Yes

npx create-next-app@latest

2. Install Flowbite React#

Install Flowbite React:

npx flowbite-react@latest init

This will:

Install Flowbite React and its dependencies
Configure Tailwind CSS to include Flowbite React plugin
Configure Vite to include Flowbite React plugin

3. Configure Dark Mode (Optional)#

To avoid page flicker in dark mode before hydration, add the ThemeModeScript to your root layout:

For App Router:

// app/layout.tsx
import { ThemeModeScript } from "flowbite-react";

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <head>
        <ThemeModeScript />
      </head>
      <body>{children}</body>
    </html>
  );
}

For Pages Router:

// pages/_document.tsx
import { ThemeModeScript } from "flowbite-react";

export default function Document() {
  return (
    <Html suppressHydrationWarning>
      <Head>
        <ThemeModeScript />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Try it out#

Now that you have successfully installed Flowbite React you can start using the components from the library:

// app/page.tsx
import { Button } from "flowbite-react";

export default function Page() {
  return <Button>Click me</Button>;
}

Templates#

Official#

Community#

Kitchen Sink - Demo