Use with Bun - Flowbite React

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

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

npx create-flowbite-react@latest -t bun

This will:

• Create a new Bun project
• Install and configure Tailwind CSS
• Set up Flowbite React with all required dependencies
• Configure development and build scripts
• Set up example components

Add to Existing Project#

If you already have a Bun 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 build configurations

Manual Setup#

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

1. Create Bun Project#

Create a new Bun project with React and Tailwind CSS:

mkdir my-app && cd my-app
bun init

When prompted:

• Select "React" for the project template
• Select "TailwindCSS" for the React template

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 Bun to include Flowbite React plugin
• Set up necessary build configurations

3. Configure Dark Mode#

Add the ThemeModeScript component to prevent dark mode flickering:

// src/main.tsx
import { ThemeModeScript } from "flowbite-react";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <ThemeModeScript />
    <App />
  </React.StrictMode>,
);

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 <Button>Click me</Button>;
}

Templates#

• Github
• StackBlitz