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:

  1. Quick Start: Create a new project with everything pre-configured
  2. Add to Existing Project: Add Flowbite React to an existing Next.js project
  3. 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#