Use with Parcel - Flowbite React

Learn how to install Flowbite React for your Parcel project and start developing modern web applications with interactive components

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

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

npx create-flowbite-react@latest -t parcel

This will:

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

Add to Existing Project#

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

Note: Make sure you have a .parcelrc file in your project root. This file is required for proper bundler/plugin detection to work with Flowbite React.

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 with React#

Create a new Parcel project:

mkdir flowbite-react-parcel
cd flowbite-react-parcel
npm init -y

Install Parcel and React:

npm install react react-dom
npm install -D parcel @types/react @types/react-dom

Configure package.json file and update scripts with start and build steps:

{
  "name": "flowbite-react-parcel",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "start": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

Create a .parcelrc file:

{
  "extends": ["@parcel/config-default"]
}

Create a tsconfig.json file in the root of your project:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

Create src/index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flowbite React Parcel</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./index.tsx"></script>
  </body>
</html>

Create src/index.tsx file:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./app";

import "./index.css";

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

Create src/app.tsx file:

export default function App() {
  return <h1>Hello world!</h1>;
}

2. Configure Tailwind CSS#

Install Tailwind CSS and PostCSS:

npm install -D tailwindcss @tailwindcss/postcss

Create .postcssrc file and enable the tailwindcss plugin:

{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Create a src/index.css file and import 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 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:

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

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

Templates#