WireUI

https://v1.wireui.dev/docs/
Admin
WireUI is a library of pre-built components and resources for Laravel and Livewire applications,...
Tokens:50,360
Snippets:289
Trust Score:6.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### WireUI Installation and Setup

Source: https://v1.wireui.dev/docs/time-picker

Guides users through the process of installing WireUI, including CSS utilities and basic setup for using the components.

```HTML
<link href="/path/to/wireui.css" rel="stylesheet">
<!-- Or include via CDN -->
<script src="https://cdn.jsdelivr.net/npm/@wireui/wireui"></script>
```

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

### WireUI Installation and Setup

Source: https://v1.wireui.dev/docs/inputs

Guides users through the process of installing WireUI, including CSS utilities and basic setup for using the components.

```html
<link href="https://v1.wireui.dev/docs/css-utilities" rel="stylesheet">
```

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

### WireUI Installation and Setup

Source: https://v1.wireui.dev/docs/radio

Instructions for installing WireUI and setting up CSS utilities.

```APIDOC
Getting Started:
  Installation:
    Description: Steps to install the WireUI package.
    Link: https://v1.wireui.dev/docs/get-started
  CSS Utilities:
    Description: Explanation of available CSS utility classes.
    Link: https://v1.wireui.dev/docs/css-utilities
  Troubleshooting:
    Description: Common issues and their solutions.
    Link: https://v1.wireui.dev/docs/troubleshooting
```

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

### Publish WireUI Configuration and Resources

Source: https://v1.wireui.dev/docs/get-started

Publishes WireUI's configuration files, resources, and language files for customization.

```Shell
php artisan vendor:publish --tag='wireui.config'
php artisan vendor:publish --tag='wireui.resources'
php artisan vendor:publish --tag='wireui.lang'
```

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

### WireUI Installation Guide

Source: https://v1.wireui.dev/docs/cards

Provides instructions on how to install WireUI, a set of Livewire components and utilities. This typically involves using Composer for integration into a Laravel project.

```html
[ Installation ](https://v1.wireui.dev/docs/get-started)
```

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

### Install WireUI Package

Source: https://v1.wireui.dev/docs/get-started

Installs the WireUI package into your Laravel project using Composer.

```Shell
composer require wireui/wireui
```

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

### Configure WireUI with Tailwind CSS

Source: https://v1.wireui.dev/docs/get-started

Configures your Tailwind CSS setup to include WireUI's styles and resources by extending the configuration with WireUI's presets and content paths.

```JavaScript
module.exports={
  presets: [
require('./vendor/wireui/wireui/tailwind.config.js')
    ],
  content: [
'./vendor/wireui/wireui/resources/**/*.blade.php',
'./vendor/wireui/wireui/ts/**/*.ts',
'./vendor/wireui/wireui/src/View/**/*.php'
    ],
}
```

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

### WireUI Troubleshooting

Source: https://v1.wireui.dev/docs/troubleshooting

A guide to common issues encountered while using WireUI, including setup problems and potential solutions.

```html
<a href="https://v1.wireui.dev/docs/troubleshooting">Troubleshooting</a>
<a href="https://v1.wireui.dev/docs/troubleshooting#requirements">Requirements</a>
<a href="https://v1.wireui.dev/docs/troubleshooting#tailwind-forms">Tailwind-forms</a>
```

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

### WireUI Installation Guide

Source: https://v1.wireui.dev/docs/troubleshooting

Instructions for installing WireUI, a Laravel package for building interfaces with Blade components. This typically involves using Composer.

```html
<a href="https://v1.wireui.dev/docs/get-started">Installation</a>
```

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

### Currency Input Examples

Source: https://v1.wireui.dev/docs/currency-input

Provides various examples of the WireUI currency input, including one with no decimals, a default setup, and one with a custom prefix and formatting.

```blade
<x-inputs.currency
    label="Currency"
    placeholder="Currency"
    icon="currency-dollar"
    thousands="."
    decimal=","
    precision="4"
    wire:model="currency"
/>
<x-inputs.currency label="Currency no Decimals" precision="0" wire:model="currency" />
<x-inputs.currency label="Currency" wire:model="currency" />
<x-inputs.currency
    label="Currency"
    prefix="R$"
    thousands="."
    decimal=","
    wire:model="currency"
/>
```

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

### WireUI Installation

Source: https://v1.wireui.dev/docs/datetime-picker

Instructions for installing WireUI, a set of Livewire components and utilities.

```php
// Example installation command (actual command not provided in text)
// composer require wireui/wireui
```

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

### Install WireUI

Source: https://v1.wireui.dev/docs/contributing

This snippet shows the command to create a new Laravel project and the command to copy the WireUI into the project root. It also mentions the installation of Livewire and Tailwind CSS.

```bash
composer create-project laravel/laravel wireui
```

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

### WireUI Contribution Guide

Source: https://v1.wireui.dev/docs/troubleshooting

Information for developers interested in contributing to the WireUI project.

```html
<a href="https://v1.wireui.dev/docs/contributing">Contribution Guide</a>
```

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

### WireUI Button - Style Examples

Source: https://v1.wireui.dev/docs/buttons

Examples of how to set the style variants for the WireUI button component.

```javascript
JSON.parse(atob('eyJsYWJlbCI6ImRlZmF1bHQiLCJ2YWx1ZSI6ImRlZmF1bHQifQ=='))
JSON.parse(atob('eyJsYWJlbCI6InByaW1hcnkiLCJ2YWx1ZSI6InByaW1hcnkifQ=='))
JSON.parse(atob('eyJsYWJlbCI6InNlY29uZGFyeSIsInZhbHVlIjoic2Vjb25kYXJ5In0='))
JSON.parse(atob('eyJsYWJlbCI6InBvc2l0aXZlIiwidmFsdWUiOiJwb3NpdGl2ZSJ9'))
JSON.parse(atob('eyJsYWJlbCI6Im5lZ2F0aXZlIiwidmFsdWUiOiJuZWdhdGl2ZSJ9'))
JSON.parse(atob('eyJsYWJlbCI6Indhcm5pbmciLCJ2YWx1ZSI6Indhcm5pbmcifQ=='))
JSON.parse(atob('eyJsYWJlbCI6ImluZm8iLCJ2YWx1ZSI6ImluZm8ifQ=='))
JSON.parse(atob('eyJsYWJlbCI6ImRhcmsiLCJ2YWx1ZSI6ImRhcmsifQ=='))
JSON.parse(atob('eyJsYWJlbCI6IndoaXRlIiwidmFsdWUiOiJ3aGl0ZSJ9'))
JSON.parse(atob('eyJsYWJlbCI6ImJsYWNrIiwidmFsdWUiOiJibGFjayJ9'))
JSON.parse(atob('eyJsYWJlbCI6InNsYXRlIiwidmFsdWUiOiJzbGF0ZSJ9'))
JSON.parse(atob('eyJsYWJlbCI6ImdyYXkiLCJ2YWx1ZSI6ImdyYXkifQ=='))
JSON.parse(atob('eyJsYWJlbCI6InppbmMiLCJ2YWx1ZSI6InppbmMifQ=='))
JSON.parse(atob('eyJsYWJlbCI6Im5ldXRyYWwiLCJ2YWx1ZSI6Im5ldXRyYWwifQ=='))
JSON.parse(atob('eyJsYWJlbCI6InN0b25lIiwidmFsdWUiOiJzdG9uZSJ9'))
JSON.parse(atob('eyJsYWJlbCI6InJlZCIsInZhbHVlIjoicmVkIn0='))
JSON.parse(atob('eyJsYWJlbCI6Im9yYW5nZSIsInZhbHVlIjoib3JhbmdlIn0='))
JSON.parse(atob('eyJsYWJlbCI6ImFtYmVyIiwidmFsdWUiOiJhbWJlciJ9'))
JSON.parse(atob('eyJsYWJlbCI6ImxpbWUiLCJ2YWx1ZSI6ImxpbWUifQ=='))
JSON.parse(atob('eyJsYWJlbCI6ImdyZWVuIiwidmFsdWUiOiJncmVlbiJ9'))
JSON.parse(atob('eyJsYWJlbCI6ImVtZXJhbGQiLCJ2YWx1ZSI6ImVtZXJhbGQifQ=='))
JSON.parse(atob('eyJsYWJlbCI6InRlYWwiLCJ2YWx1ZSI6InRlYWwifQ=='))
JSON.parse(atob('eyJsYWJlbCI6ImN5YW4iLCJ2YWx1ZSI6ImN5YW4ifQ=='))
JSON.parse(atob('eyJsYWJlbCI6InNreSIsInZhbHVlIjoic2t5In0='))
JSON.parse(atob('eyJsYWJlbCI6ImJsdWUiLCJ2YWx1ZSI6ImJsdWUifQ=='))
JSON.parse(atob('eyJsYWJlbCI6IndpZ2h0IiwidmFsdWUiOiJ3aWdodCJ9'))
JSON.parse(atob('eyJsYWJlbCI6ImluZGlnbyIsInZhbHVlIjoiaW5kaWdvIn0='))
JSON.parse(atob('eyJsYWJlbCI6InZpb2xldCIsInZhbHVlIjoidmlvbGV0In0='))
```

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

### WireUI Button - Label Examples

Source: https://v1.wireui.dev/docs/buttons

Examples of how to set the label for the WireUI button component.

```javascript
JSON.parse(atob('eyJsYWJlbCI6ImRlZmF1bHQiLCJ2YWx1ZSI6ImRlZmF1bHQifQ=='))
JSON.parse(atob('eyJsYWJlbCI6Im91dGxpbmUiLCJ2YWx1ZSI6Im91dGxpbmUifQ=='))
JSON.parse(atob('eyJsYWJlbCI6ImZsYXQiLCJ2YWx1ZSI6ImZsYXQifQ=='))
```

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

### WireUI Contribution Guide

Source: https://v1.wireui.dev/docs/cards

Information for developers interested in contributing to the WireUI project, outlining guidelines and processes.

```html
[ Contribution Guide ](https://v1.wireui.dev/docs/contributing)
```

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

### WireUI Customization: Colors and Components

Source: https://v1.wireui.dev/docs/troubleshooting

Guides on customizing WireUI's color palettes and individual component styles.

```html
<a href="https://v1.wireui.dev/docs/colors">Colors</a>
<a href="https://v1.wireui.dev/docs/customization">Components</a>
```

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

### WireUI Livewire Integration

Source: https://v1.wireui.dev/docs/inputs

Information on integrating WireUI with Livewire, including usage examples, maskable inputs, currency input, and date/time pickers.

```html
<a href="https://v1.wireui.dev/docs/livewire-usage">Usage</a>
<a href="https://v1.wireui.dev/docs/maskable-inputs">Maskable Inputs</a>
<a href="https://v1.wireui.dev/docs/currency-input">Currency Input</a>
<a href="https://v1.wireui.dev/docs/datetime-picker">Datetime Picker</a>
<a href="https://v1.wireui.dev/docs/time-picker">Time Picker</a>
<a href="https://v1.wireui.dev/docs/phone-input">Phone Input</a>
```

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

### WireUI Cards and Buttons

Source: https://v1.wireui.dev/docs/troubleshooting

Guides for using WireUI's Card and Button components for structuring content and creating interactive elements.

```html
<a href="https://v1.wireui.dev/docs/cards">Cards</a>
<a href="https://v1.wireui.dev/docs/buttons">Buttons</a>
```

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

### WireUI UI Components - Icons

Source: https://v1.wireui.dev/docs/cards

Guide to using the Icon component, likely integrating with icon libraries like Heroicons.

```html
[ Icons ](https://v1.wireui.dev/docs/heroicons)
```

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

### Include WireUI Scripts in Blade

Source: https://v1.wireui.dev/docs/get-started

Includes the necessary WireUI scripts in your Blade layout. Supports passing HTML attributes like 'nonce'.

```Blade
<wireui:scripts />
```

```Blade
@wireUiScripts
```

```Blade
@wireUiScripts(['nonce': 'csp-token'])
```

```Blade
@wireUiScripts(['nonce': 'csp-token', 'foo' => true])
```

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

### WireUI UI Components - Modal

Source: https://v1.wireui.dev/docs/cards

Guide to implementing and managing Modal dialogs using WireUI.

```html
[ Modal ](https://v1.wireui.dev/docs/modal)
```

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

### WireUI Table Integration with PowerGrid

Source: https://v1.wireui.dev/docs/css-utilities

Explains how to integrate WireUI with PowerGrid for creating dynamic and interactive tables. This includes setup and usage examples for displaying data efficiently.

```php
// Example Livewire component for PowerGrid
namespace App\Http\Livewire;

use Livewire\Component;
use WireUi\Traits\WithPagination;
use PowerComponents\LivewirePowerGrid\Traits\WithPowerGrid;

class UsersTable extends Component
{
    use WithPagination, WithPowerGrid;

    public function setUp(): bool
    {
        // Setup PowerGrid columns and filters
        return true;
    }

    public function datasource() 
    {
        // Return your data source (e.g., Eloquent model)
        return User::query();
    }

    public function render()
    {
        return view('livewire.users-table');
    }
}
```

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

### Publish WireUI Configuration

Source: https://v1.wireui.dev/docs/customization

This command publishes the WireUI configuration file to your project, allowing for customization of component aliases and settings.

```bash
php artisan vendor:publish --tag='wireui.config'
```

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

### WireUI Maskable Input Examples

Source: https://v1.wireui.dev/docs/maskable-inputs

Demonstrates various ways to use the WireUI maskable input component, including simple masks, multiple mask options, and masking arbitrary patterns.

```HTML
<x-inputs.maskable
label="Maskable Input"
mask="(###) ###-####"
placeholder="Phone number"
/>
```

```HTML
<x-inputs.maskable
label="Maskable Input"
mask="['(###) ###-####', '+# ### ###-####', '+## ## ####-####']"
placeholder="Phone number"
/>
```

```HTML
<x-inputs.maskable
label="Mask Anything"
mask="##.SS.A.a-##"
placeholder="12.aB.C.d-34"
/>
```

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

### HTML Dialog Component Setup

Source: https://v1.wireui.dev/docs/dialogs

Demonstrates how to include the WireUI dialog component in an HTML layout. It shows both the basic and a more customized version with z-index and alignment.

```html
<html>
<body>
<x-dialog />
        or
<x-dialogz-index="z-50"blur="md" align="center" />
        ...
</body>
</html>
```

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

### Require WireUI Package

Source: https://v1.wireui.dev/docs/contributing

This command installs the WireUI package into your project using Composer after the repository has been added to composer.json.

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

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

### WireUI Simple Modal Example

Source: https://v1.wireui.dev/docs/modal

Demonstrates a basic modal implementation using WireUI's x-modal component. It includes a title, content, and footer with action buttons. The modal is controlled by a defer model.

```blade
<x-modalwire:model.defer="simpleModal">
    <x-cardtitle="Consent Terms">
        <pclass="text-gray-600">
            Lorem Ipsum...
        </p>
        <x-slotname="footer">
            <divclass="flex justify-end gap-x-4">
                <x-buttonflatlabel="Cancel"x-on:click="close" />
                <x-buttonprimarylabel="I Agree" />
            </div>
        </x-slot>
    </x-card>
</x-modal>
```

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

### WireUI Customization

Source: https://v1.wireui.dev/docs/radio

Guides on customizing WireUI's appearance, including colors and component configurations.

```APIDOC
Customize:
  Colors:
    Description: How to customize the color palette.
    Link: https://v1.wireui.dev/docs/colors
  Components:
    Description: Customizing individual component styles and behavior.
    Link: https://v1.wireui.dev/docs/customization
  Contribution Guide:
    Description: Guidelines for contributing to WireUI development.
    Link: https://v1.wireui.dev/docs/contributing
```

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

### WireUI Button Component

Source: https://v1.wireui.dev/docs/buttons

Example of using the WireUI button component with a label.

```html
<x-buttonlabel="Button" />
```

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

### WireUI Component Customization Example

Source: https://v1.wireui.dev/docs/customization

This snippet shows how to customize WireUI components by modifying their class aliases, disabling them, or extending their functionality. It illustrates renaming an input component's alias and extending a button component with a custom class.

```PHP
/*
 * Example of WireUI component customizations.
 */
'components' => [
    // Rename the component's alias
    'input' => [
        'class' => Components\Input::class,
        'alias' => 'form.input', // Rename this alias
    ],

    // Disable the component (commented out example)
    // 'textarea' => [
    //     'class' => Components\Textarea::class,
    //     'alias' => 'textarea',
    // ],

    // Extends the component
    'button' => [
        'class' => App\Views\Components\MyButton::class,
        'alias' => 'button',
    ],
]
```

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

### WireUI Livewire Input Masks

Source: https://v1.wireui.dev/docs/troubleshooting

Guides for using maskable inputs, currency input, datetime picker, time picker, and phone input with WireUI and Livewire.

```html
<a href="https://v1.wireui.dev/docs/maskable-inputs">Maskable Inputs</a>
<a href="https://v1.wireui.dev/docs/currency-input">Currency Input</a>
<a href="https://v1.wireui.dev/docs/datetime-picker">Datetime Picker</a>
<a href="https://v1.wireui.dev/docs/time-picker">Time Picker</a>
<a href="https://v1.wireui.dev/docs/phone-input">Phone Input</a>
```

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

### WireUI Livewire Usage

Source: https://v1.wireui.dev/docs/datetime-picker

Guide on integrating and using WireUI components within Livewire applications.

```php
// Example Livewire component using WireUI (actual code not provided)
use WireUiViewComponents\Button;

public function render()
{
    return view('livewire.counter', [
        'button' => new Button()
    ]);
}
```

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

### WireUI Number Input Component

Source: https://v1.wireui.dev/docs/inputs-number

Demonstrates the basic usage of the WireUI Number Input component, allowing users to input numerical quantities. The example shows how to label the input field.

```php
<x-inputs.number label="How many Burgers?" />
```

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

### WireUI Toggle Component

Source: https://v1.wireui.dev/docs/toggle

Documentation and examples for the WireUI Toggle component, covering simple toggles, toggles with labels, and different sizes.

```APIDOC
# Toggle Options
Toggle
Toggles allow the user to switch states, for instance: Enable or disable a feature.
[ Simple Toggle ](https://v1.wireui.dev/docs/toggle#simple-toggle)
Preview  Code 

# Toggle
## Simple Toggle
## Toggle With Label
## Toggle Sizes
```

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

### WireUI Currency Input Component

Source: https://v1.wireui.dev/docs/cards

Guide to using the Currency Input component, providing formatted input for monetary values.

```html
[ Currency Input ](https://v1.wireui.dev/docs/currency-input)
```

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

### WireUI UI Components: Icons, Badges, Avatar

Source: https://v1.wireui.dev/docs/troubleshooting

Guides for using WireUI's UI components like icons, badges, and avatars to enhance the visual presentation of interfaces.

```html
<a href="https://v1.wireui.dev/docs/heroicons">Icons</a>
<a href="https://v1.wireui.dev/docs/badges">Badges</a>
<a href="https://v1.wireui.dev/docs/avatar">Avatar</a>
```

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

### WireUI Customization - Colors

Source: https://v1.wireui.dev/docs/errors

Guide on how to customize the color palette used throughout WireUI components.

```php
// config/wireui.php
return [
    // ...
    'colors' => [
        'primary' => '#007bff',
        'secondary' => '#6c757d',
        // ... other colors
    ],
    // ...
];
```

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

### WireUI Radio Component

Source: https://v1.wireui.dev/docs/cards

Guide to using Radio button components within WireUI projects.

```html
[ Radio ](https://v1.wireui.dev/docs/radio)
```

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

### WireUI Livewire Usage

Source: https://v1.wireui.dev/docs/errors

Examples of integrating WireUI components within Livewire components, including handling form submissions and dynamic updates.

```php
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class MyForm extends Component
{
    public $name;

    public function save() {
        $this->validate(['name' => 'required']);
        // Save data
        $this->dispatchBrowserEvent('notify', ['type' => 'success', 'message' => 'Saved!']);
    }

    public function render()
    {
        return view('livewire.my-form');
    }
}
?>
```

```html
<div>
    <form wire:submit.prevent="save">
        <x-wireui-input label="Name" wire:model="name" />
        <x-wireui-button type="submit" label="Save" />
    </form>
</div>
```

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

### WireUI Card Components

Source: https://v1.wireui.dev/docs/cards

Documentation for the Card component, including its structure, title, action slots, and footer. Examples cover simple cards and customization options.

```html
[ Cards ](https://v1.wireui.dev/docs/cards)
```

```html
[ # Simple Card ](https://v1.wireui.dev/docs/cards#simple-card)
```

```html
[ # Card Title ](https://v1.wireui.dev/docs/cards#card-title)
```

```html
[ # Card Action Slot ](https://v1.wireui.dev/docs/cards#action-slot)
```

```html
[ # Card Footer ](https://v1.wireui.dev/docs/cards#footer-slot)
```

```html
[ # Card Options ](https://v1.wireui.dev/docs/cards#card-options)
```

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

### Simple Dropdown

Source: https://v1.wireui.dev/docs/dropdown

Demonstrates a basic dropdown with multiple items for settings, profile, and logout.

```html
<x-dropdown>
    <x-dropdown.itemlabel="Settings" />
    <x-dropdown.itemlabel="My Profile" />
    <x-dropdown.itemlabel="Logout" />
</x-dropdown>
```

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

### Basic WireUI Select with Static Options

Source: https://v1.wireui.dev/docs/select

Demonstrates a basic WireUI select component populated with a static list of options. Each option has a name, ID, and description. The component is configured to use 'name' for the label and 'id' for the value.

```html
<x-select
    label="Select Status"
    placeholder="Select one status"
    :options="[
        ['name' => 'Active',  'id' => 1, 'description' => 'The status is active'],
        ['name' => 'Pending', 'id' => 2, 'description' => 'The status is pending'],
        ['name' => 'Stuck',   'id' => 3, 'description' => 'The status is stuck'],
        ['name' => 'Done',    'id' => 4, 'description' => 'The status is done'],
    ]"
    option-label="name"
    option-value="id"
    wire:model.defer="model"
/>
```

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

### WireUI Input Variations

Source: https://v1.wireui.dev/docs/inputs

Demonstrates different variations of the input component, including simple inputs, inputs with hints, corner hints, and icons.

```html
<a href="https://v1.wireui.dev/docs/inputs#simple-input">Simple Input</a>
<a href="https://v1.wireui.dev/docs/inputs#input-hint">Input Hint</a>
<a href="https://v1.wireui.dev/docs/inputs#input-corner-hint">Input Corner Hint</a>
<a href="https://v1.wireui.dev/docs/inputs#input-icon">Input Icon</a>
<a href="https://v1.wireui.dev/docs/inputs#input-right-icon">Input Right Icon</a>
<a href="https://v1.wireui.dev/docs/inputs#two-icons-input">Two Icons Input</a>
```

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

### Basic Color Picker Usage

Source: https://v1.wireui.dev/docs/color-picker

Demonstrates the basic usage of the x-color-picker component with a label and placeholder.

```html
<x-color-pickerlabel="Select a Color"placeholder="Select the car color" />
```

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

### Using Tailwind Colors

Source: https://v1.wireui.dev/docs/color-picker

Provides a JavaScript example to generate and set colors based on your Tailwind CSS configuration for the color picker.

```javascript
import Alpine from'alpinejs'

// update with your Tailwind config path

import{theme}
from'@/tailwind.config.js'

// array of duplicated colors to exclude

const excludeColors = [

'primary',

'secondary',

'positive',

'negative',

'warning',

'info'

]

const makeColors =()=>{

consttailwindColors=theme.extend.colors??{}



constcolors=Object.entries(tailwindColors).flatMap(([name,values])=>{

if (typeofvalues==='string'||excludeColors.includes(name)) {

return []

}



returnObject.entries(values).map(([tonality,hex])=> ({

            name:`${name}-${tonality}`,

            value:hex

}))

})



colors.push({ name:'White', value:'#fff'})

colors.push({ name:'Black', value:'#000'})



returncolors

}



Alpine.store('wireui:color-picker').setColors(makeColors())
```

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

### WireUI Troubleshooting

Source: https://v1.wireui.dev/docs/cards

Provides solutions to common issues encountered when using WireUI.

```html
[ Troubleshooting ](https://v1.wireui.dev/docs/troubleshooting)
```

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

### WireUI Buttons

Source: https://v1.wireui.dev/docs/errors

Documentation for creating buttons with WireUI, covering different styles, sizes, and states.

```html
<x-wireui-button primary label="Primary Button" />
<x-wireui-button secondary label="Secondary Button" />
<x-wireui-button info label="Info Button" />
<x-wireui-button warning label="Warning Button" />
<x-wireui-button danger label="Danger Button" />
<x-wireui-button success label="Success Button" />
```

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

### WireUI Modals

Source: https://v1.wireui.dev/docs/errors

Documentation for implementing modal dialogs with WireUI, including basic usage and customization.

```html
<x-wireui-modal name="my-modal">
    <x-wireui-card title="Modal Title">
        Modal content goes here.
    </x-wireui-card>
</x-wireui-modal>

<x-wireui-button label="Open Modal" @click="$wireui.modal.open('my-modal')" />
```

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

### WireUI Input with Corner Hint

Source: https://v1.wireui.dev/docs/inputs

WireUI Input component featuring a corner hint, typically used for example text or short notes.

```blade
<x-input label="Name" placeholder="your name" corner-hint="Ex: John" />
```

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

### WireUI Select Component Documentation

Source: https://v1.wireui.dev/docs/select

Documentation for the WireUI Select component, detailing its various features and usage patterns. This includes async search, simple options, multi-select, custom options, slot options, and customizable options.

```APIDOC
# Select

## Async Search

## Simple Options

## Multi Select

## Custom Options

## Slot Options

## Customizable Option
```

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

### WireUI Notifications Component Setup

Source: https://v1.wireui.dev/docs/notifications

Demonstrates how to add the WireUI notifications component to your HTML layout, with options for customization like z-index and position.

```html
<html>
<body>
<x-notifications />

        or with attributes

<x-notificationsz-index="z-50" />
<x-notificationsposition="top-left" />
<x-notificationsposition="top-center" />
<x-notificationsposition="top-right" /> this is the default
<x-notificationsposition="bottom-left" />
<x-notificationsposition="bottom-center" />
<x-notificationsposition="bottom-right" />
</body>
</html>
```

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

### Default Currency Input

Source: https://v1.wireui.dev/docs/currency-input

Demonstrates the default configuration of the WireUI currency input component. It includes basic setup for currency masking.

```blade
<x-inputs.currency label="Currency" placeholder="Currency" wire:model="currency" />
```

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

### WireUI Customization

Source: https://v1.wireui.dev/docs/datetime-picker

Information on customizing WireUI, including colors and component configurations.

```php
// Example of customizing WireUI colors (actual config not provided)
// config/wireui.php -> colors
```

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

### WireUI UI Components - Dropdown

Source: https://v1.wireui.dev/docs/errors

Documentation for creating dropdown menus with WireUI, including basic structure and item configuration.

```html
<x-wireui-dropdown>
    <x-slot name="trigger">
        <x-wireui-button label="Dropdown" />
    </x-slot>

    <x-wireui-dropdown.item label="Item 1" link="#" />
    <x-wireui-dropdown.item label="Item 2" separator />
    <x-wireui-dropdown.item label="Item 3" disabled />
</x-wireui-dropdown>
```

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

### Clear View Cache

Source: https://v1.wireui.dev/docs/customization

After making changes to WireUI configurations or components, it's recommended to clear the view cache to ensure the updates are reflected.

```bash
php artisan view:clear
```

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

### Min & Max Dates

Source: https://v1.wireui.dev/docs/datetime-picker

Sets minimum and maximum date constraints for the Datetime Picker. This example restricts selections to a week before and after the current date, with specific times.

```html
<x-datetime-picker
    label="Appointment Date"
    placeholder="Appointment Date"
    wire:model="model"
    :min="now()->subDays(7)->hours(12)->minutes(30)"
    :max="now()->addDays(7)->hours(12)->minutes(30)"
/>
```

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

### Publish WireUI Configuration

Source: https://v1.wireui.dev/docs/heroicons

Command to publish the WireUI configuration file. This allows customization of default settings, including icon styles and other package behaviors.

```bash
php artisan vendor:publish --tag='wireui.config'
```

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

### WireUI Actions: Notifications and Dialogs

Source: https://v1.wireui.dev/docs/troubleshooting

Documentation on implementing notifications and dialogs using WireUI's action components.

```html
<a href="https://v1.wireui.dev/docs/notifications">Notifications</a>
<a href="https://v1.wireui.dev/docs/dialogs">Dialogs</a>
```

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

### WireUI Input Component

Source: https://v1.wireui.dev/docs/inputs

Demonstrates the basic usage of the WireUI Input component with a wire:model attribute for live updates, a label, and a placeholder.

```blade
<x-input wire:model="firstName" label="Name" placeholder="User's first name" />
```

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

### WireUI Customization - Components

Source: https://v1.wireui.dev/docs/errors

Information on how to customize the default configuration and appearance of WireUI components.

```php
// config/wireui.php
return [
    // ...
    'components' => [
        'button' => [
            'default' => 'primary',
            'variant' => 'solid',
        ],
        // ... other components
    ],
    // ...
];
```

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

### Custom Phone Input Component

Source: https://v1.wireui.dev/docs/phone-input

Provides an example of creating a custom input component by extending the WireUI BaseMaskable component and defining a custom input mask.

```PHP
<?php

namespace App\View\Components;

use WireUi\View\Components\Inputs\BaseMaskable;

class CustomMaskableInput extends BaseMaskable
{
    protected function getInputMask(): string
    {
        return "['(##) ####-####', '(##) #####-####']";
    }
}
```

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

### WireUi Custom Dialog Hook

Source: https://v1.wireui.dev/docs/hooks

This hook allows for custom dialog implementations. The provided example shows an empty hook, suggesting it's a placeholder for custom logic.

```javascript
Wireui.hook('dialog:custom:load',()=>{})
```

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

### WireUI Livewire Integration

Source: https://v1.wireui.dev/docs/radio

Documentation on integrating WireUI with Livewire for dynamic interfaces, including maskable inputs and pickers.

```APIDOC
Livewire Components:
  Usage:
    Description: General usage guidelines for Livewire components with WireUI.
    Link: https://v1.wireui.dev/docs/livewire-usage
  Maskable Inputs:
    Description: Input fields with masking capabilities.
    Link: https://v1.wireui.dev/docs/maskable-inputs
  Currency Input:
    Description: Input field formatted for currency.
    Link: https://v1.wireui.dev/docs/currency-input
  Datetime Picker:
    Description: Component for selecting date and time.
    Link: https://v1.wireui.dev/docs/datetime-picker
  Time Picker:
    Description: Component for selecting time.
    Link: https://v1.wireui.dev/docs/time-picker
  Phone Input:
    Description: Input field optimized for phone numbers.
    Link: https://v1.wireui.dev/docs/phone-input
```

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

### WireUI Datetime and Time Pickers

Source: https://v1.wireui.dev/docs/errors

Documentation for the Datetime Picker and Time Picker components, allowing users to select dates and times easily.

```html
<x-wireui-datetime-picker label="Event Date" placeholder="Select date and time" />
<x-wireui-time-picker label="Event Time" placeholder="Select time" />
```

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

### WireUI 24-Hour Time Picker

Source: https://v1.wireui.dev/docs/time-picker

Example of configuring the WireUI Time Picker for 24-hour format. The 'format' attribute is set to '24' for this purpose. It also uses '.defer' for model binding.

```blade
<x-time-picker
    label="24 Hours"
    placeholder="22:30"
    format="24"
    wire:model.defer="timePicker"
/>
```

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

### Customizing Async Data Request

Source: https://v1.wireui.dev/docs/select

Provides examples of how to customize the `asyncData` prop for the WireUI Select component. This includes specifying the HTTP method, adding query string parameters, and setting credentials.

```html
<x-select...:async-data="route('api.users.index', ['foo' => 'bar'])" />

OR

<x-select...:async-data="[
    'api' => route('api.users.index'),
    'method' => 'POST',
    'params' => ['ble' => 'baz'],
    'credentials' => 'include'
]" />
```

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

### WireUI Toggle Component

Source: https://v1.wireui.dev/docs/cards

Documentation for the Toggle switch component, explaining its usage and customization options.

```html
[ Toggle ](https://v1.wireui.dev/docs/toggle)
```

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

### Hide Scrollbar Example

Source: https://v1.wireui.dev/docs/css-utilities

Demonstrates how to hide the scrollbar of a horizontally scrollable div using the `.hide-scrollbar` CSS class provided by WireUI. This is useful for creating cleaner interfaces where native scrollbars are not desired.

```html
<div class="h-52 w-full overflow-x-auto p-2">
  <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-negative-500" style="width: 900px">
    <div class="absolute border-y-8 border-dashed border-white w-full h-8"></div>
  </div>
</div>

<div class="h-52 w-full hide-scrollbar overflow-x-auto p-2">
  <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-positive-500" style="width: 900px">
    <div class="absolute border-y-8 border-dotted border-white w-full h-8"></div>
  </div>
</div>
```

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

### WireUI Hooks Overview

Source: https://v1.wireui.dev/docs/hooks

WireUI Hooks provide a mechanism to execute actions at predefined moments within the WireUI framework. This includes triggering notifications when a component is ready or invoking Livewire actions upon WireUI initialization.

```markdown
# WireUi Hooks

WireUI Hooks is a simple way to perform actions at determinate moments. It is possible to fire a notification when a Notification component is ready, or call a Livewire action when WireUi is loaded. See available hooks bellow

[ Available Hooks ](https://v1.wireui.dev/docs/hooks#hooks)
```

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

### WireUI Custom Dialog (Blade)

Source: https://v1.wireui.dev/docs/dialogs

Example of creating a custom dialog using Blade components. This allows for a custom title, description, and embedding input fields or other HTML content within the dialog.

```html
<x-dialog id="custom" title="User information" description="Complete your profile, give your name">
    <x-input label="What's your name?" placeholder="your name bro" x-model="name" />
</x-dialog>
```

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

### WireUI Customization

Source: https://v1.wireui.dev/docs/livewire-usage

Guidance on customizing WireUI's appearance, including color palettes and component configurations, to match your project's design requirements.

```php
// config/wireui.php
return [
    'colors' => [
        'primary' => '#007bff',
        'secondary' => '#6c757d',
    ],
    'components' => [
        'button' => [
            'default' => 'bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded',
        ],
    ],
];

```

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

### WireUI Table and Livewire Integration

Source: https://v1.wireui.dev/docs/troubleshooting

Information on integrating WireUI with PowerGrid for tables and using WireUI with Livewire components.

```html
<a href="https://github.com/Power-Components/livewire-powergrid">PowerGrid</a>
<a href="https://v1.wireui.dev/docs/livewire-usage">Livewire Usage</a>
```

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

### WireUI Custom Maskable Input Component

Source: https://v1.wireui.dev/docs/maskable-inputs

Example of creating a custom maskable input component in PHP by extending the base WireUI maskable input class and defining custom input masks.

```PHP
<?php

namespace App\View\Components;

use WireUi\View\Components\Inputs\BaseMaskable;

class CustomMaskableInput extends BaseMaskable
{
    protected function getInputMask():string
    {
        return "['(##) ####-####', '(##) #####-####']";
    }
}
```

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

### WireUI Select with Option Descriptions

Source: https://v1.wireui.dev/docs/select

Shows how to display descriptions alongside options in the WireUI Select component. Each option can have a 'description' property, providing additional context to the user.

```html
<x-select
label="Order Status"
placeholder="Select one status"
:options="[
        ['description' => 'The status is active','label' => 'Active','value' => 1],
        ['description' => 'The status is pending','label' => 'Pending','value' => 2],
        ['description' => 'The status is stuck','label' => 'Stuck','value' => 3],
        ['description' => 'The status is done','label' => 'Done','value' => 4]
    ]"
wire:model.defer="model"
/>
```

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

### JavaScript Confirm Dialog API

Source: https://v1.wireui.dev/docs/dialogs

Provides an example of triggering a confirmation dialog using JavaScript, including defining the dialog's properties and actions for acceptance and rejection, along with the Livewire component ID.

```javascript
window.$wireui.confirmDialog({
    title:'Are you Sure?',
    description:'Save the information?',
    icon:'question',
    accept:{
        label:'Yes, save it',
        method:'save',
        params:'Saved'
    },
    reject:{
        label:'No, cancel',
        method:'cancel'
    }
}, livewireComponentId)
```

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

### WireUI Customization Options

Source: https://v1.wireui.dev/docs/time-picker

Explains how to customize WireUI's appearance, including color palettes and component-specific configurations.

```HTML
/* In your custom CSS file */
:root {
  --color-primary: #4CAF50;
}

/* Or configure via config file */
// config/wireui.php
'colors' => [
    'primary' => '#4CAF50',
]
```

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

### Soft Scrollbar Example

Source: https://v1.wireui.dev/docs/css-utilities

Illustrates how to apply a custom scrollbar appearance using the `.soft-scrollbar` CSS class from WireUI. This class modifies the default scrollbar to provide a softer visual experience, enhancing the user interface.

```html
<div class="h-52 w-full overflow-x-auto p-2">
  <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-negative-500" style="width: 900px">
    <div class="absolute border-y-8 border-dashed border-white w-full h-8"></div>
  </div>
</div>

<div class="h-52 w-full soft-scrollbar overflow-x-auto p-2">
  <div class="relative flex items-center h-44 shadow-lg border rounded-lg bg-positive-500" style="width: 900px">
    <div class="absolute border-y-8 border-dotted border-white w-full h-8"></div>
  </div>
</div>
```

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

### WireUI Livewire Component Usage

Source: https://v1.wireui.dev/docs/css-utilities

Demonstrates the usage of WireUI's Livewire components, covering various form inputs, actions, and UI elements. This section guides developers on integrating these components into their Livewire applications.

```php
// Example for Input Component
use WireUi\View\Components\Input;

return \Blade::component(Input::class, ['label' => 'Your Label', 'name' => 'your_name']);

// Example for Notifications
use WireUi\Notifications\Notification;

$this->dispatch(new Notification([ 
    'title' => 'Notification Title',
    'description' => 'Notification Description',
    'icon' => 'success'
]));
```

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

### WireUI UI Components - Icons

Source: https://v1.wireui.dev/docs/errors

Information on how to use Heroicons within WireUI components for consistent iconography.

```html
<x-wireui-icon name="heroicon-o-user" class="w-5 h-5" />
```

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

### WireUI AM/PM Time Picker

Source: https://v1.wireui.dev/docs/time-picker

Example of using the WireUI Time Picker component for AM/PM time selection. It's recommended to use '.defer' with datetime model bindings to avoid issues with empty time values.

```blade
<x-time-picker
    label="AM/PM"
    placeholder="12:00 AM"
    wire:model.defer="timePicker"
/>
```

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

### WireUI Select with Custom Option Labels

Source: https://v1.wireui.dev/docs/select

Illustrates how to use the WireUI select component with custom option labels. This example shows individual `<x-select.option>` tags, allowing for more granular control over each option's displayed text and value.

```html
<x-select
    label="Select Status"
    placeholder="Select one status"
    wire:model.defer="model"
>
    <x-select.option label="Pending" value="1" />
    <x-select.option label="In Progress" value="2" />
    <x-select.option label="Stuck" value="3" />
    <x-select.option label="Done" value="4" />
</x-select>
```
Tokens:
Raw