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

This guide provides three ways to integrate Flowbite React with Astro:

  1. Quick Start: Create a new project with everything pre-configured
  2. Add to Existing Project: Add Flowbite React to an existing Astro 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 Astro project with Flowbite React, Tailwind CSS, and all necessary configurations:

npx create-flowbite-react@latest -t astro

This will:

  • Create a new Astro 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 an Astro 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 dark mode support
Manual Setup

Manual Setup#

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

1. Create Astro Project#

Create a new Astro project:

npx create-astro@latest

2. Add React Support#

Install React support using the Astro CLI:

npx astro add react

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

3. Configure Tailwind CSS#

Install Tailwind CSS using the Astro CLI:

npx astro add tailwind

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

4. 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

5. Configure Dark Mode#

To prevent dark mode flickering, add the ThemeModeScript component to your root layout:

// src/layouts/index.astro
---
import { ThemeModeScript } from "flowbite-react";
---

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

Import and use the layout in your pages:

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

<RootLayout>
  // Your content here
</RootLayout>

6. Component Hydration#

By default, UI Framework components are not hydrated in the client. To make Flowbite React components interactive, add a client:* directive:

<DarkThemeToggle client:load />

Available directives:

  • client:load: Hydrates immediately on page load
  • client:idle: Hydrates when the browser is idle
  • client:visible: Hydrates when the component becomes visible

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>

Templates#