Use with Waku - Flowbite React

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

1. Quick Start: Create a new project with everything pre-configured
2. Add to Existing Project: Add Flowbite React to an existing Waku project
3. Manual Setup: Set up everything from scratch manually

Quick Start#

The fastest way to get started is using our project creation CLI, which sets up a new Waku project with Flowbite React, Tailwind CSS, and all necessary configurations:

npx create-flowbite-react@latest -t waku

This will:

• Create a new Waku 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#

If you already have a Waku 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#

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

1. Create Project#

Create a new Waku project:

npx create-waku@latest

2. Create Vite Config#

Create a vite.config.ts file in the root of your project:

import { defineConfig } from "vite";

export default defineConfig({
  plugins: [],
});

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

Try it out#

Now that you have successfully installed Flowbite React you can start using the components from the library. Remember that Waku uses React Server Components by default, so you'll need to add the 'use client' directive to use interactive components:

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

export default async function HomePage() {
  return (
    <>
      <Button>Click me</Button>
    </>
  );
}

Templates#

• Github
• StackBlitz