Use with Astro - Flowbite React

Learn how to install Flowbite React for your Astro project and start building modern websites with a lightning fast and content-focused web framework

Using the CLI#

Run the following command to scaffold a new Flowbite React project using Astro:

# npm
npm create flowbite-react@latest -- --template astro

# yarn
yarn create flowbite-react --template astro

# pnpm
pnpm create flowbite-react@latest --template astro

# bun
bun create flowbite-react@latest --template astro

Manual Installation

Create project#

Run the following command to create a new Astro project:

npm create astro@latest

Install react using the Astro CLI:

npx astro add react

Note: Make sure to answer Yes to all the questions.

Setup Tailwind CSS#

Install tailwindcss using the Astro CLI:

npx astro add tailwind

Note: Make sure to answer Yes to all the questions.

Install Flowbite React#

Run the following command to install flowbite-react:

npm i flowbite-react

Add the Flowbite React content path and plugin to tailwind.config.mjs:

import flowbite from "flowbite-react/tailwind";

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    flowbite.content(),
  ],
  plugins: [
    // ...
    flowbite.plugin(),
  ],
};

Dark mode#

In server side rendered applications, such as Astro, to avoid page flicker (if dark mode is set) before Astro hydrates the content, ThemeModeScript component must be rendered in Head component (see implementation below).

ThemeModeScript renders a script tag that sets dark or removes dark from <html> element before hydration occurs.

Configure#

Create a root layout file under src/layouts folder called index.astro:

// src/layouts/index.astro

<html lang="en">
  <head></head>
  <body>
    <slot />
  </body>
</html>

Import and render ThemeModeScript in the <head> tag:

// src/layouts/index.astro

---
import { ThemeModeScript } from "flowbite-react";
---

<html lang="en">
  <head>
    <ThemeModeScript />
  </head>
  <body>
    <slot />
  </body>
</html>

Import the newly created layout and wrap the page content with it:

// src/pages/index.astro

---
import RootLayout from "../layouts/index.astro";
---

<RootLayout>
  // ...
</RootLayout>

Component hydration#

By default, a UI Framework component is not hydrated in the client. If no client:* directive is provided, its HTML is rendered onto the page without JavaScript (Astro - Client Directives).

To enable Flowbite React components to be interactive add client:load, client:idle or client:visible (see docs) as a prop.

<DarkThemeToggle client:load />

Try it out#

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

// src/pages/index.astro

---
import { Button } from "flowbite-react";
import RootLayout from "../layouts/index.astro";
---

<RootLayout>
  <Button>Click me</Button>
</RootLayout>