CLI - Flowbite React

Overview#

The Flowbite React CLI provides a comprehensive set of tools for:

• Creating new Flowbite React projects
• Setting up Flowbite React in existing projects
• Managing development workflows
• Handling class generation
• Configuring your development environment
• Patching Tailwind CSS configurations
• Providing help and documentation

Installation & Setup#

1. Create a New Project#

To scaffold a new Flowbite React application:

npx create-flowbite-react@latest

The CLI will guide you through:

• Project directory name
• Template selection
• Git repository initialization

2. Add to Existing Project#

To integrate Flowbite React into an existing project:

npx flowbite-react@latest init

This command performs several automated setup steps:

• Verifies Tailwind CSS installation
• Installs Flowbite React dependencies
• Configures Tailwind CSS
• Creates the .flowbite-react config directory
• Creates config.json and .gitignore files in the config directory
• Creates .vscode/settings.json and .vscode/extensions.json files
• Sets up bundler-specific plugins

CLI Commands#

flowbite-react build#

Generates the class list for your components. This command:

• Creates the .flowbite-react output directory if it doesn't exist
• Generates a comprehensive list of Tailwind classes used in your components
• Analyzes your project files to find component imports if no components are explicitly defined in your config
• Writes the generated class list to .flowbite-react/class-list.json
• This class list is used by the Tailwind plugin to ensure all component classes are included in your CSS

flowbite-react create#

Creates a new component with the proper structure and theming setup.

The create command uses the configuration options from .flowbite-react/config.json to determine:

1. Where to create the component (path):

   • Determines the directory where the component will be created
   • Default: "src/components"

2. Language format (tsx):

   • When true: Creates a TypeScript component (.tsx) with full type definitions
   • When false: Creates a JavaScript component (.jsx) without TypeScript syntax
   • Default: true

3. React Server Components support (rsc):

   • When true: Adds the "use client"; directive at the top of the component file
   • When false: Omits the directive for client-only components
   • Default: true

The generated component includes:

• Proper theme structure with base styles
• Theme resolution with the Flowbite React theming system
• Component props with proper typing (in TypeScript mode)
• Forward ref implementation for DOM access
• Display name for better debugging

flowbite-react dev#

Starts the development mode which:

• Watches for component changes
• Automatically updates class lists
• Provides real-time class generation
• Monitors imported components

flowbite-react help#

Displays help information about available commands:

• Lists all available commands with descriptions
• Shows usage examples
• Provides guidance on command options
• Can be accessed with flowbite-react help or flowbite-react --help

flowbite-react init#

Initializes Flowbite React in your project. This command:

• Ensures Tailwind CSS is installed
• Creates the .flowbite-react config directory
• Creates config.json and .gitignore files in the config directory
• Creates .vscode/settings.json and .vscode/extensions.json files
• Detects and configures your bundler with the appropriate plugin
• Adds postinstall script to package.json (if no bundler detected)

flowbite-react install#

Installs Flowbite React in your project:

• Detects your package manager (npm, yarn, pnpm, bun, etc.)
• Installs the latest version of flowbite-react
• Skips installation if already installed

flowbite-react patch#

Patches Tailwind CSS to expose its version number for compatibility detection:

• Creates a JavaScript file that exports the Tailwind CSS version
• Necessary because package.json cannot be reliably read by all bundlers
• Makes the version accessible via import version from "tailwindcss/version"
• Enables Flowbite React to adapt its behavior based on the installed Tailwind version

flowbite-react register#

Registers the Flowbite React process for development:

• Runs the dev process in the background
• Manages process lifecycle
• Handles automatic class generation
• Creates and maintains process ID file

flowbite-react setup plugin#

Sets up the appropriate bundler plugin for your project:

• Detects your bundler configuration file
• Supports multiple bundlers (Bun, ESBuild, Parcel, Rsbuild, Rspack, Vite, Webpack, etc.)
• Adds the Flowbite React plugin to your bundler config
• Configures plugin settings automatically

flowbite-react setup tailwindcss#

Configures Tailwind CSS for use with Flowbite React:

• Sets up Tailwind CSS v3 or v4 configuration
• Adds necessary plugin configurations
• Updates content paths for component styles
• Configures class generation settings

flowbite-react setup vscode#

Sets up VSCode for optimal development:

• Configures Tailwind CSS IntelliSense
• Sets up file associations
• Adds recommended extensions
• Configures class attribute settings

Project Templates#

The CLI supports various framework templates. Each template comes with a complete guide and example implementation:

adonisjs         # AdonisJS          https://github.com/themesberg/flowbite-react-template-adonisjs
astro            # Astro             https://github.com/themesberg/flowbite-react-template-astro
blitzjs          # Blitz.js          https://github.com/themesberg/flowbite-react-template-blitzjs
bun              # Bun               https://github.com/themesberg/flowbite-react-template-bun
esbuild          # Esbuild           https://github.com/themesberg/flowbite-react-template-esbuild
farm             # Farm              https://github.com/themesberg/flowbite-react-template-farm
gatsby           # Gatsby            https://github.com/themesberg/flowbite-react-template-gatsby
laravel          # Laravel           https://github.com/themesberg/flowbite-react-template-laravel
meteorjs         # Meteor.js         https://github.com/themesberg/flowbite-react-template-meteorjs
modernjs         # Modern.js         https://github.com/themesberg/flowbite-react-template-modernjs
nextjs           # Next.js           https://github.com/themesberg/flowbite-react-template-nextjs
parcel           # Parcel            https://github.com/themesberg/flowbite-react-template-parcel
react-router     # React Router      https://github.com/themesberg/flowbite-react-template-react-router
react-server     # React Server      https://github.com/themesberg/flowbite-react-template-react-server
redwoodjs        # RedwoodJS         https://github.com/themesberg/flowbite-react-template-redwoodjs
remix            # Remix             https://github.com/themesberg/flowbite-react-template-remix
rsbuild          # Rsbuild           https://github.com/themesberg/flowbite-react-template-rsbuild
rspack           # Rspack            https://github.com/themesberg/flowbite-react-template-rspack
tanstack-router  # TanStack Router   https://github.com/themesberg/flowbite-react-template-tanstack-router
tanstack-start   # TanStack Start    https://github.com/themesberg/flowbite-react-template-tanstack-start
vike             # Vike              https://github.com/themesberg/flowbite-react-template-vike
vite             # Vite              https://github.com/themesberg/flowbite-react-template-vite
waku             # Waku              https://github.com/themesberg/flowbite-react-template-waku
webpack          # Webpack           https://github.com/themesberg/flowbite-react-template-webpack

You can use any of these templates with the --template flag:

npx create-flowbite-react@latest my-app --template nextjs

Check out our official template guides for detailed setup instructions and best practices for each framework.

Configuration#

Bundler Integration#

The CLI automatically detects and configures popular bundlers:

• Bun
• Farm
• Parcel
• Rolldown
• Rollup
• Rsbuild
• Rspack
• Turbopack
• Vite
• Webpack

Each bundler plugin automatically handles class generation by:

• Running the flowbite-react dev command during development
• Running the flowbite-react build command during production builds
• Watching for component changes and updating class lists in real-time
• Managing the class generation process lifecycle

This means you don't need to manually run these commands - the bundler plugin takes care of everything automatically.

Configuration Options#

The CLI creates a .flowbite-react/config.json file with several configuration options:

{
  "$schema": "https://unpkg.com/flowbite-react/schema.json",
  "components": [],
  "dark": true,
  "path": "src/components",
  "prefix": "",
  "rsc": true,
  "tsx": true
}

components#

List of component names to generate styles for. An empty array enables automatic detection.

dark#

Whether to generate dark mode styles. Default is true.

path#

Path where components will be created, relative to the project root. Default is "src/components".

prefix#

Optional prefix to apply to all Tailwind CSS classes.

rsc#

Whether to include the "use client" directive for React Server Components. Default is true.

tsx#

Whether to use TypeScript (.tsx) or JavaScript (.jsx) for component creation. Default is true.

VSCode Integration#

The CLI sets up VSCode for optimal development:

• Configures Tailwind CSS IntelliSense
• Sets up file associations
• Recommends essential extensions
• Configures class attribute settings

Project Structure#

The CLI creates and manages:

• .flowbite-react/ directory for configuration
• Class list generation
• Bundler-specific configurations
• Git ignore rules

Command Line Options#

When creating new projects:

npx create-flowbite-react@latest <project-directory> [options]

Options:
--template <n>   # Specify template
--git            # Initialize git repository
--help (-h)      # Show help
--version (-v)   # Show version

Example:

npx create-flowbite-react@latest my-app --template nextjs --git

Development Workflow#

The CLI enhances your development workflow by:

1. Watching for component changes
2. Automatically generating class lists
3. Updating configurations in real-time
4. Managing bundler integrations
5. Providing VSCode optimizations

For the best development experience, ensure you have the recommended VSCode extensions installed and your bundler is properly configured.