FlowBite Logo Flowbite
Pricing

Tailwind CSS Next.js - Flowbite

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

Next.js is a popular web development framework based on the React library that enables server-side rendering and generating static websites improving development time and website performance.

This technology is being used by hundreds of thousands of developers and companies such as Vercel, Netflix, TikTok, Twitch, Hulu, Nike and HBO Max since its original release in 2016.

Getting started #

The fastest way you can get started with Flowbite React and Next.js is by using our project creation CLI.

Create a Next.js project #

Use the following command to create a new Next.js project:

npx create-flowbite-react@latest -t nextjs

This will create a new project configured with Next.js,Tailwind CSS (v4) and Flowbite React and it also sets up the dark mode configuration and a couple of example components.

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 command will install Flowbite React and its dependencies, configure Tailwind CSS to include Flowbite React plugin, and set up necessary configurations.

Custom installation #

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

Create new project #

Use the CLI toolkit from Vercel to create a new Next.js project and include Tailwind CSS when prompted:

npx create-next-app@latest

Now you can proceed with installing the Flowbite React UI component library.

Install Flowbite React #

You can easily install Flowbite React by using the official CLI toolkit:

npx flowbite-react@latest init

This will install Flowbite React with all dependencies and configures Tailwind to include the Flowbite plugin.

Adding dark mode #

If you want to properly configure dark mode and prevent page flickering before hydration, then you need to add the ThemeModeScript to your root layout.

Add the following code to the 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>
    );
}

And the following code to the page router:

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

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

Congratulations! You have now installed and configured Flowbite React in your Next.js application.

Next.js components #

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

You can check out all of the UI components from the Flowbite React library.

Theme customization #

Flowbite React offers an advanced system of customizing your components and templates using the new theming engine. You can style components by directly using the className attribute of the component, but also by passing a theme object to the <ThemeProvider> component.

For example, here is a simple way you can update a button component:

import { Button } from "flowbite-react";

function App() {
  return <Button className="bg-red-500 hover:bg-red-600">Custom Button</Button>;
}

Additionally, you can also use the createTheme helper to create a theme object that you can then pass on to the <ThemeProvider> component with which you can style subcomponents too:

import { Button, createTheme, ThemeProvider } from "flowbite-react";

const customTheme = createTheme({
  button: {
    color: {
      primary: "bg-red-500 hover:bg-red-600",
      secondary: "bg-blue-500 hover:bg-blue-600",
    },
    size: {
      lg: "px-6 py-3 text-lg",
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Button color="primary">Red Button</Button>
      <Button color="secondary" size="lg">
        Large Blue Button
      </Button>
    </ThemeProvider>
  );
}

Open-source community #

The Flowbite React UI library is a free and open-source project under the MIT license. You can find the source code on GitHub and contribute to the project together with our community of developers.

Support development #

If you would like to support our open-source work, then you can check out the pro version of Flowbite which brings you over 400+ components and templates, a Figma design system, admin dashboard, and more.