### Example Sheaf UI Component Installation Output

Source: https://github.com/sheafui/components/blob/master/guides/cli-installation.md

This provides an example of the output generated when installing the 'radio' component, showing the files created, dependency installation process, and success messages.

```bash
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. 
```

--------------------------------

### Sheaf CLI Initialization with Options

Source: https://github.com/sheafui/components/blob/master/guides/cli-installation.md

Demonstrates various ways to use the `sheaf:init` command with different options to customize the setup, such as including dark mode, installing Phosphor Icons, and specifying file locations.

```bash
php artisan sheaf:init --skip-prompts
```

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

```bash
php artisan sheaf:init --force
```

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

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

--------------------------------

### Sheaf UI CLI Installation Commands

Source: https://github.com/sheafui/components/blob/master/guides/overview.md

Demonstrates the usage of the Sheaf UI CLI to add components to a Laravel project. The CLI handles setup, imports, and file placement.

```bash
php artisan sheaf:add button
php artisan sheaf:add tags-input
php artisan sheaf:add select
php artisan sheaf:add ...
```

--------------------------------

### Install Icon Component

Source: https://github.com/sheafui/components/blob/master/components/icon/usage.md

Installs the Icon component into your project using the Sheaf CLI. This command simplifies the setup process.

```bash
php artisan sheaf:install icon
```

--------------------------------

### Install Sheaf UI Component with Options

Source: https://github.com/sheafui/components/blob/master/guides/cli-installation.md

This section details various options for the `sheaf:install` command, including forcing overwrites, performing a dry run, installing dependencies (internal and external), skipping dependencies, and installing only dependencies.

```bash
php artisan sheaf:install button --force
```

```bash
php artisan sheaf:install button --dry-run
```

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

```bash
php artisan sheaf:install button --only-deps
```

```bash
php artisan sheaf:install button --skip-deps
```

--------------------------------

### Install Sheaf UI Switch Component

Source: https://github.com/sheafui/components/blob/master/components/switch/usage.md

Installs the 'switch' component using the Sheaf Artisan command. This is the initial setup step before using the component in Blade views.

```bash
php artisan sheaf:install switch
```

--------------------------------

### Install Theme Switcher Component

Source: https://github.com/sheafui/components/blob/master/components/theme-switcher/usage.md

Installs the theme-switcher component using the Sheaf Artisan command. Ensure the themes system is configured prior to installation.

```bash
php artisan sheaf:install theme-switcher
```

--------------------------------

### Install Text Component

Source: https://github.com/sheafui/components/blob/master/components/text/usage.md

Installs the text component using the Sheaf Artisan command.

```bash
php artisan sheaf:install text
```

--------------------------------

### Install Input Component using Sheaf Artisan

Source: https://github.com/sheafui/components/blob/master/components/input/usage.md

Installs the 'input' component using the Sheaf UI Artisan command-line interface.

```bash
php artisan sheaf:install input
```

--------------------------------

### Install Textarea Component

Source: https://github.com/sheafui/components/blob/master/components/textarea/usage.md

Installs the Textarea component using the sheaf artisan command. This is a prerequisite for using the component in your project.

```bash
php artisan sheaf:install textarea
```

--------------------------------

### Install Description Component via Sheaf CLI

Source: https://github.com/sheafui/components/blob/master/components/description/usage.md

Installs the 'description' component using the sheaf artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install description
```

--------------------------------

### Install Badge Component

Source: https://github.com/sheafui/components/blob/master/components/badge/usage.md

Installs the Badge component using the Sheaf Artisan command. Requires PHP and the Sheaf CLI.

```bash
php artisan sheaf:install badge
```

--------------------------------

### Install OTP Component using Sheaf Artisan CLI

Source: https://github.com/sheafui/components/blob/master/components/otp/usage.md

This command installs the OTP component using the Sheaf Artisan CLI. Ensure you have Sheaf installed and configured.

```bash
php artisan sheaf:install otp
```

--------------------------------

### Install Sheaf UI Select Component

Source: https://github.com/sheafui/components/blob/master/components/select/usage.md

Installs the 'select' component using the Sheaf artisan command. This is the initial step to use the component in your project.

```bash
php artisan sheaf:install select
```

--------------------------------

### Install Link Component

Source: https://github.com/sheafui/components/blob/master/components/link/usage.md

Installs the 'link' component using the Sheaf Artisan command. This is the primary method for integrating the component into your project.

```bash
php artisan sheaf:install link
```

--------------------------------

### Install Heroicons Wrapper

Source: https://github.com/sheafui/components/blob/master/components/icon/usage.md

Installs the WireUI Heroicons wrapper package using Composer. This is a prerequisite for using Heroicons with the Icon component.

```shell
composer require wireui/heroicons
```

--------------------------------

### Install Button Component with Artisan CLI

Source: https://github.com/sheafui/components/blob/master/components/button/usage.md

Demonstrates the command to install the Button component using the Sheaf UI Artisan CLI. No specific dependencies beyond the CLI itself.

```bash
php artisan sheaf:install button
```

--------------------------------

### Install SheafUI Starter Kit

Source: https://github.com/sheafui/components/blob/master/guides/starter-kit.md

Command to create a new Laravel application using the SheafUI starter kit skeleton. This is the primary method to begin a new project with the kit.

```shell
laravel new example-name --using=sheaf/starter-kit
```

--------------------------------

### Install Dropdown Component with Sheaf CLI

Source: https://github.com/sheafui/components/blob/master/components/dropdown/usage.md

Installs the dropdown component using the Sheaf Artisan command. This is the recommended method for adding the component to your project.

```bash
php artisan sheaf:install dropdown
```

--------------------------------

### Initialize Sheaf CLI in Laravel Project

Source: https://github.com/sheafui/components/blob/master/guides/cli-installation.md

Initializes the Sheaf CLI in your Laravel project, setting up dependencies and configurations. This is a one-time setup command.

```bash
php artisan sheaf:init
```

--------------------------------

### Install Accordion Component

Source: https://github.com/sheafui/components/blob/master/components/accordion/usage.md

Installs the Accordion component using the Sheaf Artisan command-line interface. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install accordion
```

--------------------------------

### Install Tags Input Component

Source: https://github.com/sheafui/components/blob/master/components/tags-input/usage.md

Installs the 'tags-input' component using the Sheaf Artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install tags-input
```

--------------------------------

### Install Label Component with Artisan

Source: https://github.com/sheafui/components/blob/master/components/label/usage.md

Installs the 'label' component using the sheaf artisan command. This is the recommended way to add the component to your project.

```bash
php artisan sheaf:install label
```

--------------------------------

### Install Modal Component using Artisan

Source: https://github.com/sheafui/components/blob/master/components/modal/usage.md

Installs the modal component using the Sheaf UI Artisan command. Requires PHP and the Laravel framework.

```bash
php artisan sheaf:install modal
```

--------------------------------

### Install Sheaf UI Form Components

Source: https://github.com/sheafui/components/blob/master/guides/cli-installation.md

Installs all form-related components for Sheaf UI. This command enables the use of buttons, inputs, selects, textareas, switches, and radio buttons.

```bash
php artisan sheaf:install button input select textarea switch radio
```

--------------------------------

### Install Tooltip Component with Artisan CLI

Source: https://github.com/sheafui/components/blob/master/components/tooltip/usage.md

Installs the Tooltip component using the Sheaf UI Artisan command. This command simplifies the process of adding the component to your project.

```bash
php artisan sheaf:install tooltip
```

--------------------------------

### Install Autocomplete Component with Sheaf CLI

Source: https://github.com/sheafui/components/blob/master/components/autocomplete/usage.md

Installs the Autocomplete component using the Sheaf Artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install autocomplete
```

--------------------------------

### Install Sheaf UI Card Component

Source: https://github.com/sheafui/components/blob/master/components/card/usage.md

Installs the 'card' component using the Sheaf Artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install card
```

--------------------------------

### Install Sheaf UI Component

Source: https://github.com/sheafui/components/blob/master/guides/cli-installation.md

This Artisan command installs a specified Sheaf UI component, including its Blade files, dependencies, and assets. It can also handle forced overwrites and dry runs.

```bash
php artisan sheaf:install component-name
```

```bash
# Install a button component
php artisan sheaf:install button
```

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

--------------------------------

### Install Radio Component with Sheaf CLI

Source: https://github.com/sheafui/components/blob/master/components/radio/usage.md

Installs the radio component using the Sheaf Artisan command-line interface. This is the primary method to add the component to your project.

```bash
php artisan sheaf:install radio
```

--------------------------------

### Modal Sizing Examples

Source: https://github.com/sheafui/components/blob/master/components/modal/usage.md

Provides examples of how to set the `width` prop for different modal use cases, ranging from simple confirmations to complex content display.

```blade
<!-- For simple confirmations -->
<x-ui.modal width="sm" />

<!-- For forms -->
<x-ui.modal width="lg" />

<!-- For complex content -->
<x-ui.modal width="2xl" />

<!-- For mobile-first full-screen experience -->
<x-ui.modal width="screen" />
```

--------------------------------

### Install Avatar Component

Source: https://github.com/sheafui/components/blob/master/components/avatar/usage.md

Installs the avatar component using the Sheaf Artisan command. This is the primary method for integrating the avatar component into your project.

```bash
php artisan sheaf:install avatar
```

--------------------------------

### Install Key-Value Component

Source: https://github.com/sheafui/components/blob/master/components/key-value/usage.md

Installs the Key-Value component using the Sheaf Artisan command. This command-line interface (CLI) command is essential for setting up the component within your Laravel project.

```bash
php artisan sheaf:install key-value
```

--------------------------------

### Install Separator Component

Source: https://github.com/sheafui/components/blob/master/components/separator/usage.md

Installs the separator component using the Sheaf UI Artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install separator
```

--------------------------------

### Install Fieldset Component using Sheaf CLI

Source: https://github.com/sheafui/components/blob/master/components/fieldset/usage.md

This command installs the fieldset component using the Sheaf Artisan command-line tool. Ensure you have Sheaf CLI set up in your project.

```bash
php artisan sheaf:install fieldset
```

--------------------------------

### Avatar Usage Example (HTML)

Source: https://github.com/sheafui/components/blob/master/components/avatar/usage.md

Demonstrates basic usage of the Avatar component with different configuration options like name, initials, and icon.

```html
<x-ui.avatar name="John Doe" />
<x-ui.avatar initials="JD" />
<x-ui.avatar src="/path/to/image.jpg" alt="User Image" />
<x-ui.avatar icon="user" />
```

--------------------------------

### Default Text Component Examples

Source: https://github.com/sheafui/components/blob/master/components/text/usage.md

Shows examples of the text component with default small size and neutral colors, suitable for body text and general content.

```html
<x-ui.text>
    Standard text with default small size and neutral colors.
</x-ui.text>
<x-ui.text>
    Perfect for body text, descriptions, and general content.
</x-ui.text>
```

--------------------------------

### Basic Button Usage and Variants

Source: https://github.com/sheafui/components/blob/master/components/button/usage.md

Shows how to use the Button component with default settings and different variants like 'ghost' and 'outline'. It's a fundamental example for initiating button usage.

```html
<x-ui.button>
    Primary
</x-ui.button>        
<x-ui.button variant="ghost">
    Ghost
</x-ui.button>
<x-ui.button variant="outline">
    Outline
</x-ui.button>
```

--------------------------------

### Install Heading Component (Bash)

Source: https://github.com/sheafui/components/blob/master/components/heading/usage.md

Installs the 'heading' component using the sheaf artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install heading
```

--------------------------------

### Install Brand Component with Artisan

Source: https://github.com/sheafui/components/blob/master/components/brand/usage.md

Installs the 'brand' component using the Sheaf Artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install brand
```

--------------------------------

### Install Popover Component via Artisan

Source: https://github.com/sheafui/components/blob/master/components/popover/usage.md

Installs the 'popover' component using the Sheaf UI Artisan command-line interface. This is the standard method for adding components to your project.

```bash
php artisan sheaf:install popover
```

--------------------------------

### Install Phosphor Icons Wrapper

Source: https://github.com/sheafui/components/blob/master/components/icon/usage.md

Installs the WireUI Phosphor Icons wrapper package using Composer. This is required to use Phosphor Icons with the Icon component.

```shell
composer require wireui/phosphoricons
```

--------------------------------

### Install Sheaf UI CLI Tool (Bash)

Source: https://github.com/sheafui/components/blob/master/README.md

Installs the Sheaf UI command-line interface tool into your Laravel project using Composer. This is the first step to using Sheaf UI components.

```bash
composer require sheaf/cli
```

--------------------------------

### Install Toast Component with Artisan

Source: https://github.com/sheafui/components/blob/master/components/toast/usage.md

Command to install the toast component using the Sheaf UI Artisan CLI. This command adds the necessary files and configurations for the toast component.

```bash
php artisan sheaf:install toast
```

--------------------------------

### Install Tabs Component using Sheaf CLI

Source: https://github.com/sheafui/components/blob/master/components/tabs/usage.md

Installs the Tabs component into your project using the Sheaf Artisan command. This is the primary method for adding the component to your Laravel application.

```bash
php artisan sheaf:install tabs
```

--------------------------------

### Install Sheaf UI Alerts Component

Source: https://github.com/sheafui/components/blob/master/components/alerts/usage.md

Installs the Alerts component into your Sheaf UI project using the Artisan CLI. This command typically adds the necessary files and configurations for the component to be used within your application.

```bash
php artisan sheaf:install alerts
```

--------------------------------

### Install Field Component with Artisan (Bash)

Source: https://github.com/sheafui/components/blob/master/components/field/usage.md

Installs the Field component using the sheaf artisan command-line tool. This is the recommended method for integrating the component into your project.

```bash
php artisan sheaf:install field
```

--------------------------------

### Status Badge Examples

Source: https://github.com/sheafui/components/blob/master/components/badge/usage.md

Illustrates common usage patterns for status indicators and labels using the Badge component.

```APIDOC
## Status Badge Examples

### Description
Common usage patterns for status indicators and labels.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Attributes
- **icon** (string) - Optional - Leading icon name.
- **color** (string) - Optional - Color theme for the badge. Examples: `'blue'`, `'red'`, `'amber'`, `'green'`, `'purple'`.
- **variant** (string) - Optional - Visual variant: `'outline'` for outline style.
- **size** (string) - Optional - Size variant: `'sm'` for small.
- **pill** (boolean) - Optional - If true, makes the badge fully rounded.
- **iconAfter** (string) - Optional - Trailing icon name.

### Request Example
```html
<!-- Order Status -->
<div class="flex items-center gap-2">
    <span class="text-sm font-medium">Order Status:</span>
    <x-ui.badge icon="truck" color="blue" variant="outline">Shipped</x-ui.badge>
</div>

<!-- Priority Levels -->
<div class="flex items-center gap-2">
    <span class="text-sm font-medium">Priority:</span>
    <x-ui.badge color="red" size="sm">High</x-ui.badge>
    <x-ui.badge color="amber" size="sm">Medium</x-ui.badge>
    <x-ui.badge color="green" size="sm">Low</x-ui.badge>
</div>

<!-- Removable Tags -->
<div class="flex items-center gap-2">
    <span class="text-sm font-medium">Tags:</span>
    <x-ui.badge pill iconAfter="x-mark" color="purple">React</x-ui.badge>
    <x-ui.badge pill iconAfter="x-mark" color="blue">TypeScript</x-ui.badge>
    <x-ui.badge pill iconAfter="x-mark" color="green">Tailwind</x-ui.badge>
</div>
```

### Response
N/A (Component Usage)

### Response Example
N/A (Component Usage)
```

--------------------------------

### Description Component Usage for Helpful Instructions (Blade)

Source: https://github.com/sheafui/components/blob/master/components/description/usage.md

Shows how to use the description component to provide helpful instructions for a website URL input field in Blade. It guides the user on the required format.

```blade
<x-ui.field>
    <x-ui.label>Website URL</x-ui.label>
    <x-ui.description>
        Enter your full website URL including https://
    </x-ui.description>
    <x-ui.input 
        wire:model="website" 
        type="url"
        placeholder="https://example.com"
    />
</x-ui.field>
```

--------------------------------

### Align Tabs to Start

Source: https://github.com/sheafui/components/blob/master/components/tabs/usage.md

Demonstrates how to align tab groups to the start of their container using the 'justify-start' class in Blade and HTML. This utility class leverages flexbox properties for alignment.

```blade
<x-ui.tabs class="non-contained">
    <x-ui.tab.group class="justify-start">
        <x-ui.tab label="user" icon="user" />
        <x-ui.tab label="settings" icon="cog-6-tooth" />
        <x-ui.tab label="clock" icon="clock" />
    </x-ui.tab.group>
    <x-ui.tab.panel>
        <h3 class="text-lg font-semibold mb-2">First Tab</h3>
        <p>This is the first tab content.</p>
    </x-ui.tab.panel>
    <x-ui.tab.panel>
        <h3 class="text-lg font-semibold mb-2">Second Tab</h3>
        <p>This is the second tab content.</p>
    </x-ui.tab.panel>
    <x-ui.tab.panel>
        <h3 class="text-lg font-semibold mb-2">Third Tab</h3>
        <p>This is the third tab content.</p>
    </x-ui.tab.panel>
</x-ui.tabs>
```

```html
<x-ui.tabs>
    <x-ui.tab.group class="justify-start">
         <x-ui.tab label="user" icon="user" />
        <x-ui.tab label="settings" icon="cog-6-tooth" />
        <x-ui.tab label="clock" icon="clock" />
    </x-ui.tab.group>
    
    <x-ui.tab.panel>...</x-ui.tab.panel>
    
    <x-ui.tab.panel>...</x-ui.tab.panel>
    
    <x-ui.tab.panel>...</x-ui.tab.panel>
</x-ui.tabs>
```

--------------------------------

### Dynamic Options with Livewire

Source: https://github.com/sheafui/components/blob/master/components/select/usage.md

Example demonstrating how to use the SheafUI Select component with dynamic options managed by Livewire. It shows how to bind a multi-select to a Livewire component property.

```php
<?php

// In your Livewire component
public $selectedCategories = [];
public $categories = [
    'web' => 'Web Development',
    'mobile' => 'Mobile Development',
    'design' => 'UI/UX Design',
    'backend' => 'Backend Development',
];
?>
```

```html
<x-ui.select 
    placeholder="Choose categories..."
    multiple
    searchable
    clearable
    wire:model="selectedCategories">
    @foreach($categories as $value => $label)
        <x-ui.select.option :value="$value">{{ $label }}</x-ui.select.option>
    @endforeach
</x-ui.select>
```

--------------------------------

### Accordion Shorthand Syntax

Source: https://github.com/sheafui/components/blob/master/components/accordion/usage.md

Demonstrates the basic usage of the Accordion component using shorthand syntax with the 'trigger' prop for simple accordions. This allows for quick setup of collapsible content sections.

```html
<x-ui.accordion>
    <x-ui.accordion.item trigger="Account Settings">
        <p>Manage your account preferences, update your profile information, and configure notification settings.</p>
        <div class="mt-3 space-y-2">
            <div class="flex items-center justify-between">
                <span>Email notifications</span>
                <span class="text-green-600">Enabled</span>
            </div>
            <div class="flex items-center justify-between">
                <span>Two-factor authentication</span>
                <span class="text-green-600">Enabled</span>
            </div>
        </div>
    </x-ui.accordion.item>

    <x-ui.accordion.item trigger="Privacy & Security">
        <p>Control your privacy settings and security preferences to keep your account safe.</p>
        <ul class="mt-3 space-y-1 list-disc list-inside">
            <li>Password requirements</li>
            <li>Login history</li>
            <li>Data sharing preferences</li>
        </ul>
    </x-ui.accordion.item>
</x-ui.accordion>
```

--------------------------------

### Install Sheaf UI Components via Artisan (Bash)

Source: https://github.com/sheafui/components/blob/master/README.md

Uses the Sheaf UI CLI tool (via Artisan) to install specific UI components like buttons, modals, or dropdowns into your Laravel project.

```bash
php artisan sheaf:install button
php artisan sheaf:install modal
php artisan sheaf:install dropdown
```

--------------------------------

### Basic Radio Group Example (Blade)

Source: https://github.com/sheafui/components/blob/master/components/radio/usage.md

A fundamental example of rendering a radio group using Blade syntax. It displays a set of options for users to select from, with a default selected item.

```html
<x-ui.radio.group name="roles" label="Roles">
    <x-ui.radio.item value="backend" label="Back end" checked />
    <x-ui.radio.item value="frontend" label="Front end" />
    <x-ui.radio.item value="devops" label="DevOps" />
</x-ui.radio.group>
```

--------------------------------

### Emphasized Text Component Examples

Source: https://github.com/sheafui/components/blob/master/components/text/usage.md

Shows how to apply font weights (medium, semibold), italics, and uppercase transformations to the text component.

```html
<x-ui.text class="font-medium">Medium weight text</x-ui.text>
<x-ui.text class="font-semibold">Semibold text</x-ui.text>
<x-ui.text class="italic">Italic text</x-ui.text>
<x-ui.text class="uppercase tracking-wide">Uppercase text</x-ui.text>
```

--------------------------------

### SheafUI Dropdown Positioning Examples (HTML)

Source: https://github.com/sheafui/components/blob/master/components/dropdown/usage.md

Illustrates how to set the dropdown position using the `position` attribute. This controls whether the dropdown appears below the trigger, aligned to the start or end of the trigger. It requires the SheafUI component library.

```html
<x-ui.dropdown position="bottom-center">
    <x-slot:button class="justify-center">
        <x-ui.button >
            Bottom Center
        </x-ui.button>
    </x-slot:button>
    
    <x-slot:menu>
        <x-ui.dropdown.item>Edit</x-ui.dropdown.item>
        <x-ui.dropdown.item>Copy</x-ui.dropdown.item>
        <x-ui.dropdown.item>Delete</x-ui.dropdown.item>
    </x-slot:menu>
</x-ui.dropdown>

<x-ui.dropdown position="bottom-start">
    <x-slot:button class="justify-center">
        <x-ui.button >
            Bottom Start
        </x-ui.button>
    </x-slot:button>
    
    <x-slot:menu>
        <x-ui.dropdown.item>Edit</x-ui.dropdown.item>
        <x-ui.dropdown.item>Copy</x-ui.dropdown.item>
        <x-ui.dropdown.item>Delete</x-ui.dropdown.item>
    </x-slot:menu>
</x-ui.dropdown>
```

--------------------------------

### Modal Text Alignment Examples

Source: https://github.com/sheafui/components/blob/master/components/modal/usage.md

Demonstrates how to control the text alignment within modal components using the 'alignment' attribute. Supported values include 'left', 'center', and 'right', with 'start' and 'end' serving as aliases for 'left' and 'right' respectively.

```blade
<x-ui.modal alignment="left" />    <!-- text-left (default) -->
<x-ui.modal alignment="center" />  <!-- text-center -->
<x-ui.modal alignment="right" />   <!-- text-right -->
<x-ui.modal alignment="start" />   <!-- text-left (alias) -->
<x-ui.modal alignment="end" />     <!-- text-right (alias) -->
```

--------------------------------

### Indexed Tabs Example with Blade

Source: https://github.com/sheafui/components/blob/master/components/tabs/usage.md

Demonstrates using numeric indices to control the active tab in SheafUI's Tabs component. The order of tabs and panels matters, starting from index 0. This method offers less specificity than named tabs.

```blade
<x-demo>
    <x-ui.tabs activeTab="1">
        <x-ui.tab.group>
            <x-ui.tab label="First" />
            <x-ui.tab label="Second" />
            <x-ui.tab label="Third" />
        </x-ui.tab.group>
        <x-ui.tab.panel>
            <h3 class="text-lg font-semibold mb-2">First Tab</h3>
            <p>This is the first tab content (index 0).</p>
        </x-ui.tab.panel>
        <x-ui.tab.panel>
            <h3 class="text-lg font-semibold mb-2">Second Tab</h3>
            <p>This is the second tab content (index 1).</p>
        </x-ui.tab.panel>
        <x-ui.tab.panel>
            <h3 class="text-lg font-semibold mb-2">Third Tab</h3>
            <p>This is the third tab content (index 2).</p>
        </x-ui.tab.panel>
    </x-ui.tabs>
</x-demo>
```

--------------------------------

### List Available Sheaf UI Components

Source: https://github.com/sheafui/components/blob/master/guides/cli-installation.md

Lists all the components available in the Sheaf UI library. This command helps users discover and view the range of components they can utilize in their projects.

```bash
php artisan sheaf:list
```

--------------------------------

### Configure Validation and Constraints for KeyValue

Source: https://github.com/sheafui/components/blob/master/components/key-value/usage.md

Set validation rules and constraints for the KeyValue component to ensure data quality. This example demonstrates setting required fields and preventing duplicate keys.

```html
<x-ui.key-value 
    wire:model="validatedConfig" 
    label="Validated Configuration"
    :prevent-duplicate-keys="true"
    :allow-empty-values="false"
    :required="true"
/>
```

--------------------------------

### Manually Bundle Livewire and Alpine.js in app.js

Source: https://github.com/sheafui/components/blob/master/components/search-category/bronze-search/doc.md

Demonstrates the process of manually bundling Livewire and Alpine.js within the app.js file. It includes importing necessary modules like Livewire, AlpineAnimate, and a custom search component, then initializing Alpine plugins and components before starting Livewire.

```javascript
import "./bootstrap";
import { Livewire } from '../../../../vendor/livewire/livewire/dist/livewire.esm';
import AlpineAnimate from "@charrafimed/alpine-animation"
import  search from "./components/search.js";

// plugins 
Alpine.plugin(AlpineAnimate);
....

// components 
Alpine.data("search", search);
....

Livewire.start();

```

--------------------------------

### Description Component Usage for Helpful Instructions (HTML)

Source: https://github.com/sheafui/components/blob/master/components/description/usage.md

Presents the HTML implementation for providing helpful instructions with the description component, specifically for a website URL field, emphasizing the need for the 'https://' prefix.

```html
<x-ui.field>
    <x-ui.label>Website URL</x-ui.label>
    <x-ui.description>
        Enter your full website URL including https://
    </x-ui.description>
    <x-ui.input 
        wire:model="website" 
        type="url"
        placeholder="https://example.com"
    />
    <x-ui.error name="website" />
</x-ui.field>
```

--------------------------------

### Install Error Component (Bash)

Source: https://github.com/sheafui/components/blob/master/components/error/usage.md

Installs the 'error' component using the sheaf artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install error
```

--------------------------------

### Basic Textarea Usage

Source: https://github.com/sheafui/components/blob/master/components/textarea/usage.md

Demonstrates the basic implementation of the Textarea component. It includes setting a placeholder and binding the input to a model using wire:model.

```html
<x-ui.textarea 
    wire:model="description" 
    placeholder="Enter your description..."
/>
```

--------------------------------

### Alert Component - Complex Example

Source: https://github.com/sheafui/components/blob/master/components/alerts/usage.md

A comprehensive example showcasing all features of the Alerts component, including custom icons, content, and action buttons.

```APIDOC
## Alerts Component - Complex Example

### Description
A comprehensive example showing all features working together, including custom icons, detailed content, and action buttons.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Component Props
- **type** (string) - Optional - Alert semantic type: 'info', 'success', 'warning', 'error'. Defaults to 'info'.
- **iconName** (string) - Optional - Custom icon name (overrides default type-based icon).
- **iconClass** (string) - Optional - Additional CSS classes for the icon.

### Slot Reference
- **heading** (Yes) - The main alert message or title.
- **content** (No) - Additional descriptive content below the heading.
- **actions** (No) - Action buttons or interactive elements.

### Request Example
```html
<x-ui.alerts type="error" iconName="shield-exclamation">
    <x-slot:heading>Security Alert: Suspicious Activity Detected</x-slot:heading>
    <x-slot:content>
        <p>We've detected unusual login attempts from an unrecognized location. If this wasn't you, please secure your account immediately.</p>
        <ul class="mt-2 list-disc list-inside text-sm space-y-1">
            <li>Location: San Francisco, CA</li>
            <li>Time: Today at 2:15 PM</li>
            <li>Device: Unknown mobile device</li>
        </ul>
    </x-slot:content>
    <x-slot:actions>
        <x-ui.button size="sm" variant="danger">Secure Account</x-ui.button>
        <x-ui.button size="sm" variant="outline">This Was Me</x-ui.button>
        <x-ui.button size="sm" variant="info">Learn More</x-ui.button>
    </x-slot:actions>
</x-ui.alerts>
```

### Response
N/A (Component Usage)
```

--------------------------------

### Install Breadcrumbs Component using Artisan

Source: https://github.com/sheafui/components/blob/master/components/breadcrumbs/usage.md

Installs the breadcrumbs component using the Sheaf UI Artisan command. This is the primary method for adding the component to your project.

```bash
php artisan sheaf:install breadcrumbs
```

--------------------------------

### Quick Usage of $modal Store (JavaScript)

Source: https://github.com/sheafui/components/blob/master/components/modal/usage.md

Demonstrates practical examples of how to interact with the `$modal` store. It shows how to open a modal named 'login', close it, check if it's open, close all modals, and retrieve the list of currently open modal IDs.

```javascript
$modal.open('login');   // Opens the login modal
$modal.close('login');  // Closes the login modal
console.log($modal.isOpen('login'));  // false after close
$modal.closeAll();      // Close every open modal instantly
console.log($modal.getOpenedModals()); // []
```

--------------------------------

### OTP Input Usage with Livewire

Source: https://github.com/sheafui/components/blob/master/components/otp/usage.md

Shows how to bind the OTP input component to a Livewire component's state using `wire:model`.

```php
<div class="max-w-md mx-auto">
    <x-ui.otp 
        wire:model="verificationCode"
    />
</div>
```

--------------------------------

### Create Livewire Search Component

Source: https://github.com/sheafui/components/blob/master/components/search-category/simple-search/doc.md

Generates a new Livewire component for handling search functionality, including both the backend class and the frontend Blade view.

```shell
php artisan livewire:make Search/Index
```

--------------------------------

### Manually Bundle Livewire in app.js

Source: https://github.com/sheafui/components/blob/master/components/search-category/copper-search/doc.md

This snippet shows how to manually bundle Livewire and Alpine.js in the `app.js` file. It includes importing necessary modules like Livewire and AlpineAnimate, registering Alpine.js data components, and starting Livewire. This is crucial for projects where Livewire is not automatically managed by default.

```javascript
import "./bootstrap";
import { Livewire } from '../../../../vendor/livewire/livewire/dist/livewire.esm';
import AlpineAnimate from "@charrafimed/alpine-animation"
import search from "./components/search.js";

// plugins 
Alpine.plugin(AlpineAnimate);
....

// components 
Alpine.data("search", search);
....

Livewire.start();

```

--------------------------------

### Vertical Separator Usage Example

Source: https://github.com/sheafui/components/blob/master/components/separator/usage.md

Illustrates how to render a vertical separator between two card components. This example uses the `vertical` attribute on the separator for side-by-side content division.

```html
<div class="flex gap-4">
    <x-ui.card size="md" class="mx-auto">
        <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
            <span>Welcome to Sheaf UI.</span>
            <a href="https://sheaf.dev">
                <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
            </a>
        </x-ui.heading>
        <p>
            Powered by the TALL stack, our components offer speed, elegance,
            and accessibility for modern web development. 
        </p>
    </x-ui.card>
    {+<x-ui.separator class="my-2" vertical />+}
    <x-ui.card size="md" class="mx-auto">
        <x-ui.heading class="flex items-center justify-between mb-4" level="h3" size="sm">
            <span>Welcome to Converge.</span>
            <a href="https://convergeghp.com">
                <x-ui.icon name="arrow-up-right" class="text-gray-800 dark:text-white size-4" />
            </a>
        </x-ui.heading>
        <p>
            Advanced documentation management framework for Laravel artisans  
        </p>
    </x-ui.card>
</div>
```

--------------------------------

### Custom Label Styling Examples (HTML)

Source: https://github.com/sheafui/components/blob/master/components/label/usage.md

Shows the HTML output for SheafUI label components with custom CSS classes applied, demonstrating how to achieve different text sizes, weights, colors, and spacing.

```html
<x-ui.label class="text-lg font-bold text-blue-600">
    Custom Styled Label
</x-ui.label>

<x-ui.label class="text-xs uppercase tracking-wide text-gray-500">
    Small Label
</x-ui.label>
```

--------------------------------

### Basic Key-Value Input (Blade)

Source: https://github.com/sheafui/components/blob/master/components/key-value/usage.md

Demonstrates the basic usage of the Key-Value input component within a Blade template. It shows how to bind the component to a Livewire model for data management.

```html
<x-ui.key-value 
    wire:model="configurations" 
    label="Configuration Settings"
/>
```

--------------------------------

### Basic Usage of Theme Switcher (Dropdown)

Source: https://github.com/sheafui/components/blob/master/components/theme-switcher/usage.md

Demonstrates the basic usage of the theme-switcher component, defaulting to the dropdown variant for theme selection.

```html
<x-ui.theme-switcher variant="dropdown" />
```

--------------------------------

### Switch with Different Icon Examples

Source: https://github.com/sheafui/components/blob/master/components/switch/usage.md

Showcases various combinations of icons for the Switch component to suit different use cases. Examples include 'dark mode' and 'auto-save' functionalities, with options to control the size of the switch.

```blade
<x-components::ui.switch 
    label="Dark mode"
    description="Switch between light and dark themes"
    name="dark_mode_icon"
    iconOff="sun"
    iconOn="moon"
    size="lg"
/>        
<x-components::ui.switch 
    label="Auto-save"
    description="Automatically save your work"
    name="autosave_icon"
    iconOff="bookmark-slash"
    iconOn="bookmark"
    size="sm"
/>
```

```html
<x-ui.switch 
    label="Dark mode"
    name="dark_mode"
    iconOff="sun"
    iconOn="moon"
    size="lg"
/>


<x-ui.switch 
    label="Auto-save"
    name="autosave"
    iconOff="bookmark-slash"
    iconOn="bookmark"
    size="sm"
/>
```

--------------------------------

### Tooltip Component Usage

Source: https://github.com/sheafui/components/blob/master/components/tooltip/usage.md

Demonstrates the basic usage of the Tooltip component and how to apply custom styling to the tooltip content.

```APIDOC
## Tooltip Component Usage

### Description
This section shows how to use the Tooltip component and customize its appearance by passing additional classes to the content component.

### Method
Not Applicable (Component Usage Example)

### Endpoint
Not Applicable (Component Usage Example)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```html
<x-ui.tooltip placement="top">
    <x-slot:trigger>
        <button>Custom tooltip</button>
    </x-slot:trigger>
    <x-ui.tooltip.content class="bg-purple-600 text-white border border-purple-500">
        This tooltip has custom styling
    </x-ui.tooltip.content>
</x-ui.tooltip>
```

### Response
#### Success Response (200)
Not Applicable (Component Usage Example)

#### Response Example
Not Applicable (Component Usage Example)
```

--------------------------------

### Avatar Groups and Lists

Source: https://github.com/sheafui/components/blob/master/components/avatar/usage.md

Provides an example of creating avatar groups to display multiple users, often used for team member lists. Includes examples of individual avatars within a group and a placeholder for additional members.

```html
<x-ui.heading level="3">Team Members</x-ui.heading>
<x-ui.avatar.group >
    <x-ui.avatar name="Alice Johnson" color="auto" circle href="/user/alice" />
    <x-ui.avatar name="Bob Smith" color="auto" circle href="/user/bob" />
    <x-ui.avatar name="Charlie Brown" color="auto" circle href="/user/charlie" />
    <x-ui.avatar name="Diana Prince" color="auto" circle href="/user/diana" />
    <x-ui.avatar circle>+5</x-ui.avatar>
</x-ui.avatar.group>
```

--------------------------------

### Order Factory Definition Example (PHP)

Source: https://github.com/sheafui/components/blob/master/components/datatable-category/data-viewer/doc.md

Provides an example definition for an OrderFactory to seed demo data. It uses Laravel's Faker provider for generating realistic order details like number, email, amount, status, and ordered_at.

```php
public function definition(): array
    {
      $biasedIdx = fake()->biasedNumberBetween(1, 6, fn($i) => 1 - sqrt($i));
      $statuses = ['returned', 'cancelled', 'shipped', 'processing'];

        return [
            'number' => fake()->randomNumber(5, strict: true),
            'email' => fake()->unique()->safeEmail(),
            'amount' => fake()->randomNumber(3, strict: false),
            'status' => $biasedIdx < 4 ? 'delivered' : fake()->randomElement($statuses),
            'ordered_at' => fake()->dateTimeBetween('-1 years', 'now'),
        ];
    }

```

--------------------------------

### Tags Input Component Usage

Source: https://github.com/sheafui/components/blob/master/components/tags-input/usage.md

Demonstrates how to use the Tags Input component with Livewire and basic configuration.

```APIDOC
## X-UI-TAGS-INPUT

### Description

The `x-ui.tags-input` component provides a user-friendly interface for adding and managing tags. It features built-in drag-and-drop reordering, placeholder text, and various customization options through its props.

### Method

This is a component usage example, not a direct API endpoint.

### Endpoint

N/A

### Parameters

#### Component Props

- **`wire:model`** (string) - Required - Livewire property to bind to.
- **`placeholder`** (string) - Optional - Input placeholder text. Defaults to `'Add tags...'`.
- **`tag-variant`** (string) - Optional - Variant of the tag. Options: `rounded`, `pill`. Defaults to `'rounded'`.
- **`tag-color`** (string) - Optional - Color of the tag. Options: `red`, `blue`, etc. Defaults to `'primary'`.
- **`disabled`** (boolean) - Optional - Whether the input is disabled. Defaults to `false`.
- **`max-tags`** (integer) - Optional - Maximum number of tags allowed. Defaults to `null`.
- **`min-tag-length`** (integer) - Optional - Minimum characters per tag. Defaults to `1`.
- **`max-tag-length`** (integer) - Optional - Maximum characters per tag. Defaults to `50`.
- **`allow-duplicates`** (boolean) - Optional - Allow duplicate tags. Defaults to `false`.
- **`case-sensitive`** (boolean) - Optional - Case-sensitive duplicate checking. Defaults to `false`.
- **`split-keys`** (array) - Optional - Keys that create new tags. Defaults to `[' ', ',', ';']`.
- **`suggestions`** (array) - Optional - Autocomplete suggestions. Defaults to `[]`.
- **`allow-custom`** (boolean) - Optional - Allow custom tags beyond suggestions. Defaults to `true`.
- **`blocked-words`** (array) - Optional - Words that cannot be added as tags. Defaults to `[]`.
- **`allowed-chars`** (string) - Optional - Regex pattern for allowed characters. Defaults to `null`.
- **`show-counter`** (boolean) - Optional - Show tag counter. Defaults to `false`.
- **`show-clear-all`** (boolean) - Optional - Show clear all button. Defaults to `false`.
- **`sort-tags`** (boolean) - Optional - Auto-sort tags alphabetically. Defaults to `false`.
- **`sort-direction`** (string) - Optional - Sort direction. Options: `asc`, `desc`. Defaults to `'asc'`.
- **`create-on-blur`** (boolean) - Optional - Create tag when input loses focus. Defaults to `true`.
- **`create-on-paste`** (boolean) - Optional - Handle paste with auto-splitting. Defaults to `true`.
- **`aria-label`** (string) - Optional - ARIA label for accessibility. Defaults to `'Tags input'`.
- **`aria-description`** (string) - Optional - ARIA description. Defaults to `null`.
- **`class`** (string) - Optional - Additional CSS classes. Defaults to `''`.

### Request Example

```html
<x-demo   x-data="{ tags: ['convergephp','sheaf','eigenify']}">
    <x-ui.tags-input
        x-model="tags"  
        placeholder="Add tags and drag to reorder"
    />
</x-demo>
```

### Response

This component manages state internally and through Livewire binding. No direct API response.

#### Success Response (N/A)

N/A

#### Response Example (N/A)

N/A
```

--------------------------------

### Basic OTP Input Usage with Alpine.js

Source: https://github.com/sheafui/components/blob/master/components/otp/usage.md

Demonstrates the basic usage of the OTP input component bound to a variable using Alpine.js.

```html
<x-ui.otp 
    x-model="code"
/>
```