Use with @lazarv/react-server - Flowbite React

Learn how to install Flowbite React with @lazarv/react-server framework

This guide provides three ways to integrate Flowbite React with @lazarv/react-server:

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

npx create-flowbite-react@latest --template react-server

This will:

  • Create a new @lazarv/react-server project
  • Install and configure Tailwind CSS
  • Set up Flowbite React with all required dependencies
  • Configure dark mode support
  • Set up example components with proper client/server component separation
Add to Existing Project

Add to Existing Project#

If you already have a @lazarv/react-server 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 @lazarv/react-server project:

npx @lazarv/create-react-server@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 support dark mode in your application, add the ThemeModeScript to your root layout:

// src/App.tsx
import { ThemeModeScript } from "flowbite-react";

export function App() {
  return (
    <html lang="en" className="h-screen" suppressHydrationWarning>
      <head>
        <ThemeModeScript />
      </head>
      {/* Rest of your app */}
    </html>
  );
}

Try it out#

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

// src/App.tsx
import { Button } from "flowbite-react";

export default function App() {
  return (
    <html lang="en" className="h-screen" suppressHydrationWarning>
      <head></head>
      <body
        className="flex min-h-full w-full flex-col items-center justify-center dark:bg-zinc-900 dark:text-gray-400"
        suppressHydrationWarning
      >
        <Button>Click me</Button>
      </body>
    </html>
  );
}

Templates#