Use with Parcel - Flowbite React

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

Using the CLI#

Run the following command to scaffold a new Flowbite React project using Parcel:

# npm
npm create flowbite-react@latest -- --template parcel

# yarn
yarn create flowbite-react --template parcel

# pnpm
pnpm create flowbite-react@latest --template parcel

# bun
bun create flowbite-react@latest --template parcel
Manual Installation

Create project#

Follow the steps to create a Parcel project using React and Tailwind CSS.

Setup Parcel#

  1. Create a directory for your project:
mkdir flowbite-react-parcel
  1. Initialize package.json file:
npm init -y
  1. Install Parcel:
npm i -D parcel
  1. Create src directory:
mkdir src
  1. Create src/index.html file:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Parcel App</title>
  </head>
  <body></body>
</html>
  1. Configure package.json file, add source and update scripts with start and build steps:
{
  "name": "flowbite-react-parcel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Setup React#

  1. Install React:
npm i react react-dom
  1. Create src/index.js file:
import { createRoot } from "react-dom/client";
import { App } from "./app";

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<App />);
  1. Create src/app.js file:
export function App() {
  return <h1>Hello world!</h1>;
}
  1. Update src/index.html file:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Parcel App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

Setup Tailwind CSS#

  1. Install tailwindcss and its peer dependencies:
npm i -D tailwindcss postcss
  1. Generate tailwind.config.js file:
npx tailwindcss init
  1. Create .postcssrc file and enable the tailwindcss plugin:
{
  "plugins": {
    "tailwindcss": {}
  }
}
  1. Add the paths to all of your template files in your tailwind.config.js file:
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. Create a ./src/index.css file and add the @tailwind directives for each of Tailwind's layers:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Update src/index.html to include src/index.css file in the head:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My Parcel App</title>
    <link href="./index.css" rel="stylesheet" />
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="index.js"></script>
  </body>
</html>

Install Flowbite React#

  1. Run the following command to install flowbite-react:
npm i flowbite-react
  1. Add the Flowbite plugin to tailwind.config.js and include content from flowbite-react:
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ...
    "node_modules/flowbite-react/lib/esm/**/*.js",
  ],
  plugins: [
    // ...
    require("flowbite/plugin"),
  ],
};

Try it out#

Now that you have successfully installed Flowbite React you can start using the components from the library.

import { Button } from "flowbite-react";

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

Templates#