Sheaf UI

https://sheafui.dev/docs/
Admin
Sheaf UI delivers beautiful, open-source Blade components with Alpine.js and Livewire support to...
Tokens:146,638
Snippets:1,591
Trust Score:6.1
Update:2 months ago
Show doc for...
Tokens:
Raw
### Example Installation Output

Source: https://sheafui.dev/docs/guides/cli-installation

Sample console output showing the installation process and dependency resolution.

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


```

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

### Interactive Setup Prompts

Source: https://sheafui.dev/docs/guides/cli-installation

Examples of the interactive prompts encountered during the initialization process.

```text
? Install Phosphor Icons library? (Y/n)
```

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

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

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

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

### Install Theme Switcher

Source: https://sheafui.dev/docs/components/theme-switcher

Use the artisan command to install the component into your project.

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

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

### Install Kbd Component

Source: https://sheafui.dev/docs/components/kbd

Use the artisan command to install the component into your project.

```bash
php artisan sheaf:install kbd
```

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

### Batch Component Installation

Source: https://sheafui.dev/docs/guides/cli-installation

Install multiple components in a single command.

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

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

### Install Input Component

Source: https://sheafui.dev/docs/components/input

Use the artisan command to install the component into your project.

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

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

### Install Calendar Component

Source: https://sheafui.dev/docs/components/calendar

Run the artisan command to install the component.

```bash
php artisan sheaf:install calendar
```

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

### Install Navlist component

Source: https://sheafui.dev/docs/layouts/navlist

Use the artisan command to install the component into your project.

```bash
php artisan sheaf:install navlist
```

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

### Install Progress Component

Source: https://sheafui.dev/docs/components/progress

Use the artisan command to install the component into your project.

```bash
php artisan sheaf:install progress
```

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

### Install Key-Value Component

Source: https://sheafui.dev/docs/components/key-value

Use the artisan command to install the component into your project.

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

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

### Install Toast Component

Source: https://sheafui.dev/docs/components/toast

Use the artisan command to install the component and add it to your layout.

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

```html
<!-- this is your base layout file -->
<x-ui.toast />
```

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

### Install Command Component

Source: https://sheafui.dev/docs/components/command

Run this command to install the component. Requires the Rover plugin to be installed and registered first.

```bash
php artisan sheaf:install command
```

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

### Install Textarea Component

Source: https://sheafui.dev/docs/components/textarea

Use the artisan command to install the component into your project.

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

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

### Install Empty Component

Source: https://sheafui.dev/docs/components/empty

Use the artisan command to install the component into your project.

```bash
php artisan sheaf:install empty
```

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

### Install Repeater Component

Source: https://sheafui.dev/docs/components/repeater

Run this command to install the necessary files for the Repeater component.

```bash
php artisan sheaf:install repeater
```

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

### Install Select Component

Source: https://sheafui.dev/docs/components/select

Use the artisan command to install the component and import the required JavaScript file.

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

```javascript
// app.js
import './components/select.js';
```

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

### Install Description Component

Source: https://sheafui.dev/docs/components/description

Use the artisan command to add the component to your project.

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

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

### Install Icon Provider Packages

Source: https://sheafui.dev/docs/components/icon

Install the necessary WireUI wrapper packages for Heroicons or Phosphor icons.

```bash
composer require wireui/heroicons
```

```bash
composer require wireui/phosphoricons
```

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

### Install Tags Input Component

Source: https://sheafui.dev/docs/components/tags-input

Use the artisan command to install the component into your project.

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

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

### CLI Whoami Output Example

Source: https://sheafui.dev/docs/guides/cli-installation

Example output displayed after running the whoami command.

```text
You're login as sheafuipro@gmail.com
```

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

### Install Switch Component

Source: https://sheafui.dev/docs/components/switch

Use the artisan command to install the switch component into your project.

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

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

### Install image-diff component

Source: https://sheafui.dev/docs/components/image-diff

Use the artisan command to install the component into your project.

```bash
php artisan sheaf:install image-diff
```

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

### Install Time Picker component

Source: https://sheafui.dev/docs/components/time-picker

Run this command to install the component via the Sheaf CLI.

```bash
php artisan sheaf:install time-picker
```

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

### Install Slider Component

Source: https://sheafui.dev/docs/components/slider

Use the artisan command to install the component and npm to install the required dependency.

```bash
php artisan sheaf:install slider
```

```bash
npm install nouislider
```

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

### Install Sheaf UI Components

Source: https://sheafui.dev/docs/guides/cli-installation

Install individual components and their dependencies into a Laravel project.

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

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

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

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

### Install SheafUI Starter Kit

Source: https://sheafui.dev/docs/guides/starter-kit

Use the Laravel CLI to initialize a new project using the SheafUI starter kit skeleton.

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

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

### Install Brand Component

Source: https://sheafui.dev/docs/components/brand

Use the artisan command to install the component into your project.

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

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

### Install Kanban Component

Source: https://sheafui.dev/docs/components/kanban

Use the artisan command to install the Kanban component into your project.

```bash
php artisan sheaf:install kanban
```

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

### Install OTP Component

Source: https://sheafui.dev/docs/components/otp

Use the artisan command to install the OTP component into your project.

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

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

### Install Tooltip Component

Source: https://sheafui.dev/docs/components/tooltip

Use the artisan command to install the tooltip component into your project.

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

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

### Install Autocomplete Component

Source: https://sheafui.dev/docs/components/autocomplete

Use the artisan command to install the component and import the required JavaScript file.

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

```javascript
// app.js
import './components/autocomplete.js';
```

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

### Install Dropdown Component

Source: https://sheafui.dev/docs/components/dropdown

Use the artisan command to install the dropdown component into your project.

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

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

### Install Error Component

Source: https://sheafui.dev/docs/components/error

Use the artisan command to install the component into your project.

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

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

### Install Text Component

Source: https://sheafui.dev/docs/components/text

Use the artisan command to install the text component into your project.

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

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

### Install Icon Component

Source: https://sheafui.dev/docs/components/icon

Use the artisan command to install the icon component into the project.

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

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

### Install Skeleton Component

Source: https://sheafui.dev/docs/components/skeleton

Use the artisan command to install the component and add the required CSS keyframes to your stylesheet.

```bash
php artisan sheaf:install skeleton
```

```css
@keyframes wave {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(200%);
    }
}
```

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

### Install Modal Component

Source: https://sheafui.dev/docs/components/modal

Use the artisan command to install the modal component into your project.

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

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

### Install Combobox Component

Source: https://sheafui.dev/docs/components/combobox

Use the artisan command to install the component and import the required JavaScript file.

```bash
php artisan sheaf:install combobox
```

```javascript
// app.js
import './components/combobox.js';
```

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

### Install Pagination Component

Source: https://sheafui.dev/docs/components/pagination

Run this command in your terminal to install the pagination component into your project.

```bash
php artisan sheaf:install pagination
```

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

### Install Radio Component

Source: https://sheafui.dev/docs/components/radio

Use the artisan command to install the radio component into your project.

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

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

### Install Link Component

Source: https://sheafui.dev/docs/components/link

Use the artisan command to install the link component into your project.

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

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

### Install Card Component

Source: https://sheafui.dev/docs/components/card

Use the artisan command to install the card component into your project.

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

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

### Install Alerts Component

Source: https://sheafui.dev/docs/components/alerts

Use the artisan command to install the alerts component into your project.

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

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

### Install Breadcrumbs Component

Source: https://sheafui.dev/docs/components/breadcrumbs

Use the artisan command to install the component into your project.

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

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

### Initialization Command Options

Source: https://sheafui.dev/docs/guides/cli-installation

Various flags available for the sheaf:init command to customize installation behavior.

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

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

### Install Sheaf UI Layout Components

Source: https://sheafui.dev/docs/layouts/overview

Use the artisan command to install the necessary layout components into your project.

```bash
php artisan sheaf:install layout sidebar navlist navbar
```

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

### Install Label Component

Source: https://sheafui.dev/docs/components/label

Use the artisan command to install the label component into your project.

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

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

### Install the Context Component

Source: https://sheafui.dev/docs/components/context

Use the artisan command to add the context component to your project.

```bash
php artisan sheaf:install context
```

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

### Initialize Rover with Livewire or Alpine

Source: https://sheafui.dev/docs/primitives/rover

Register the plugin with Alpine before starting the application.

```javascript
import { Livewire, Alpine } from "../../vendor/livewire/livewire/dist/livewire.esm"
import rover from "@sheaf/rover"

Alpine.plugin(rover)
Livewire.start()
```

```javascript
import Alpine from 'alpinejs'
import rover from "@sheaf/rover"

Alpine.plugin(rover)
Alpine.start()
```

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

### Install Separator Component

Source: https://sheafui.dev/docs/components/separator

Use the artisan command to install the separator component into your project.

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

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

### Install Table Component

Source: https://sheafui.dev/docs/components/table

Use the artisan command to install the table component into your project.

```bash
php artisan sheaf:install data-table
```

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

### Install Wizard component via Artisan

Source: https://sheafui.dev/docs/components/wizard

Run this command in your terminal to install the necessary Wizard component files.

```bash
php artisan sheaf:install wizard
```

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

### Component Installation Options

Source: https://sheafui.dev/docs/guides/cli-installation

CLI flags to control component installation behavior, such as forcing overwrites or managing 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
```

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

### Icon Combination Examples

Source: https://sheafui.dev/docs/components/switch

Various icon configurations paired with different sizes.

```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"
/>
```

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

### Install Rover via CDN

Source: https://sheafui.dev/docs/primitives/rover

Include the script tag before Alpine.js initializes to register the plugin.

```html
<script src="https://unpkg.com/@sheaf/rover@latest/dist/cdn.min.js"></script>
```

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

### Install Rover via NPM

Source: https://sheafui.dev/docs/primitives/rover

Install the package using npm to use it within a module-based build system.

```bash
npm i @sheaf/rover
```

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

### Livewire and Alpine Integration

Source: https://sheafui.dev/docs/components/input

Examples showing how to bind the input component to Livewire properties or Alpine.js state.

```html
<x-ui.input 
    wire:model="email" 
    placeholder="Enter email..."
    type="email"
/>
```

```html
<div x-data="{ email: '' }">
    <x-ui.input 
        x-model="email" 
        placeholder="Enter email..."
        type="email"
    />
</div>
```

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

### Install Heading Component

Source: https://sheafui.dev/docs/components/heading

Use the artisan command to add the heading component to your project.

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

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

### Install Button Component

Source: https://sheafui.dev/docs/components/button

Use the artisan command to add the button component to your project.

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

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

### Install Navbar Component

Source: https://sheafui.dev/docs/layouts/navbar

Use the artisan command to add the navbar component to your project.

```bash
php artisan sheaf:install navbar
```

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

### Install Checkbox Component

Source: https://sheafui.dev/docs/components/checkbox

Use the artisan command to install the checkbox component into your project.

```bash
php artisan sheaf:install checkbox
```

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

### Install Field Component

Source: https://sheafui.dev/docs/components/field

Use the artisan command to install the field component into your project.

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

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

### Install Badge Component

Source: https://sheafui.dev/docs/components/badge

Use the artisan command to add the badge component to your project.

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

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

### Basic Link Usage

Source: https://sheafui.dev/docs/components/link

Examples of creating standard, internal, and external links using the x-ui.link component.

```html
<x-ui.link href="https://example.com">
    Visit our website
</x-ui.link>
```

```html
<x-ui.link href="/dashboard">
    Go to Dashboard
</x-ui.link>
```

```html
<x-ui.link href="https://github.com" openInNewTab>
    View on GitHub
</x-ui.link>
```

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

### Install Popover Component

Source: https://sheafui.dev/docs/components/popover

Use the artisan command to add the popover component to your project.

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

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

### Interact with DateRange Methods

Source: https://sheafui.dev/docs/components/date-picker

Provides examples for retrieving, checking, and setting date range values and presets.

```php
// Get the start date as a Y-m-d string (or null if not set)
$start = $this->vacation->getStart(); // e.g., "2026-04-15"

// Get the end date as a Y-m-d string (or null if not set)
$end = $this->vacation->getEnd();     // e.g., "2026-04-25"

// Check if the range has a start date
if ($this->vacation->hasStart()) {
    // Start is set
}

// Check if the range has an end date
if ($this->vacation->hasEnd()) {
    // End is set
}

// Get the preset used to create this range (e.g., DateRangePreset::ThisWeek)
$preset = $this->vacation->getPreset();

// Manually set the preset (e.g., after modifying dates)
$this->vacation->preset(DateRangePreset::Custom);

// Create a new range with only a start date
$partial = DateRange::setStart('2026-04-15'); // end will be null
```

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

### Install BladeKit Icons

Source: https://sheafui.dev/docs/components/icon

Install the core Blade Icons package and specific icon sets to use with the component.

```bash
composer require blade-ui-kit/blade-icons
```

```bash
composer require owenvoke/blade-fontawesome
```

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

### Install Tabs Component

Source: https://sheafui.dev/docs/components/tabs

Use the artisan command to add the tabs component to your project.

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

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

### Install Components via CLI

Source: https://sheafui.dev/docs/guides/overview

Commands to add specific UI components to your project using the Sheaf CLI.

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

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

### Install Sidebar Component

Source: https://sheafui.dev/docs/layouts/sidebar

Use the artisan command to add the sidebar component to your project.

```bash
php artisan sheaf:install sidebar
```

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

### Install Avatar Component

Source: https://sheafui.dev/docs/components/avatar

Use the artisan command to add the Avatar component to your project.

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

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

### Main Layout Usage

Source: https://sheafui.dev/docs/layouts/layout

Examples of using the main layout component with and without a header.

```html
<x-ui.layout.main>
    <!-- With header: no padding on wrapper -->
    <x-ui.layout.header>
        <!-- Header content -->
    </x-ui.layout.header>
    
    <!-- Your content with manual padding -->
    <div class="p-6">
        {{ $slot }}
    </div>
</x-ui.layout.main>
```

```html
<x-ui.layout.main>
    <!-- Without header: automatic padding -->
    {{ $slot }}
</x-ui.layout.main>
```

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

### Card Skeleton Example

Source: https://sheafui.dev/docs/components/skeleton

Combine multiple skeleton components to create a complex loading state for cards.

```html
<div class="rounded-box border border-neutral-200 dark:border-neutral-800 p-4 space-y-4">
    <!-- Header -->
    <div class="flex items-center gap-3">
        <x-ui.skeleton class="size-10 rounded-full" />
        <div class="flex-1 space-y-2">
            <x-ui.skeleton.text class="w-32" />
            <x-ui.skeleton.text size="sm" class="w-24" />
        </div>
    </div>
    
    <!-- Content -->
    <div class="space-y-2">
        <x-ui.skeleton.text />
        <x-ui.skeleton.text class="w-5/6" />
    </div>
    
    <!-- Image -->
    <x-ui.skeleton class="h-48 w-full rounded-box" />
    
    <!-- Actions -->
    <div class="flex gap-4 pt-2">
        <x-ui.skeleton class="h-8 w-20 rounded-box" />
        <x-ui.skeleton class="h-8 w-20 rounded-box" />
    </div>
</div>
```

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

### Install Fieldset Component

Source: https://sheafui.dev/docs/components/fieldset

Use the artisan command to add the fieldset component to your project.

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

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

### Grid Skeleton Example

Source: https://sheafui.dev/docs/components/skeleton

Generate multiple skeleton cards for grid layouts using a loop.

```html
<div class="grid grid-cols-3 gap-4">
    @foreach(range(1, 6) as $i)
        <div class="space-y-3">
            <x-ui.skeleton class="h-48 w-full rounded-box" />
            <x-ui.skeleton.text class="w-3/4" />
            <x-ui.skeleton.text size="sm" />
        </div>
    @endforeach
</div>
```

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

### Define Kanban Column Sizes

Source: https://sheafui.dev/docs/components/kanban

Examples of configuring Kanban columns with different size attributes (xs, sm, and default).

```html
<!-- Extra small cards -->
<x-ui.kanban.column size="xs">
    <x-ui.kanban.header>
        <x-ui.heading>Tasks</x-ui.heading>
    </x-ui.kanban.header>
    
    <x-ui.kanban.cards>
        <x-ui.kanban.card>
            <h4 class="text-xs">Compact card</h4>
        </x-ui.kanban.card>
    </x-ui.kanban.cards>
</x-ui.kanban.column>

<!-- Small cards -->
<x-ui.kanban.column size="sm">
    <x-ui.kanban.header>
        <x-ui.heading>Tasks</x-ui.heading>
    </x-ui.kanban.header>
    
    <x-ui.kanban.cards>
        <x-ui.kanban.card>
            <h4 class="text-sm">Small card</h4>
        </x-ui.kanban.card>
    </x-ui.kanban.cards>
</x-ui.kanban.column>

<!-- Medium cards (default) -->
<x-ui.kanban.column>
    <x-ui.kanban.header>
        <x-ui.heading>Tasks</x-ui.heading>
    </x-ui.kanban.header>
    
    <x-ui.kanban.cards>
        <x-ui.kanban.card>
            <h4>Medium card</h4>
        </x-ui.kanban.card>
    </x-ui.kanban.cards>
</x-ui.kanban.column>
```

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

### Registration Form Example

Source: https://sheafui.dev/docs/components/label

A complete form layout using multiple fields and labels.

```html
<form class="space-y-6">
    <x-ui.field required>
        <x-ui.label>Full Name</x-ui.label>
        <x-ui.input 
            wire:model="name"
            placeholder="John Doe"
        />
        <x-ui.error name="name" />
    </x-ui.field>
    
    <x-ui.field required>
        <x-ui.label>Email Address</x-ui.label>
        <x-ui.input 
            wire:model="email"
            type="email"
            placeholder="john@example.com"
        />
        <x-ui.error name="email" />
    </x-ui.field>
    
    <x-ui.field>
        <x-ui.label>Company</x-ui.label>
        <x-ui.input 
            wire:model="company"
            placeholder="Acme Inc."
        />
        <x-ui.error name="company" />
    </x-ui.field>
</form>
```

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

### Instantiate a Step object

Source: https://sheafui.dev/docs/components/wizard

Create a new Step instance within the setupWizard method to define a wizard step's key, form, view, and behavior.

```php
new Step(
    key: 'account',           // string  — unique identifier
    form: $this->account,     // Form    — the Livewire form instance for this step
    view: 'path.to.view',     // string  — Blade component path for the step content
    skippable: false,         // bool    — whether this step can be skipped (default: false)
    validate: true,           // bool    — whether nextStep() triggers validation (default: true)
)
```

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

### Install Accordion Component

Source: https://sheafui.dev/docs/components/accordion

Use the Sheaf artisan command to add the accordion component to your project.

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

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

### Implement Sidebar and Main Layout

Source: https://sheafui.dev/docs/layouts/sidebar

A comprehensive example showing the integration of a sidebar, header, navigation items, and dropdown menus within a main layout.

```blade
<x-ui.dropdown portal>
            <x-slot:button>
                <x-ui.navlist.item 
                    label="Profile Settings"
                    icon="user"
                    class="w-full"
                />
                <!-- or wrap it with navlist without w-full class -->
                {{-- <x-ui.navlist>
                    <x-ui.navlist.item 
                        label="Profile Settings"
                        icon="user"
                        class="w-full"
                    />
                </x-ui.navlist> --}}
            </x-slot:button>
            
            <x-slot:menu class="!w-[14rem]">
                <x-ui.dropdown.item href="#" icon="adjustments-horizontal">
                    Preference
                </x-ui.dropdown.item>
                
                <x-ui.dropdown.item href="#" icon="user-circle">
                    Profile
                </x-ui.dropdown.item>
                
                <x-ui.dropdown.item href="#" icon="lock-closed">
                    Security
                </x-ui.dropdown.item>
                
                <x-ui.dropdown.item href="#" icon="bell" variant="danger">
                    Notifications
                </x-ui.dropdown.item>
            </x-slot:menu>
        </x-ui.dropdown>
    </x-ui.sidebar>
    <x-ui.layout.main>
        <x-ui.layout.header>
            <x-ui.sidebar.toggle class="md:hidden"/>
            <x-ui.navbar class="flex-1 hidden lg:flex">
                <x-ui.navbar.item
                    icon="home"
                    label="Home" 
                    :href="('/demos/sidebar/home')"
                />
                <x-ui.navbar.item 
                    icon="cog-6-tooth" 
                    label="Settings" 
                    badge="3"
                    badge:color="orange"
                    badge:variant="outline"
                    :href="('/demos/sidebar/settings')"
                />
                <x-ui.dropdown>
                    <x-slot:button>
                        <x-ui.navbar.item 
                            icon="shopping-bag"
                            icon:variant="min" 
                            label="Store" 
                        />
                    </x-slot:button>
                    
                    <x-slot:menu>
                        <x-ui.dropdown.item icon="shopping-bag" :href="('/demos/sidebar/shop/products')">
                            Products
                        </x-ui.dropdown.item>
                        <x-ui.dropdown.item icon="receipt-percent" :href="('/demos/sidebar/shop/orders')">
                            Orders
                        </x-ui.dropdown.item>
                        <x-ui.dropdown.item icon="users" :href="('/demos/sidebar/shop/customers')">
                            Customers
                        </x-ui.dropdown.item>
                        <x-ui.dropdown.item icon="ticket" :href="('/demos/sidebar/shop/discounts')">
                            Discounts
                        </x-ui.dropdown.item>
                    </x-slot:menu>
                </x-ui.dropdown>
            </x-ui.navbar>

            <div class="flex ml-auto gap-x-3 items-center">
                    <x-ui.dropdown position="bottom-end">
                    <x-slot:button class="justify-center">
                        <x-ui.avatar size="sm" src="/mohamed.png" circle alt="Profile Picture" />
                    </x-slot:button>

                    <x-slot:menu class="w-56">
                        <x-ui.dropdown.group label="signed in as">
                            <x-ui.dropdown.item>
                                bo3aza@gmail.com
                            </x-ui.dropdown.item>
                        </x-ui.dropdown.group>

                        <x-ui.dropdown.separator />

                        <x-ui.dropdown.item href="#" wire:navigate.live>
                            Account
                        </x-ui.dropdown.item>

                        <x-ui.dropdown.separator />

                        <form
                            action="#"
                            method="post"
                            class="contents"
                        >
                            @csrf
                            <x-ui.dropdown.item as="button" type="submit">
                                Sign Out
                            </x-ui.dropdown.item>
                        </form>

                    </x-slot:menu>
                </x-ui.dropdown>

                <x-ui.theme-switcher variant="inline" />
            </div>
        </x-ui.layout.header>
    </x-ui.layout.main>
</x-ui.layout>
```

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

### Import Time Picker script

Source: https://sheafui.dev/docs/components/time-picker

Add this import to your JavaScript entry point after installation.

```javascript
// app.js
import './components/time-picker/index.js';
```

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

### Install DatePicker via Artisan

Source: https://sheafui.dev/docs/components/date-picker

Use the sheaf artisan command to add the date-picker component to your project.

```bash
php artisan sheaf:install date-picker
```

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

### Bind Range Mode to Livewire (Associative Array)

Source: https://sheafui.dev/docs/components/date-picker

Sync a range using an associative array with start and end keys.

```php
public array $range = ['start' => null, 'end' => null];
```

```html
<x-ui.date-picker mode="range" wire:model="range" />
```

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

### Basic Card Usage

Source: https://sheafui.dev/docs/components/card

Example of a card containing a heading, icon link, and descriptive text.

```html
    <x-ui.card size="xl" 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>
```

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

### Badge Positioning and Variants

Source: https://sheafui.dev/docs/components/avatar

Provides examples for controlling badge placement and visual variants.

```html
<!-- Badge positioning -->
<x-ui.avatar name="User" badge badge:position="top left" />
<x-ui.avatar name="User" badge badge:position="top right" />
<x-ui.avatar name="User" badge badge:position="bottom left" />
<x-ui.avatar name="User" badge badge:position="bottom right" />

<!-- Badge variants -->
<x-ui.avatar name="User" badge="3" badge:color="red" />
<x-ui.avatar name="User" badge="5" badge:variant="outline" />
<x-ui.avatar name="User" badge="99+" badge:circle />
```

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

### Implement internal state synchronization

Source: https://sheafui.dev/docs/guides/usage-patterns

Example of manually wiring state inside a component to support both Alpine x-model and Livewire wire:model.

```javascript
<div
    x-data="{
        state: [],
        ...
        init() {
            this.$nextTick(() => {
                this.state = this.$root?._x_model?.get() ?? []
                ...
            })

           this.$watch('state', (value) => {
                // Sync with Alpine state
                this.$root?._x_model?.set(value);

                // Sync with Livewire state
                if(this.$wire){
                    let wireModel = this?.$root.getAttributeNames().find(n => n.startsWith('wire:model'))
                    let prop = this.$root.getAttribute(wireModel)
                    this.$wire.set(prop, value, wireModel.includes('.live'));
                }
            });
        },
        ...
    }"
>
```

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

### Switch Primary Theme to Blue

Source: https://sheafui.dev/docs/guides/themes

Example of updating primary color variables and dark mode overrides simultaneously.

```css
@theme {
    --color-primary: var(--color-blue-600);
    --color-primary-content: var(--color-blue-700);
    --color-primary-fg: var(--color-white);
}

@layer theme {
    .dark {
        --color-primary: var(--color-white) !important ;
        --color-primary-content: var(--color-white) !important;
        --color-primary-fg:  var(--color-neutral-800) !important;
    }
}
```

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

### Table Skeleton Example

Source: https://sheafui.dev/docs/components/skeleton

Use skeleton text components within table rows to represent loading data.

```html
<table class="w-full">
     <thead class="text-base font-normalt">
        <tr>
            <th>#</th>
            <th>Number</th>
            <th>Status</th>
            <th>Punishments</th>
        </tr>
    </thead>
    <tbody class="divide-y divide-neutral-200 dark:divide-neutral-800">
        @foreach(range(1, 5) as $i)
            <tr>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
                <td class="px-4 py-3"><x-ui.skeleton.text /></td>
            </tr>
        @endforeach
    </tbody>
</table>
```

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

### Form Component Integration

Source: https://sheafui.dev/docs/components/label

Examples of using the label component with various form inputs.

```html
<x-ui.label>Full Name</x-ui.label>
<x-ui.input 
    wire:model="name" 
    placeholder="John Doe"
/>
```

```html
<x-ui.label required>Country</x-ui.label>
<x-ui.select wire:model="country">
    <x-ui.select.option value="us">United States</x-ui.select.option>
    <x-ui.select.option value="ca">Canada</x-ui.select.option>
    <x-ui.select.option value="uk">United Kingdom</x-ui.select.option>
</x-ui.select>
```

```html
<x-ui.label>Message</x-ui.label>
<x-ui.textarea 
    wire:model="message" 
    placeholder="Enter your message..."
    rows="4"
/>
```

```html
<x-ui.checkbox wire:model="newsletter">
    <x-ui.label>Subscribe to newsletter</x-ui.label>
</x-ui.checkbox>
```

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

### Implement Helpful Instructions

Source: https://sheafui.dev/docs/components/description

Provide specific formatting instructions for URL inputs.

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

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

### Implement Wizard Component

Source: https://sheafui.dev/docs/components/wizard

Use the HasWizard trait and implement setupWizard to define steps and manage form progression.

```php
<?php

namespace App\Livewire;

use App\View\Components\Step;
use App\View\Components\Wizard;
use App\Livewire\Forms\AccountForm;
use App\Livewire\Forms\ProfileForm;
use App\Livewire\Forms\PreferencesForm;
use Illuminate\Support\Facades\DB;
use Illuminate\View\View;
use Livewire\Component;
use App\Livewire\Concerns\HasWizard;

class UserOnboarding extends Component
{
    use HasWizard;

    public Wizard $wizard;

    public AccountForm $account;
    public ProfileForm $profile;
    public PreferencesForm $preferences;

    public function submit(): void
    {
        DB::transaction(function () {
            // $this->wizard->all() returns all form data keyed by step
            $data = $this->wizard->all();
            // persist $data...
        });
    }

    public function render(): View
    {
        return view('livewire.user-onboarding');
    }

    protected function setupWizard(): array
    {
        return [
            new Step(
                key: 'account',
                form: $this->account,
                view: 'livewire.wizard.steps.account',
            ),
            new Step(
                key: 'profile',
                form: $this->profile,
                view: 'livewire.wizard.steps.profile',
                skippable: true,
            ),
            new Step(
                key: 'preferences',
                form: $this->preferences,
                view: 'livewire.wizard.steps.preferences',
            ),
        ];
    }
}
```

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

### Implement Server-side Search with Livewire

Source: https://sheafui.dev/docs/components/combobox

Bind the input to a Livewire property to handle filtering logic on the server. The backend example demonstrates how to update the component list based on the query.

```blade
<x-ui.combobox
    wire:model="options"
    placeholder="Search components..."
    multiple
>
    <!-- handle empty state yourself -->
    <x-slot:search>
        <x-ui.combobox.input wire:model.live="query"/>
    </x-slot>
    <!-- handle empty state yourself -->
    @if (!$componens->count())
        <x-ui.combobox.option.empty>
            No Component Found                        
        </x-ui.combobox.option.empty>
    @endif

    @foreach ($components as $item)
        <x-ui.combobox.option
            wire:key="{{ $item->server_name }}"
            value="{{ $item->server_name }}"
        >
            {{ $item->name }}
        </x-ui.combobox.option>
    @endforeach
</x-ui.combobox>
```

```php
public string $query = '';
public $components = [];

public function mount(): void
{
    $this->components = Component::limit(10)->get();
}

public function updatedQuery(): void
{
    $this->components = Component::where('name', 'like', "%{$this->query}%")
        ->limit(10)
        ->get();
}
```

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

### Override Start Day

Source: https://sheafui.dev/docs/components/date-picker

Force a specific day of the week to be the start day, overriding locale defaults.

```blade
{{-- Force Monday as first day regardless of locale --}}
<x-ui.date-picker locale="en-US" :start-day="1" wire:model="date" />
```

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

### Dynamic Navigation with Livewire

Source: https://sheafui.dev/docs/layouts/navbar

Demonstrates how to define navigation items in a Livewire component and render them using a loop.

```php
// In your Livewire component
public $navItems = [
    ['icon' => 'home', 'label' => 'Dashboard', 'href' => '/dashboard'],
    ['icon' => 'chart-bar', 'label' => 'Analytics', 'href' => '/analytics'],
    ['icon' => 'folder', 'label' => 'Projects', 'href' => '/projects', 'badge' => 5],
];
```

```blade
<x-ui.navbar>
    @foreach($navItems as $item)
        <x-ui.navbar.item 
            :icon="$item['icon']"
            :label="$item['label']"
            :href="$item['href']"
            :badge="$item['badge'] ?? null"
            :active="request()->is(ltrim($item['href'], '/'))"
        />
    @endforeach
</x-ui.navbar>
```

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

### Configure custom week start

Source: https://sheafui.dev/docs/components/calendar

Force a specific day as the start of the week using the start-day attribute, where 0 represents Sunday and 1 represents Monday.

```blade
{{-- Force Monday as first day regardless of locale --}}
<x-ui.calendar locale="en-US" :start-day="1" wire:model="date" />
```

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

### Component Namespace Path

Source: https://sheafui.dev/docs/guides/overview

The base directory where all Sheaf UI components are installed.

```text
resources/views/components/ui/
```

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

### Labeled Separators

Source: https://sheafui.dev/docs/components/separator

Examples of horizontal and vertical separators with text labels for context.

```html
<x-ui.separator label="OR" />
```

```html
<x-ui.separator vertical label="OR" />
```

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

### Basic OTP Usage

Source: https://sheafui.dev/docs/components/otp

Implement the OTP component using a standard Livewire model binding.

```html
<x-ui.otp 
    wire:model="verificationCode"
/>
```

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

### List Available Components

Source: https://sheafui.dev/docs/guides/cli-installation

Displays all components currently available in the Sheaf UI library.

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

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

### Register WizardSynthesizer in Service Provider

Source: https://sheafui.dev/docs/components/wizard

Register the synthesizer in your service provider to enable Livewire state serialization for the Wizard object.

```php
use Livewire\Livewire;
use App\Livewire\Synthesizers\WizardSynthesizer;

public function boot(): void
{
    Livewire::propertySynthesizer(WizardSynthesizer::class);
}
```

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

### Theme Switcher Variants

Source: https://sheafui.dev/docs/components/theme-switcher

Examples of the different layout variants available for the theme switcher.

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

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

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

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

### Implement a Header with Search and Actions

Source: https://sheafui.dev/docs/layouts/header

Includes a search input field and action buttons alongside standard navigation items.

```html
<x-ui.layout.header>
    <x-ui.navbar class="flex-1">
        <x-ui.navbar.item icon="home" label="Home" href="/" />
        <x-ui.navbar.item icon="document-text" label="Docs" href="/docs" />
    </x-ui.navbar>

    <div class="flex items-center gap-x-4">
        <x-ui.input 
            placeholder="Search..." 
            icon="magnifying-glass"
            class="w-64"
        />
        <x-ui.button variant="solid" size="sm" icon="plus">
            New Project
        </x-ui.button>
        <x-ui.avatar src="/mohamed.png" circle size="sm" />
    </div>
</x-ui.layout.header>
```

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

### Display a project empty state with multiple actions

Source: https://sheafui.dev/docs/components/empty

Use this configuration to prompt users to create or import items when a list is empty, featuring a bordered container.

```html
<x-ui.empty class="border border-neutral-200 dark:border-neutral-800 rounded-box">
    <x-ui.empty.media class="flex items-center justify-center w-12 h-12 rounded-full bg-neutral-100 dark:bg-neutral-800">
        <x-ui.icon name="folder-plus" class="size-6" />
    </x-ui.empty.media>

    <x-ui.empty.contents>
        <x-ui.heading>No projects yet</x-ui.heading>
        <x-ui.text class="opacity-70">
            Create your first project or import an existing one.
        </x-ui.text>

        <div class="flex gap-2 mt-4">
            <x-ui.button size="sm">New project</x-ui.button>
            <x-ui.button variant="outline" size="sm">Import</x-ui.button>
        </div>
    </x-ui.empty.contents>
</x-ui.empty>
```

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

### Use Description Component

Source: https://sheafui.dev/docs/components/input

Provide helper text for inputs to guide user interaction.

```blade
<x-ui.description>
    This information will be displayed publicly so be careful what you share.
</x-ui.description>
```

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

### Execute $modal store operations

Source: https://sheafui.dev/docs/components/modal

Demonstrates common usage patterns for opening, closing, and checking the status of modals.

```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()); // []
```

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

### Install Sheaf CLI

Source: https://sheafui.dev/docs/guides/cli-installation

Use Composer to add the Sheaf CLI package to your Laravel project.

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

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

### Create a simplified interface

Source: https://sheafui.dev/docs/components/key-value

Hide advanced features to provide a minimal configuration interface.

```blade
<x-ui.key-value 
    wire:model="simpleConfig" 
    label="Simple Configuration"
    :reorderable="false"
    :show-duplicate="false"
    :show-top-bar="false"
/>
```

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

### Initialize Sheaf UI Dark Mode via CLI

Source: https://sheafui.dev/docs/guides/dark-mode

Run this command to automatically generate the necessary utility and theme configuration files.

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

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

### Navbar in Header Context

Source: https://sheafui.dev/docs/layouts/navbar

Example of integrating the navbar within a header component alongside other UI elements.

```blade
<x-ui.header>
    <x-ui.navbar class="flex-1">
        <x-ui.navbar.item icon="home" label="Home" href="/" />
        <x-ui.navbar.item icon="folder" label="Projects" href="/projects" />
        <x-ui.navbar.item icon="users" label="Team" href="/team" />
    </x-ui.navbar>

    <div class="flex items-center gap-x-3">
        <x-ui.avatar src="/user.jpg" circle size="sm" />
        <x-ui.theme-switcher variant="inline" />
    </div>
</x-ui.header>
```

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

### Implement Basic Layout Structure

Source: https://sheafui.dev/docs/layouts/layout

Wrap application content with the layout component. Ensure this is nested within a base layout that provides necessary CSS and JavaScript imports.

```html
<head>
<!-- vite.. -->
</head>
<body>
<x-ui.layout>
    <x-ui.sidebar>
        <!-- Sidebar content -->
    </x-ui.sidebar>
    
    <x-ui.layout.main>
        <x-ui.layout.header>
            <!-- Header content -->
        </x-ui.layout.header>
        
        <!-- Page content -->
        <div class="p-6">
            {{ $slot }}
        </div>
    </x-ui.layout.main>
</x-ui.layout>
</body>
```

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

### Basic Input Usage

Source: https://sheafui.dev/docs/components/input

Standard implementation of the input component using Livewire binding.

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

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

### Interactive Popover Content

Source: https://sheafui.dev/docs/components/popover

Example of a complex popover containing user profile information and action buttons.

```html
<x-ui.popover>
    <x-ui.popover.trigger>
        <x-ui.button>
            User Profile
        </x-ui.button>
    </x-ui.popover.trigger>
    <x-ui.popover.overlay class="!w-80">
        <div class="p-2">
            <div class="flex items-center gap-3 mb-3">
                <x-ui.avatar src="https://avatars.githubusercontent.com/u/130717329?v=4"/>
                <div>
                    <x-ui.heading class="font-semibold">CHARRAFI MOHAMED</x-ui.heading>
                    <x-ui.text class="text-sm text-neutral-600 dark:text-neutral-400">med@charrafi.com</x-ui.text>
                </div>
            </div>
            <div class="flex justify-end gap-2">
                <x-ui.button size="sm" variant="outline" x-on:click="hide()">
                    View Profile
                </x-ui.button>
                <x-ui.button size="sm" x-on:click="hide()">
                    Edit
                </x-ui.button>
            </div>
        </div>
    </x-ui.popover.overlay>
</x-ui.popover>
```

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

### Implement a Basic Header

Source: https://sheafui.dev/docs/layouts/header

Use this structure to include a navigation bar and user action elements like an avatar and theme switcher within the main layout.

```html
<x-ui.layout.main>
    <x-ui.layout.header>
        <x-ui.navbar class="flex-1">
            <x-ui.navbar.item icon="home" label="Home" href="/" />
            <x-ui.navbar.item icon="cog-6-tooth" label="Settings" href="/settings" />
        </x-ui.navbar>
        
        <div class="flex gap-x-3 items-center">
            <x-ui.avatar size="sm" src="/avatar.png" circle />
            <x-ui.theme-switcher variant="inline" />
        </div>
    </x-ui.layout.header>

    <div class="p-6">
        <!-- Your page content -->
    </div>
</x-ui.layout.main>
```

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

### Sync state with x-modelable

Source: https://sheafui.dev/docs/guides/usage-patterns

Demonstrates using x-modelable to sync internal component state with an external Alpine model.

```html
<div x-data="{ number: 5 }">
    <!-- `count` is exposed and bound to `number` -->
    <div x-data="{ count: 0 }" x-modelable="count" x-model="number">
        <button @click="count++">Increment</button>
    </div>

    Number: <span x-text="number"></span>
</div>
```

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

### Validate Date Range

Source: https://sheafui.dev/docs/components/date-picker

Defines validation rules for start and end dates in a Laravel request or form.

```php
use Illuminate\\Validation\\Validator;

public function rules(): array
{
    return [
        'vacation.start' => 'required|date_format:Y-m-d',
        'vacation.end' => 'required|date_format:Y-m-d|after:vacation.start',
    ];
}
```

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

### Configure Range Separator

Source: https://sheafui.dev/docs/components/date-picker

Customize the character used to separate start and end dates in range mode.

```html
<x-ui.date-picker mode="range" range-separator="→" />
```

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

### Basic Skeleton Usage

Source: https://sheafui.dev/docs/components/skeleton

Create simple placeholders by defining dimensions using utility classes.

```html
<x-ui.skeleton class="h-8 w-40" />
<x-ui.skeleton class="h-4 w-full" />
<x-ui.skeleton class="size-12 rounded-full" />
```

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

### Implement Pre-filled Values

Source: https://sheafui.dev/docs/components/otp

Synchronize external state with the OTP component using Livewire or Alpine.js.

```html
<div>
    <x-ui.otp wire:model.live="prefilledCode" />
    <p class="text-sm text-neutral-600 mt-2">Current value: <span wire:text="prefilledCode"></span></p>
</div>
```

```html
<div x-data="{ code: '1234' }">
    <x-ui.otp x-model="code" />
    <p class="text-sm text-neutral-600 mt-2">Current value: <span x-text="prefilledCode"></span></p>
</div>
```

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

### Display Keyboard Shortcuts

Source: https://sheafui.dev/docs/components/kbd

Use the keys prop to define shortcut combinations.

```html
<x-ui.kbd keys="Ctrl+K" />
<x-ui.kbd keys="Cmd+Shift+P" />
<x-ui.kbd keys="Alt+F4" />
```

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

### Apply Advanced Masking Patterns

Source: https://sheafui.dev/docs/components/input

Examples for specific data formats like Social Security Numbers and License Plates.

```blade
<x-ui.input 
    x-mask="999-99-9999"
    placeholder="123-45-6789"
    leftIcon="identification"
/>
```

```blade
<x-ui.input 
    x-mask="aaa-9999"
    placeholder="ABC-1234"
    leftIcon="truck"
/>
```
Tokens:
Raw