Ask AI about this page

Sheaf CLI Documentation

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

Installation

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

composer require sheaf/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 Sheaf with all required dependencies and configurations:

php artisan sheaf:init

This is a one-time setup command that prepares your Laravel project for Sheaf 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)
--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 sheaf: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:

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

Interactive Setup Process

The initialization command guides you through configuration:

php artisan sheaf: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://sheafui.dev/docs/guides/dark-mode

Step 3: File Locations

? Target CSS file for package assets integration: (app.css)
? Theme CSS file name: (theme.css)

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 sheaf:init --skip-prompts

Uses default settings for all configuration options.

Include All Features

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

Enables dark mode and installs Phosphor icons automatically.

Force Overwrite

php artisan sheaf:init --force

Overwrites existing files without confirmation prompts.

Custom File Locations

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

Specify custom locations for generated files.

Complete Example with Options

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

Generated Files

After initialization, you'll have:

resources/
├── css/
│   ├── app.css (updated with theme import)
│   └── theme.css (CSS custom properties)
└── js/
    ├── 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 Sheaf UI CSS --}}
    @vite(['resources/css/app.css'])
</head>
<body>
    {{-- Your app content --}}
    <main>
        @yield('content')
    </main>
    
    {{-- Include Sheaf UI 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 Sheaf UI CSS --}}
    @vite(['resources/css/app.css'])

    {{-- include --}}
     @livewireStyles 
</head>
<body>
    {{-- Your app content --}}
    <main>
        @yield('content')
    </main>
    
    {{-- Include Sheaf UI 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

You can authenticate with your Sheaf UI account:

php artisan sheaf:login

This command will:

Prompt for your Sheaf account credentials
Store authentication tokens securely

View Current Account

Check which account is currently authenticated:

php artisan sheaf:whoami

This command displays:

Email Address - Your registered Sheaf account email

Example Output:

You're login as achchiraj.youssef@gmail.com

Logout from Your Account

Remove stored authentication credentials and logout:

php artisan sheaf:logout

This command will:

Clear stored authentication tokens
Remove cached account information
Confirm successful logout

Component Management

Installing Components

Install individual components with all their dependencies:

php artisan sheaf:install component-name

Examples:

# Install a button component
php artisan sheaf:install button

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

What Happens During Installation

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

Installation Options

Force Overwrite Existing Components

php artisan sheaf:install button --force

Replaces existing component files without confirmation.

Preview Installation (Dry Run)

php artisan sheaf:install button --dry-run

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

Install with All Dependencies

php artisan sheaf:install button --internal-deps --external-deps

--internal-deps: Install required Sheaf components
--external-deps: Install required npm/composer packages

Install Only Dependencies

php artisan sheaf:install button --only-deps

Installs only the dependencies.

Skip Dependency Installation

php artisan sheaf:install button --skip-deps

Installs only the main component, skipping dependencies.

Example Installation Output

php artisan sheaf: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://sheafui.dev/docs/components/radio.

Batch Operations

Install Multiple Related Components

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

Discovering Components

List Available Components

Browse all available components in the Sheaf UI library:

php artisan sheaf:list

Filtering Options

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

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

Getting Help

Check Component Documentation

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

Community Support

GitHub Issues: https://github.com/sheafui/cli/issues

Best Practices

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

Sheaf UI

#Sheaf CLI Documentation

#Installation

#Package Initialization

#What the Initialization Does

#Interactive Configuration

#Interactive Setup Process

#Command Options

#Generated Files

#Important: Include Assets in Your Layout

#If you are using Livewire version 3

#Authentication & Account Management

#Login to Your Account

#View Current Account

#Logout from Your Account

#Component Management

#Installing Components

#What Happens During Installation

#Installation Options

#Example Installation Output

#Batch Operations

#Discovering Components

#List Available Components

#Filtering Options

#Getting Help

#Best Practices