Use with Rspack - Flowbite React

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

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

npx create-flowbite-react@latest -t rspack 

This will:

• Create a new Rspack 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 Rspack 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 Rspack project:

npx create-rspack@latest 

When prompted:

• Select the "React" template

2. Configure Tailwind CSS#

Install Tailwind CSS and PostCSS:

npm install -D tailwindcss @tailwindcss/postcss postcss postcss-loader 

Update the rspack.config.ts file to enable the postcss-loader:

export default defineConfig({  // ...  module: {  rules: [  {  test: /\.css$/,  use: ["postcss-loader"],  type: "css",  },  // ...  ],  }, } 

Create a postcss.config.mjs file:

touch postcss.config.mjs 

Add @tailwindcss/postcss to your postcss.config.mjs file:

/** @type {import('postcss-load-config').Config} */ export default {  plugins: {  "@tailwindcss/postcss": {},  }, }; 

Update the css file src/index.css to include Tailwind CSS:

@import "tailwindcss"; 

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
• Set up necessary configurations

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 function App() {  return (  <>  <Button>Click me</Button>  </>  ); } 

Templates#

• Github
• StackBlitz