### Luvi UI Getting Started

Source: https://laravel-luvi.com/docs/components/sheet

This section provides essential information for getting started with Luvi UI in your Laravel project, including an introduction, installation guide, typography, and theming options.

```html
#### Getting Started
  * [Introduction](https://laravel-luvi.com/docs)
  * [Installation](https://laravel-luvi.com/docs/installation)
  * [Typography](https://laravel-luvi.com/docs/typography)
  * [Theming](https://laravel-luvi.com/docs/theming)
```

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

### Luvi UI Getting Started

Source: https://laravel-luvi.com/docs/components/radio-group

This section provides essential information for getting started with Luvi UI in your Laravel project, including an introduction, installation guide, typography, and theming options.

```html
#### Getting Started
  * [Introduction](https://laravel-luvi.com/docs)
  * [Installation](https://laravel-luvi.com/docs/installation)
  * [Typography](https://laravel-luvi.com/docs/typography)
  * [Theming](https://laravel-luvi.com/docs/theming)
```

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

### Luvi UI Getting Started

Source: https://laravel-luvi.com/docs/typography

Provides links to essential sections for getting started with Luvi UI for Laravel, including Introduction, Installation, Typography, and Theming.

```html
<!-- Example of a getting started link -->
<a href="https://laravel-luvi.com/docs/installation">Installation</a>
```

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

### Luvi UI Getting Started

Source: https://laravel-luvi.com/docs/livewire-components/combobox

This section covers the initial steps for using Luvi UI in a Laravel project, including an introduction to the library, installation instructions, typography guidelines, and theming options.

```APIDOC
Getting Started:

- Introduction: https://laravel-luvi.com/docs
- Installation: https://laravel-luvi.com/docs/installation
- Typography: https://laravel-luvi.com/docs/typography
- Theming: https://laravel-luvi.com/docs/theming
```

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

### Luvi UI Getting Started

Source: https://laravel-luvi.com/docs/components/form

This section provides essential information for getting started with Luvi UI in your Laravel project, including an introduction, installation guide, typography, and theming options.

```html
#### Getting Started
  * [Introduction](https://laravel-luvi.com/docs)
  * [Installation](https://laravel-luvi.com/docs/installation)
  * [Typography](https://laravel-luvi.com/docs/typography)
  * [Theming](https://laravel-luvi.com/docs/theming)
```

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

### Luvi UI Getting Started

Source: https://laravel-luvi.com/docs/components/dropdown-menu

This section provides essential information for getting started with Luvi UI in your Laravel project, including an introduction, installation guide, typography, and theming options.

```html
#### Getting Started
  * [Introduction](https://laravel-luvi.com/docs)
  * [Installation](https://laravel-luvi.com/docs/installation)
  * [Typography](https://laravel-luvi.com/docs/typography)
  * [Theming](https://laravel-luvi.com/docs/theming)
```

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

### Install Select Component

Source: https://laravel-luvi.com/docs/components/select

Command to publish the Select component's assets, typically used during the installation or setup phase.

```bash
phpartisanvendor:publish--tag=select--force
```

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

### Install Lucide Icon Set

Source: https://laravel-luvi.com/docs/installation

Installs the Lucide icon set using Composer, which is recommended for achieving the same look and feel as the Luvi UI examples.

```bash
composerrequiremallardduck/blade-lucide-icons
```

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

### Tooltip Installation

Source: https://laravel-luvi.com/docs/components/tooltip

Provides the Artisan command to publish the tooltip assets during installation.

```php
php artisan vendor:publish --tag=tooltip --force
```

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

### Install Luvi UI for Laravel

Source: https://laravel-luvi.com/docs/installation

Installs the Luvi UI package for Laravel using Composer.

```bash
composer require luvi-ui/laravel-luvi
```

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

### Dropdown Menu Installation

Source: https://laravel-luvi.com/docs/components/dropdown-menu

Command to publish the dropdown menu assets and configuration files.

```php
php artisan vendor:publish --tag=dropdown-menu --force
```

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

### Install Alpine.js Plugins (npm)

Source: https://laravel-luvi.com/docs/installation

Installs the necessary Alpine.js plugins for anchor and collapse functionality using npm.

```bash
npminstall@alpinejs/anchor@alpinejs/collapse
```

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

### Input Component Installation

Source: https://laravel-luvi.com/docs/components/input

Provides the Artisan command to publish the Input component assets.

```php
php artisan vendor:publish --tag=input --force
```

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

### Install Alpine.js Plugins (npm) - Standalone

Source: https://laravel-luvi.com/docs/installation

Installs the necessary Alpine.js plugins for anchor and collapse functionality when Alpine.js is installed independently.

```bash
npminstall@alpinejs/anchor@alpinejs/collapse
```

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

### Install Tailwind CSS Plugins

Source: https://laravel-luvi.com/docs/installation

Installs the necessary Tailwind CSS plugins for form styling and animations.

```bash
npminstall-D@tailwindcss/formstailwindcss-animate
```

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

### Install Alert Component

Source: https://laravel-luvi.com/docs/components/alert

Command to publish the Alert component assets and configuration files to your Laravel project.

```bash
phpartisanvendor:publish--tag=alert--force
```

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

### Input Component Examples

Source: https://laravel-luvi.com/docs/components/input

Showcases different variations of the Input component, including default, file upload, and disabled states.

```html
<x-input />
```

```html
<div class="grid w-full max-w-sm items-center gap-1.5">
    <x-label for="picture">Picture</x-label>
    <x-input
        id="picture"
        type="file"
    />
</div>
```

```html
<x-input
    disabled
    type="email"
    placeholder="Email"
/>
```

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

### Basic Switch Component

Source: https://laravel-luvi.com/docs/components/switch

A simple example of how to render the Switch component in your Blade views.

```php
<Switch />
```

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

### Sheet Component Usage Example

Source: https://laravel-luvi.com/docs/components/sheet

A basic example demonstrating the usage of the Sheet component with a title and description. This snippet shows a simple modal-like interface.

```html
<x-sheet>
  <x-sheet.trigger>open</x-sheet.trigger>
  <x-sheet.content>
    <x-sheet.header>
      <x-sheet.title>are you absolutely sure?</x-sheet.title>
      <x-sheet.description>
        this action cannot be undone. this will permanently delete your account
        and remove your data from our servers.
      </x-sheet.description>
    </x-sheet.header>
  </x-sheet.content>
</x-sheet>
```

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

### Combobox Component Installation

Source: https://laravel-luvi.com/docs/livewire-components/combobox

This command publishes the Combobox Livewire component assets, making it available for use in your Laravel project.

```bash
php artisan vendor:publish --tag=combobox --force
```

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

### Install Checkbox Component Assets

Source: https://laravel-luvi.com/docs/components/checkbox

Command to publish the assets for the Checkbox component, typically used during the installation or setup phase of the Luvi UI package.

```bash
php artisan vendor:publish --tag=checkbox --force
```

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

### Basic Alert Component

Source: https://laravel-luvi.com/docs/components/alert

A simple example of the Alert component with a title and description, showcasing its basic structure.

```html
<x-alert>
<x-alert.title>Title</x-alert.title>
<x-alert.description>
        Description
</x-alert.description>
</x-alert>
```

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

### Button Component

Source: https://laravel-luvi.com/docs/components/button

Demonstrates the basic usage and different variants of the Button component in Laravel Luvi UI. Includes installation instructions and usage examples for primary, secondary, destructive, outline, and ghost button styles.

```html
<x-button>Button</x-button>
```

```php
php artisan vendor:publish --tag=button --force
```

```html
<x-button variant="outline">Button</x-button>
```

```html
<x-button variant="secondary">Secondary</x-button>
```

```html
<x-button variant="destructive">Destructive</x-button>
```

```html
<x-button variant="outline">Button</x-button>
```

```html
<x-button variant="ghost">Ghost</x-button>
```

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

### Luvi UI Installation Command

Source: https://laravel-luvi.com/docs/components/textarea

Command to publish the Textarea component's assets during installation. This command ensures all necessary files for the Textarea component are correctly placed in your project.

```php
php artisan vendor:publish --tag=textarea --force
```

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

### Laravel Luvi Form Usage Examples

Source: https://laravel-luvi.com/docs/components/form

Illustrates how to use the x-form component with x-form.input for both standard HTML forms and Livewire-integrated forms. Shows basic input configuration with labels and placeholders.

```html
<x-form>
<!-- without livewire -->
<x-form.input
name="username"
label="Username"
placeholder="shadcn"
    />
<!-- with livewire -->
<x-form.input
wire:model="username"
label="Username"
placeholder="shadcn"
    />
<x-buttontype="submit">Submit</x-button>
</x-form>
```

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

### Install Accordion Component

Source: https://laravel-luvi.com/docs/components/accordion

Command to publish the Accordion component's assets and configuration files using Artisan.

```php
php artisan vendor:publish --tag=accordion --force
```

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

### Install Laravel Luvi Form Package

Source: https://laravel-luvi.com/docs/components/form

Command to publish the form assets and configurations for Laravel Luvi.

```php
php artisan vendor:publish --tag=form --force
```

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

### Link Component Usage Example

Source: https://laravel-luvi.com/docs/components/link

An example of how to implement the Luvi UI Link component in a Blade template. It shows the basic structure for creating a clickable link with custom text.

```blade
<x-linkhref="https://laravel.com">Link</x-link>
```

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

### Dropdown Menu Basic Usage

Source: https://laravel-luvi.com/docs/components/dropdown-menu

Example of a simple dropdown menu with a trigger and a list of items.

```html
<x-dropdown-menu>
  <x-dropdown-menu.trigger>Open</x-dropdown-menu.trigger>
  <x-dropdown-menu.content>
    <x-dropdown-menu.label>My Account</x-dropdown-menu.label>
    <x-dropdown-menu.separator />
    <x-dropdown-menu.item>Profile</x-dropdown-menu.item>
    <x-dropdown-menu.item>Billing</x-dropdown-menu.item>
    <x-dropdown-menu.item>Team</x-dropdown-menu.item>
    <x-dropdown-menu.item>Subscription</x-dropdown-menu.item>
  </x-dropdown-menu.content>
</x-dropdown-menu>
```

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

### H1 Typography Example

Source: https://laravel-luvi.com/docs/typography

Demonstrates how to use the H1 typography component to render a main heading. Includes preview and code sections.

```html
<x-typography.h1>

    Taxing Laughter: The Joke Tax Chronicles

</x-typography.h1>
```

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

### Notification Card Example

Source: https://laravel-luvi.com/docs/components/card

This example showcases a notification card displaying a list of notifications. It uses PHP to iterate over a collection of notification objects and renders each notification with a title and description. Includes a switch for push notifications and a button to mark all as read.

```php
@php


$notifications =[


(object)[

'title'=>'Your call has been confirmed.',

'description'=>'1 hour ago',

],


(object)[

'title'=>'You have a new message!',

'description'=>'1 hour ago',

],


(object)[

'title'=>'Your subscription is expiring soon!',

'description'=>'2 hours ago',

],

];

@endphp



<x-cardclass="w-[380px]">


<x-card.header>


<x-card.title>Notifications</x-card.title>


<x-card.description>You have 3 unread messages.</x-card.description>


</x-card.header>


<x-card.contentclass="grid gap-4">


<divclass=" flex items-center space-x-4 rounded-md border p-4">


<x-lucide-bellclass="size-4" />


<divclass="flex-1 space-y-1">


<pclass="text-sm font-medium leading-none">


                    Push Notifications

</p>


<pclass="text-sm text-muted-foreground">


                    Send notifications to device.

</p>


</div>


<x-switch />


</div>


<div>


@foreach ($notifications as$notification)


<divclass="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">


<spanclass="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>


<divclass="space-y-1">


<pclass="text-sm font-medium leading-none">


{{$notification->title }}


</p>


<pclass="text-sm text-muted-foreground">


{{$notification->description }}


</p>


</div>


</div>



@endforeach


</div>


</x-card.content>


<x-card.footer>


<x-buttonclass="w-full">


<x-lucide-checkclass="mr-2 h-4 w-4" /> Mark all as read


</x-button>


</x-card.footer>


</x-card>
```

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

### Link Component Installation

Source: https://laravel-luvi.com/docs/components/link

Provides the Artisan command to publish the Link component's assets. This command makes the component's views and other necessary files available for use in your Laravel project.

```bash
phpartisanvendor:publish--tag=link--force
```

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

### Sheet Component Installation

Source: https://laravel-luvi.com/docs/components/sheet

Command to publish the Sheet component's assets using the Artisan command-line tool. The --force flag overwrites existing files.

```bash
php artisan vendor:publish --tag=sheet --force
```

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

### Install Dialog Component

Source: https://laravel-luvi.com/docs/components/dialog

Command to publish the dialog component's assets, including views and configurations, using the Artisan command-line tool.

```php
php artisan vendor:publish --tag=dialog --force
```

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

### Install Typography Components

Source: https://laravel-luvi.com/docs/typography

This command publishes the typography components for the Laravel Luvi project. The --force flag overwrites existing files if necessary.

```php
php artisan vendor:publish --tag=typography --force
```

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

### Initialize Alpine.js with Plugins and Modules - Standalone

Source: https://laravel-luvi.com/docs/installation

Configures Alpine.js to use anchor and collapse plugins, and loads custom JavaScript modules from the plugins directory. This snippet is for standalone Alpine.js installations.

```javascript
import Alpine from"alpinejs";

import anchor from"@alpinejs/anchor";

import collapse from"@alpinejs/collapse";

Alpine.plugin(anchor);

Alpine.plugin(collapse);

const modules =import.meta.glob("./plugins/**/*.js",{eager:true});

for (const path in modules) {

Alpine.plugin(modules[path].default);

}

Alpine.start();
```

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

### H2 Typography Example

Source: https://laravel-luvi.com/docs/typography

Demonstrates how to use the H2 typography component to render a secondary heading. Includes preview and code sections.

```html
<x-typography.h2>

    The People of the Kingdom

</x-typography.h2>
```

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

### Tabs Component Example

Source: https://laravel-luvi.com/docs/components/tabs

Demonstrates the usage of the Tabs component in Luvi UI for Laravel. It shows how to structure tabbed content with different sections like Account and Password.

```html
<div class="tabs">
  <div class="tab-list">
    <button class="tab-button active" data-tab="account">Account</button>
    <button class="tab-button" data-tab="password">Password</button>
  </div>

  <div id="account" class="tab-panel active">
    <h3>Account</h3>
    <p>Make changes to your account here. Click save when you're done.</p>
    <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" placeholder="Enter your name">
    </div>
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" id="username" placeholder="Enter your username">
    </div>
    <button class="save-button">Save changes</button>
  </div>

  <div id="password" class="tab-panel">
    <h3>Password</h3>
    <p>Change your password here.</p>
    </div>
</div>
```

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

### H3 Typography Example

Source: https://laravel-luvi.com/docs/typography

Demonstrates how to use the H3 typography component to render a tertiary heading. Includes preview and code sections.

```html
<x-typography.h3>

    The Joke Tax

</x-typography.h3>
```

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

### Separator Installation Command

Source: https://laravel-luvi.com/docs/components/separator

Provides the Artisan command to publish the separator component's assets and configuration files to your Laravel project.

```php
phpartisanvendor:publish--tag=separator--force
```

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

### H4 Typography Example

Source: https://laravel-luvi.com/docs/typography

Demonstrates how to use the H4 typography component to render a quaternary heading. Includes preview and code sections.

```html
<x-typography.h4>

    People stopped telling jokes

</x-typography.h4>
```

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

### Install Laravel Luvi Tabs Component

Source: https://laravel-luvi.com/docs/components/tabs

This command publishes the necessary assets for the Laravel Luvi Tabs component to your project. The `--force` flag overwrites existing files if any conflicts arise.

```php
php artisan vendor:publish --tag=tabs --force
```

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

### Form with Input Components

Source: https://laravel-luvi.com/docs/components/input

Provides a comprehensive example of a form structure using custom components, including shorthand and longhand input definitions, labels, descriptions, and messages.

```html
<x-form class="w-2/3 [&_input]:max-w-full">
  <!-- shorthand -->
  <x-form.input
    name="username"
    label="Username (Shorthand)"
    placeholder="shadcn"
    description-trailing="This is your public display name."
  />

  <!-- longhand if you need more control-->
  <x-form.item>
    <x-form.label>Username (Longhand)</x-form.label>
    <x-input
      x-form:control
      name="username"
      placeholder="shadcn"
    />
    <x-form.description>
      This is your public display name.
    </x-form.description>
    <x-form.messagename="username" />
  </x-form.item>

  <x-button type="submit">Submit</x-button>
</x-form>
```

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

### Sheet Component Example

Source: https://laravel-luvi.com/docs/components/sheet

Demonstrates the usage of the Sheet component, including its trigger, content, header, title, and description. This component is used for modal-like interfaces.

```html
<x-sheet>
  <x-sheet.trigger>
    <x-button variant="outline">Open</x-button>
  </x-sheet.trigger>
  <x-sheet.content class="w-[400px] sm:w-[540px]">
    <x-sheet.header>
      <x-sheet.title>are you absolutely sure?</x-sheet.title>
      <x-sheet.description>
        this action cannot be undone. this will permanently delete your account
        and remove your data from our servers.
      </x-sheet.description>
    </x-sheet.header>
  </x-sheet.content>
</x-sheet>
```

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

### Livewire Profile Form Example

Source: https://laravel-luvi.com/docs/components/form

A Livewire component demonstrating a profile form with fields for display name, email selection, bio, and multiple URLs. It utilizes Livewire's validation and dynamic component rendering.

```php
<?php

namespace App\Livewire\DemoForms;

use Livewire\Attributes\Layout;
use Livewire\Attributes\Validate;
use Livewire\Component;

#[Layout('components.layouts.examples-forms')]
class ProfileForm extends Component
{
    #[Validate('required|min:3')]
    public $notification = '';

    public $bio = 'I own a computer.';

    public $urls = [
        ['value'=>'https://shadcn.com'],
        ['value'=>'http://twitter.com/shadcn'],
    ];

    public function append()
    {
        $this->urls[]=['value'=>''];
    }

    public function render()
    {
        return <<<'HTML'
            <div>
                <x-form>
                    <x-form.input
                        wire:model="display"
                        placeholder="shadcn"
                        description-trailing="This is your public display name. It can be your real name or a pseudonym. You can only change this once every 30 days."
                    />

                    <x-form.item>
                        <x-form.label>Email</x-form.label>
                        <x-select x-form:control>
                            <option value="Select a verified email to display" disabled>
                                Select a verified email to display
                            </option>
                            <option value="m@example.com">m@example.com</option>
                            <option value="m@google.com">m@google.com</option>
                            <option value="m@support.com">m@support.com</option>
                        </x-select>
                        <x-form.description>
                            You can manage verified email addresses in your
                            <x-link href="/examples/forms">email settings</x-link>.
                        </x-form.description>
                        <x-form.message />
                    </x-form.item>

                    <x-form.item>
                        <x-form.label>Bio</x-form.label>
                        <x-textarea
                            wire:model="bio"
                            x-form:control
                            placeholder="Tell us a little bit about yourself"
                            class="resize-none"
                        />
                        <x-form.description>
                            You can <span>@mention</span> other users and organizations to
                            link to them.
                        </x-form.description>
                        <x-form.message />
                    </x-form.item>

                    <div>
                        @foreach($urls as $index => $url)
                            <x-form.item>
                                <x-form.label
                                    @class([
                                        "sr-only" => $index !== 0,
                                    ])
                                >
                                    URLs
                                </x-form.label>
                                <x-form.description @class([
                                    "sr-only" => $index !== 0,
                                ])>
                                    Add links to your website, blog, or social media profiles.
                                </x-form.description>
                                <x-input x-form:control :value="$url['value']"/>
                                <x-form.message />
                            </x-form.item>
                        @endforeach

                        <x-button
                            variant="outline"
                            size="sm"
                            class="mt-2"
                            wire:click="append"
                        >
                            Add URL
                        </x-button>
                    </div>

                    <x-button type="submit">Update profile</x-button>
                </x-form>
            </div>
        HTML;
    }
}
```

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

### Luvi UI Components Overview

Source: https://laravel-luvi.com/docs/components/sheet

This section lists the available UI components in Luvi for Laravel. Each component has a dedicated documentation page linked for detailed usage instructions.

```html
<!-- Components List -->
* [ Accordion ](https://laravel-luvi.com/docs/components/accordion)
* [ Alert ](https://laravel-luvi.com/docs/components/alert)
* [ Avatar ](https://laravel-luvi.com/docs/components/avatar)
* [ Badge ](https://laravel-luvi.com/docs/components/badge)
* [ Breadcrumb ](https://laravel-luvi.com/docs/components/breadcrumb)
* [ Button ](https://laravel-luvi.com/docs/components/button)
* [ Card ](https://laravel-luvi.com/docs/components/card)
* [ Checkbox ](https://laravel-luvi.com/docs/components/checkbox)
* [ Dialog ](https://laravel-luvi.com/docs/components/dialog)
* [ Dropdown Menu ](https://laravel-luvi.com/docs/components/dropdown-menu)
* [ Form ](https://laravel-luvi.com/docs/components/form)
* [ Hover Card ](https://laravel-luvi.com/docs/components/hover-card)
* [ Input ](https://laravel-luvi.com/docs/components/input)
* [ Label ](https://laravel-luvi.com/docs/components/label)
* [ Link ](https://laravel-luvi.com/docs/components/link)
* [ Popover ](https://laravel-luvi.com/docs/components/popover)
* [ Radio Group ](https://laravel-luvi.com/docs/components/radio-group)
* [ Select ](https://laravel-luvi.com/docs/components/select)
* [ Separator ](https://laravel-luvi.com/docs/components/separator)
* [ Sheet ](https://laravel-luvi.com/docs/components/sheet)
* [ Switch ](https://laravel-luvi.com/docs/components/switch)
* [ Tabs ](https://laravel-luvi.com/docs/components/tabs)
* [ Textarea ](https://laravel-luvi.com/docs/components/textarea)
* [ Tooltip ](https://laravel-luvi.com/docs/components/tooltip)
```

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

### Stacked Sheets Example

Source: https://laravel-luvi.com/docs/components/sheet

Illustrates how to implement nested or stacked Sheet components. This example shows a parent sheet with a trigger to open a child sheet, both containing confirmation messages.

```blade
<x-sheet>
  <x-sheet.trigger>
    <x-button variant="outline">Open</x-button>
  </x-sheet.trigger>
  <x-sheet.content class="has-[[open]]:-translate-x-6 has-[[open]]:scale-[.97]">
    <x-sheet.header>
      <x-sheet.title>are you absolutely sure?</x-sheet.title>
      <x-sheet.description>
        this action cannot be undone. this will permanently delete your account
        and remove your data from our servers.
      </x-sheet.description>
    </x-sheet.header>
    <x-sheet>
      <x-sheet.trigger>
        <x-button variant="outline">Open second</x-button>
      </x-sheet.trigger>
      <x-sheet.content class="backdrop:bg-transparent shadow-2xl">
        <x-sheet.header>
          <x-sheet.title>are you absolutely sure?</x-sheet.title>
          <x-sheet.description>
            this action cannot be undone. this will permanently delete your account
            and remove your data from our servers.
          </x-sheet.description>
        </x-sheet.header>
      </x-sheet.content>
    </x-sheet>
  </x-sheet.content>
</x-sheet>
```

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

### Sheet Component Examples by Side

Source: https://laravel-luvi.com/docs/components/sheet

This example demonstrates how to use the Sheet component with different 'side' attributes (top, right, bottom, left) to control its positioning. It iterates through an array of sides to generate multiple instances of the sheet.

```php
@php
$sides =['top','right','bottom','left'];
@endphp

<div class="grid grid-cols-2 gap-2">
  @foreach ($sides as$side)
    <x-sheet>
      <x-sheet.trigger>
        <x-button variant="outline" class="w-full">
          {{$side }}
        </x-button>
      </x-sheet.trigger>
      <x-sheet.contentside="{{$side}}">
        <x-sheet.header>
          <x-sheet.title>Edit profile</x-sheet.title>
          <x-sheet.description>
            Make changes to your profile here. Click save when you're done.
          </x-sheet.description>
        </x-sheet.header>
        <x-sheet.main>
          <div class="grid gap-4 py-4">
            <div class="grid grid-cols-4 items-center gap-4">
              <x-label for="name" class="text-right">
                Name
              </x-label>
              <x-input id="name" value="pedro duarte" class="col-span-3" />
            </div>
            <div class="grid grid-cols-4 items-center gap-4">
              <x-label for="username" class="text-right">
                Username
              </x-label>
              <x-input id="username" value="@peduarte" class="col-span-3" />
            </div>
          </div>
        </x-sheet.main>
        <x-sheet.footer>
          <x-sheet.closetype="submit">
            Save changes
          </x-sheet.close>
        </x-sheet.footer>
      </x-sheet.content>
    </x-sheet>
  @endforeach
</div>
```

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

### Luvi UI Components Overview

Source: https://laravel-luvi.com/docs/components/dropdown-menu

This section lists the available UI components in Luvi for Laravel. Each component has a dedicated documentation page linked for detailed usage instructions.

```html
<!-- Components List -->
* [ Accordion ](https://laravel-luvi.com/docs/components/accordion)
* [ Alert ](https://laravel-luvi.com/docs/components/alert)
* [ Avatar ](https://laravel-luvi.com/docs/components/avatar)
* [ Badge ](https://laravel-luvi.com/docs/components/badge)
* [ Breadcrumb ](https://laravel-luvi.com/docs/components/breadcrumb)
* [ Button ](https://laravel-luvi.com/docs/components/button)
* [ Card ](https://laravel-luvi.com/docs/components/card)
* [ Checkbox ](https://laravel-luvi.com/docs/components/checkbox)
* [ Dialog ](https://laravel-luvi.com/docs/components/dialog)
* [ Dropdown Menu ](https://laravel-luvi.com/docs/components/dropdown-menu)
* [ Form ](https://laravel-luvi.com/docs/components/form)
* [ Hover Card ](https://laravel-luvi.com/docs/components/hover-card)
* [ Input ](https://laravel-luvi.com/docs/components/input)
* [ Label ](https://laravel-luvi.com/docs/components/label)
* [ Link ](https://laravel-luvi.com/docs/components/link)
* [ Popover ](https://laravel-luvi.com/docs/components/popover)
* [ Radio Group ](https://laravel-luvi.com/docs/components/radio-group)
* [ Select ](https://laravel-luvi.com/docs/components/select)
* [ Separator ](https://laravel-luvi.com/docs/components/separator)
* [ Sheet ](https://laravel-luvi.com/docs/components/sheet)
* [ Switch ](https://laravel-luvi.com/docs/components/switch)
* [ Tabs ](https://laravel-luvi.com/docs/components/tabs)
* [ Textarea ](https://laravel-luvi.com/docs/components/textarea)
* [ Tooltip ](https://laravel-luvi.com/docs/components/tooltip)
```

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

### Radio Group within a Form Example

Source: https://laravel-luvi.com/docs/components/radio-group

A comprehensive example demonstrating how to integrate the Radio Group component within a form for managing notification preferences. It showcases the use of x-form directives for binding the radio group to form data and includes labels, descriptions, and a submit button.

```html
<x-form class="w-2/3 space-y-6">
  <x-form.item class="space-y-3" name="notification">
    <x-form.label>Notify me about...</x-form.label>
    <x-radio-group x-form:control name="notification" class="space-y-1">
      <x-form.item class="flex items-center space-x-3 space-y-0">
        <x-radio-group.item x-form:control value="all" />
        <x-form.label class="font-normal">
          All new messages
        </x-form.label>
      </x-form.item>
      <x-form.item class="flex items-center space-x-3 space-y-0">
        <x-radio-group.item x-form:control value="mentions" />
        <x-form.label class="font-normal">
          Direct messages and mentions
        </x-form.label>
      </x-form.item>
      <x-form.item class="flex items-center space-x-3 space-y-0">
        <x-radio-group.item x-form:control value="none" />
        <x-form.label class="font-normal">Nothing</x-form.label>
      </x-form.item>
    </x-radio-group>
    <x-form.description> We will notify around the world in no time</x-form.description>
  </x-form.item>
  <x-button type="submit">Submit</x-button>
</x-form>
```

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

### Luvi UI Components Overview

Source: https://laravel-luvi.com/docs/components/form

This section lists the available UI components in Luvi for Laravel. Each component has a dedicated documentation page linked for detailed usage instructions.

```html
<!-- Components List -->
* [ Accordion ](https://laravel-luvi.com/docs/components/accordion)
* [ Alert ](https://laravel-luvi.com/docs/components/alert)
* [ Avatar ](https://laravel-luvi.com/docs/components/avatar)
* [ Badge ](https://laravel-luvi.com/docs/components/badge)
* [ Breadcrumb ](https://laravel-luvi.com/docs/components/breadcrumb)
* [ Button ](https://laravel-luvi.com/docs/components/button)
* [ Card ](https://laravel-luvi.com/docs/components/card)
* [ Checkbox ](https://laravel-luvi.com/docs/components/checkbox)
* [ Dialog ](https://laravel-luvi.com/docs/components/dialog)
* [ Dropdown Menu ](https://laravel-luvi.com/docs/components/dropdown-menu)
* [ Form ](https://laravel-luvi.com/docs/components/form)
* [ Hover Card ](https://laravel-luvi.com/docs/components/hover-card)
* [ Input ](https://laravel-luvi.com/docs/components/input)
* [ Label ](https://laravel-luvi.com/docs/components/label)
* [ Link ](https://laravel-luvi.com/docs/components/link)
* [ Popover ](https://laravel-luvi.com/docs/components/popover)
* [ Radio Group ](https://laravel-luvi.com/docs/components/radio-group)
* [ Select ](https://laravel-luvi.com/docs/components/select)
* [ Separator ](https://laravel-luvi.com/docs/components/separator)
* [ Sheet ](https://laravel-luvi.com/docs/components/sheet)
* [ Switch ](https://laravel-luvi.com/docs/components/switch)
* [ Tabs ](https://laravel-luvi.com/docs/components/tabs)
* [ Textarea ](https://laravel-luvi.com/docs/components/textarea)
* [ Tooltip ](https://laravel-luvi.com/docs/components/tooltip)
```

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

### Collapsed Breadcrumb Example

Source: https://laravel-luvi.com/docs/components/breadcrumb

Illustrates the implementation of a collapsed Breadcrumb, using an ellipsis for intermediate items.

```html
<x-breadcrumb>
  <x-breadcrumb.list>
    <x-breadcrumb.item>
      <x-breadcrumb.link href="/">
        Home
      </x-breadcrumb.link>
    </x-breadcrumb.item>
    <x-breadcrumb.separator />
    <x-breadcrumb.item>
      <x-breadcrumb.ellipsis />
    </x-breadcrumb.item>
    <x-breadcrumb.separator />
    <x-breadcrumb.item>
      <x-breadcrumb.link href="/docs/components/accordion">
        Components
      </x-breadcrumb.link>
    </x-breadcrumb.item>
    <x-breadcrumb.separator />
    <x-breadcrumb.item>
      <x-breadcrumb.page>Breadcrumb</x-breadcrumb.page>
    </x-breadcrumb.item>
  </x-breadcrumb.list>
</x-breadcrumb>
```

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

### Luvi UI Components Overview

Source: https://laravel-luvi.com/docs/components/radio-group

This section lists the available UI components in Luvi for Laravel. Each component has a dedicated documentation page linked for detailed usage instructions.

```html
<!-- Components List -->
* [ Accordion ](https://laravel-luvi.com/docs/components/accordion)
* [ Alert ](https://laravel-luvi.com/docs/components/alert)
* [ Avatar ](https://laravel-luvi.com/docs/components/avatar)
* [ Badge ](https://laravel-luvi.com/docs/components/badge)
* [ Breadcrumb ](https://laravel-luvi.com/docs/components/breadcrumb)
* [ Button ](https://laravel-luvi.com/docs/components/button)
* [ Card ](https://laravel-luvi.com/docs/components/card)
* [ Checkbox ](https://laravel-luvi.com/docs/components/checkbox)
* [ Dialog ](https://laravel-luvi.com/docs/components/dialog)
* [ Dropdown Menu ](https://laravel-luvi.com/docs/components/dropdown-menu)
* [ Form ](https://laravel-luvi.com/docs/components/form)
* [ Hover Card ](https://laravel-luvi.com/docs/components/hover-card)
* [ Input ](https://laravel-luvi.com/docs/components/input)
* [ Label ](https://laravel-luvi.com/docs/components/label)
* [ Link ](https://laravel-luvi.com/docs/components/link)
* [ Popover ](https://laravel-luvi.com/docs/components/popover)
* [ Radio Group ](https://laravel-luvi.com/docs/components/radio-group)
* [ Select ](https://laravel-luvi.com/docs/components/select)
* [ Separator ](https://laravel-luvi.com/docs/components/separator)
* [ Sheet ](https://laravel-luvi.com/docs/components/sheet)
* [ Switch ](https://laravel-luvi.com/docs/components/switch)
* [ Tabs ](https://laravel-luvi.com/docs/components/tabs)
* [ Textarea ](https://laravel-luvi.com/docs/components/textarea)
* [ Tooltip ](https://laravel-luvi.com/docs/components/tooltip)
```

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

### Initialize Alpine.js with Plugins and Modules

Source: https://laravel-luvi.com/docs/installation

Configures Alpine.js to use anchor and collapse plugins, and loads custom JavaScript modules from the plugins directory. This snippet is for projects using Livewire.

```javascript
import collapse from"@alpinejs/collapse";

import anchor from"@alpinejs/anchor";

document.addEventListener(

"alpine:init",

()=>{

constmodules=import.meta.glob("./plugins/**/*.js",{ eager:true});

for (constpathinmodules) {

window.Alpine.plugin(modules[path].default);

}

window.Alpine.plugin(collapse);

window.Alpine.plugin(anchor);

},

{once:true},

);
```

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

### Basic Accordion Usage

Source: https://laravel-luvi.com/docs/components/accordion

Example of using the Accordion component with a single item, demonstrating its basic structure and accessibility feature.

```html
<x-accordion type="single" collapsible>
  <x-accordion.item value="item-1">
    <x-accordion.trigger>Is it accessible?</x-accordion.trigger>
    <x-accordion.content>
        Yes. It adheres to the WAI-ARIA design pattern.
    </x-accordion.content>
  </x-accordion.item>
</x-accordion>
```

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

### Basic Select Component

Source: https://laravel-luvi.com/docs/components/select

Demonstrates the basic structure of the x-select component with options for theme selection.

```blade
<x-selectclass="w-[180px]">
    <optionvalue="Theme"selecteddisabled>
        Theme
    </option>
    <optionvalue="light">Light</option>
    <optionvalue="dark">Dark</option>
    <optionvalue="system">System</option>
</x-select>
```

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

### Input Component Usage

Source: https://laravel-luvi.com/docs/components/input

Demonstrates the basic usage of the Input component in Laravel Blade.

```html
<x-input
    type="email"
    placeholder="Email"
/>
```

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

### Switch Component Usage

Source: https://laravel-luvi.com/docs/components/switch

Demonstrates how to use the Switch component in Laravel Blade. It includes a label for accessibility and an example of airplane mode.

```html
<div class="flex items-center space-x-2">
  <x-switch id="airplane-mode" />
  <x-label for="airplane-mode">Airplane Mode</x-label>
</div>
```

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

### Button with Icon

Source: https://laravel-luvi.com/docs/components/button

Combines text with an icon, placing the icon before the text. This example uses a mail open icon for a login button.

```html
<x-button>
<x-lucide-mail-openclass="mr-2 size-4" /> Login with Email
</x-button>
```

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

### Dialog Component

Source: https://laravel-luvi.com/docs/components/dialog

Documentation for the Dialog component in Luvi UI. It explains the component's functionality, browser compatibility issues related to CSS features like @starting-style and transition-behavior: allow-discrete, and provides a preview and code example.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dialog Example</title>
    <style>
        /* Basic styling for demonstration */
        .dialog-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .dialog {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>

<button onclick="openDialog()">Open Dialog</button>

<div id="dialogOverlay" class="dialog-overlay" style="display: none;">
    <div class="dialog">
        <h2>Edit Profile</h2>
        <p>This is the content of the dialog. You can put forms or other elements here.</p>
        <button onclick="closeDialog()">Close</button>
    </div>
</div>

<script>
    function openDialog() {
        document.getElementById('dialogOverlay').style.display = 'flex';
    }

    function closeDialog() {
        document.getElementById('dialogOverlay').style.display = 'none';
    }
</script>

</body>
</html>
```

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

### Vite Configuration for Luvi UI

Source: https://laravel-luvi.com/docs/installation

Configures Vite to include `app.css`, `luvi-ui.css`, and `app.js` for bundling. This is essential for Luvi UI to function correctly.

```javascript
plugins: [


laravel({

input: [

"resources/css/app.css",

"resources/css/luvi-ui.css",

"resources/js/app.js",

        ],

refresh:true,

}),

],

```