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 migrate#

Runs code transformations to help migrate your codebase:

• Transforms compound components to their simple form (e.g., Accordion.Panel to AccordionPanel)
• Automatically updates import statements and component usage

Example transformations:

// Before
import { Accordion } from "flowbite-react";

<Accordion.Panel>...</Accordion.Panel>

// After
import { AccordionPanel } from "flowbite-react";

<AccordionPanel>...</AccordionPanel>

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

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:

Example:

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

Project Templates#

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

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

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

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.