Use with Modern.js - Flowbite React

This guide provides three ways to integrate Flowbite React with Modern.js:

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

npx create-flowbite-react@latest -t modernjs 

This will:

• Create a new Modern.js 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 Modern.js 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 Modern.js project:

npx @modern-js/create@latest my-app cd my-app 

When prompted, select:

• "Web Application"
• "React"

2. Configure Tailwind CSS#

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss @tailwindcss/postcss 

Update modern.config.ts to include Tailwind CSS:

import { appTools, defineConfig } from "@modern-js/app-tools"; import tailwindcss from "@tailwindcss/postcss";  // https://modernjs.dev/en/configure/app/usage export default defineConfig({  runtime: {  router: true,  },  plugins: [  appTools({  bundler: "rspack", // Set to 'webpack' to enable webpack  }),  ],  tools: {  postcss: {  postcssOptions: {  plugins: [tailwindcss],  },  },  }, }); 

Update src/routes/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
• Configure Modern.js 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:

// src/routes/page.tsx import { Button } from "flowbite-react";  export default function Index() {  return (  <div className="p-4">  <Button>Click me</Button>  </div>  ); } 

Templates#

• Github
• StackBlitz