Fluxtor
Ask AI about this page

Fluxtor CLI Documentation

The CLI tool streamlines component installation, theme management, and project setup to accelerate your Laravel development workflow.

Installation

Install the Fluxtor CLI package in your Laravel project using Composer:

composer require fluxtor/cli

Requirements:

  • Laravel 10.0 or higher
  • PHP 8.1 or higher
  • Tailwind CSS 4.0 or higher
  • Alpine.js (auto-installed during initialization)

Package Initialization

After installing the CLI, initialize Fluxtor with all required dependencies and configurations:

php artisan fluxtor:init

This is a one-time setup command that prepares your Laravel project for Fluxtor components.

Command Options

  • --with-dark-mode : Include dark mode theme variables and utilities (default = false)
  • --with-phosphor : Install and configure Phosphor Icons package (default = false)
  • --css-file=app.css : Target CSS file name for package assets injection (relative to resources/css/) (default = app.css)
  • --theme-file=theme.css : Name for the generated theme CSS file (relative to resources/css/) (default = theme.css)
  • --js-dir=fluxtor : Directory path for JavaScript files (relative to resources/js/) (default = fluxtor)
  • --skip-prompts : Skip interactive prompts and use default configuration (default = false)
  • --force : Force overwrite existing files and configurations (default = false)

What the Initialization Does

The fluxtor:init command transforms your Laravel project by:

CSS Theme System

  • Installs CSS custom properties for consistent theming
  • Adds utility classes for component styling
  • Sets up CSS variable management

Dark Mode Support

  • Configures automatic theme switching
  • Integrates with Alpine.js for reactive updates
  • Provides theme persistence across sessions

JavaScript Utilities

  • Installs Alpine.js if not present
  • Adds reactive theme management system
  • Creates utility functions for component interactions

Dependencies & Structure

  • Installs required packages automatically
  • Creates organized directory structure
  • Updates your existing CSS and JS files

Interactive Configuration

The command will guide you through configuration options:

  1. Dark Mode Setup - Choose whether to include dark theme support
  2. Phosphor Icons - Optionally install the comprehensive icon library
  3. File Locations - Customize CSS and JavaScript file locations
  4. Dependency Management - Select which packages to install

Interactive Setup Process

The initialization command guides you through configuration:

php artisan fluxtor:init

Step 2: Icon Library

? Install Phosphor Icons library? (Y/n)

Optionally install the comprehensive Phosphor icon set.

Step 1: Dark Mode Configuration

? Include dark mode theme support? (Y/n)

Choose whether to include dark theme switching capabilities.

If you choose Yes, see the documentation for details: https://fluxtor.dev/docs/guides/dark-mode

Step 3: File Locations

? Target CSS file for package assets integration: (app.css)
? Theme CSS file name: (theme.css)
? JavaScript files directory path: (fluxtor)

Customize where theme files should be created (relative to resources folder).

Step 4: Dependencies

? Will this project use Livewire? (Y/n)

If you choose No, Alpine.js will be skipped. If you choose Yes, it will be installed and configured automatically (only if it’s not already present).

Command Options

Skip Interactive Prompts

php artisan fluxtor:init --skip-prompts

Uses default settings for all configuration options.

Include All Features

php artisan fluxtor:init --with-dark-mode --with-phosphor

Enables dark mode and installs Phosphor icons automatically.

Force Overwrite

php artisan fluxtor:init --force

Overwrites existing files without confirmation prompts.

Custom File Locations

php artisan fluxtor:init --css-file=styles/main.css --theme-file=custom-theme

Specify custom locations for generated files.

Complete Example with Options

php artisan fluxtor:init \
  --with-dark-mode \
  --with-phosphor \
  --css-file=resources/css/app.css \
  --theme-file=fluxtor-theme \
  --skip-prompts

Generated Files

After initialization, you'll have:

resources/
├── css/
│   ├── app.css (updated with theme import)
│   └── theme.css (CSS custom properties)
└── js/
    └── fluxtor/
        ├── utils.js (Alpine.js utilities)
        ├── app.js (updated with imports)
        └── globals/
            └── theme.js (Dark mode system)

Important: Include Assets in Your Layout

Critical: Update your main layout file to include the compiled assets:

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }}</title>
    
    {{-- Include Fluxtor CSS --}}
    @vite(['resources/css/app.css'])
</head>
<body>
    {{-- Your app content --}}
    <main>
        @yield('content')
    </main>
    
    {{-- Include Fluxtor JavaScript --}}
    @vite(['resources/js/app.js'])
</body>
</html>

If you are using Livewire version 3

{{-- resources/views/layouts/app.blade.php --}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ config('app.name') }}</title>
    
    {{-- Include Fluxtor CSS --}}
    @vite(['resources/css/app.css'])

    {{-- include --}}
     @livewireStyles 
</head>
<body>
    {{-- Your app content --}}
    <main>
        @yield('content')
    </main>
    
    {{-- Include Fluxtor JavaScript --}}
    @vite(['resources/js/app.js'])


    {{-- include --}}
     @livewireScripts 
</body>
</html>

For Laravel Mix users:

{{-- Replace @vite() with mix() --}}
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<script src="{{ mix('js/app.js') }}"></script>

Authentication & Account Management

Login to Your Account

Access premium components and features by authenticating with your Fluxtor account:

php artisan fluxtor:login

This command will:

  • Prompt for your Fluxtor credentials
  • Store authentication tokens securely
  • Enable access to premium components and features

Note: Authentication is required for premium components but optional for free components.

View Current Account

Check which account is currently authenticated:

php artisan fluxtor:whoami

This command displays:

  • Email Address - Your registered Fluxtor account email

Example Output:

You're login as john.doe@example.com

Logout from Your Account

Remove stored authentication credentials and logout:

php artisan fluxtor:logout

This command will:

  • Clear stored authentication tokens
  • Remove cached account information
  • Confirm successful logout

Note: After logout, you'll need to authenticate again using fluxtor:login to install premium components.

Component Management

Installing Components

Install individual components with all their dependencies:

php artisan fluxtor:install component-name

Examples:

# Install a button component
php artisan fluxtor:install button

# Install a modal component (may include dependencies)
php artisan fluxtor:install modal

What Happens During Installation

  1. Component Files - Blade components are added to resources/views/components/ui/
  2. Dependencies - Required components and packages are automatically installed/updated (with confirmation)
  3. Assets - CSS and JavaScript assets are integrated
  4. Documentation - Usage examples are available at https://fluxtor.dev/docs/components/component-name

Installation Options

Force Overwrite Existing Components

php artisan fluxtor:install button --force

Replaces existing component files without confirmation.

Preview Installation (Dry Run)

php artisan fluxtor:install button --dry-run

Shows what files would be created/modified without making changes.

Install with All Dependencies

php artisan fluxtor:install button --internal-deps --external-deps
  • --internal-deps: Install required Fluxtor components
  • --external-deps: Install required npm/composer packages

Install Only Dependencies

php artisan fluxtor:install button --only-deps

Installs only the dependencies.

Skip Dependency Installation

php artisan fluxtor:install button --skip-deps

Installs only the main component, skipping dependencies.

Example Installation Output

php artisan fluxtor:install radio         

═════════════════════════════════════
  Installing:  radio
═════════════════════════════════════

  Radio  has been installed successfully.
 resources/views/components/ui/radio/group.blade.php has been  created 

 resources/views/components/ui/radio/item.blade.php has been  created 

 resources/views/components/ui/radio/indicator.blade.php has been  created 

 Radio component requires internal dependencies to function properly.

 ┌ Install required dependencies? ──────────────────────────────┐
 │ Yes                                                          │
 └──────────────────────────────────────────────────────────────┘

 ↳ Installing Radio internal dependencies.

  Icon  has been installed successfully.
 resources/views/components/ui/icon/index.blade.php has been  created 

 All Radio dependencies installed successfully.

  INFO  Full documentation: https://fluxtor.dev/docs/components/radio.

Batch Operations

Install Multiple Related Components

# Install all form components
php artisan fluxtor:install button input select textarea switch radio

Discovering Components

List Available Components

Browse all available components in the Fluxtor library:

php artisan fluxtor:list

Filtering Options

# List only free components
php artisan fluxtor:list --type=free

# List only premium components
php artisan fluxtor:list --type=premium

Getting Help

Check Component Documentation

  • Online docs: https://fluxtor.dev/docs/components/{component-name}

Community Support

  • GitHub Issues: https://github.com/fluxtor/cli/issues

Best Practices

  1. Version Control: Always commit your project before running Fluxtor commands
  2. Component Organization: Keep components in the default ui/ namespace for consistency
  3. Customization: Document your customizations for team members
  4. Dependencies: Regularly update both Fluxtor and its dependencies
  5. Testing: Test components after installation in your specific use cases

© FLuxtor Copyright 2024-2025. All rights reserved.