TallStackUI

https://tallstackui.com/docs
Admin
TallStackUI is a suite of 80+ ready-to-use components for building TALL Stack applications with...
Tokens:234,715
Snippets:2,205
Trust Score:5.8
Update:5 hours ago
Show doc for...
Tokens:
Raw
### Create new Laravel project with Starter Kit

Source: https://tallstackui.com/docs/starter-kit

Command to start a new Laravel project using the TallStackUI starter kit via the Laravel installer.

```bash
laravel new --using=tallstackui/starter-kit
```

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

### Example: Send a Banner

Source: https://tallstackui.com/docs/ui/banner

A complete example of dispatching a success banner with a close button and a 5-second leave delay.

```php
public function success(): void
{
    $this->banner()
        ->close()
        ->success('This is a banner dispatched through Livewire. Will disappear in 5 seconds.')
        ->leave(5)
        ->send();
}
```

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

### Install dependencies with composer install

Source: https://tallstackui.com/docs/contribution

Runs composer install to install the project dependencies after updating composer.json.

```bash
composer install
```

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

### Toast JavaScript API Example

Source: https://tallstackui.com/docs/interactions/toast

Complete example showing how to use the JavaScript API to trigger success, error, warning, info, and confirmation toasts. Includes usage of wireable() for Livewire component targeting and fluent methods like position and sole.

```html
<div>
    <x-button color="green" onclick="show()">Success</x-button>
    <x-button color="red" onclick="error()">Error</x-button>
    <x-button color="yellow" onclick="warning()">Warning</x-button>
    <x-button color="info" onclick="info()">Info</x-button>
    <x-button color="secondary" onclick="confirm()">Confirmation</x-button>
 
    <script>
        show = () => $tsui.interaction('toast')
            .success('Success', 'This is a success message.')
            .send();
 
        error = () => $tsui.interaction('toast')
            .error('Error', 'This is an error message.')
            .send();
 
        warning = () => $tsui.interaction('toast')
            .warning('Warning', 'This is a warning message.')
            .send();
 
        info = () => $tsui.interaction('toast')
            .info('Info', 'This is an info message.')
            .send();
 
        // Confirm/cancel that call a Livewire method need the
        // component id, passed through `wireable()`.
 
        const component = Livewire.find('your-component-id-goes-here').id; 
 
        confirm = () => $tsui.interaction('toast')
            .wireable(component) 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
 
        // Omit the id to target the first Livewire component on the page.
 
        confirm = () => $tsui.interaction('toast')
            .wireable() 
            .question('Warning', 'Are you sure?')
            .confirm('Confirm', 'confirmed', 'Confirmed Successfully')
            .cancel('Cancel', 'cancelled', 'Cancelled Successfully')
            .send();
 
        // The same fluent methods as PHP: position, sole, stacked.
        $tsui.interaction('toast')
            .position('top-left')
            .success('Success', 'This is a success message.')
            .send();
 
        $tsui.interaction('toast')
            .sole()
            .success('Success', 'This is a success message.')
            .send();
    </script>
</div>
```

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

### Example query string for outside Livewire table

Source: https://tallstackui.com/docs/ui/table

Example URL query string showing how search, quantity, sort, and page parameters are passed when using the table outside Livewire.

```text
?search=foo&quantity=25&sort[column]=name&sort[direction]=asc&page=2
```

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

### Example - Send Banner with Close and Leave

Source: https://tallstackui.com/docs/ui/banner

An example of sending a banner with a close button and a leave delay of 5 seconds.

```APIDOC
## Example - Send Banner with Close and Leave

### Description
Send a banner with a close button and a leave delay of 5 seconds.

### Usage
```php
public function success(): void
{
    $this->banner()
        ->close()
        ->success('This is a banner dispatched through Livewire. Will disappear in 5 seconds.')
        ->leave(5)
        ->send();
}
```
```

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

### Example input component usage

Source: https://tallstackui.com/docs/customization/soft

Shows how to use the input component with label and hint attributes, which populate the $data variable.

```blade
<x-input label="Name" hint="Your full name" />
```

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

### Prepare invokable class for customization

Source: https://tallstackui.com/docs/customization/soft

Shows the setup for using an invokable class for customization. This is the preparation step before defining the class itself.

```php
use TallStackUi\Facades\TallStackUi;
use App\TallStackUi\InputCustomization; 
 
class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
       TallStackUi::customize()
           ->form('input')
           ->block('input.base', new InputCustomization()); 
    }
}
```

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

### Install icon package with Composer

Source: https://tallstackui.com/docs/ui/icon

Install a custom icon package, e.g., owenvoke/blade-fontawesome, to use with TallStackUI.

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

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

### Label & Hint

Source: https://tallstackui.com/docs/form/select

Example of using the select.styled component with a label, custom placeholder, and hint text.

```APIDOC
## [COMPONENT] x-select.styled

### Description
Renders a styled select component with a label, placeholder, and hint text.

### Usage
```blade
<x-select.styled label="Select One Option"
                 placeholder="Custom Placeholder"
                 hint="You can choose 1, 2 or 3"
                 :options="[1,2,3]" />
```

### Parameters
- **label** (string) - Optional - The label displayed above the select.
- **placeholder** (string) - Optional - Placeholder text for the select input.
- **hint** (string) - Optional - Hint text displayed below the select.
- **options** (array) - Required - Array of options to display.
```

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

### Output Classes Example HTML

Source: https://tallstackui.com/docs/ui/editor

Example of the HTML output after enabling output-classes. Every element carries a class of its own, such as tsui-editor-numeric-list and tsui-editor-list-item.

```html
<ol class="tsui-editor-numeric-list">
    <li class="tsui-editor-list-item">…</li>
</ol>
```

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

### Direct mode upload examples

Source: https://tallstackui.com/docs/form/upload

Use the direct attribute to upload files immediately without the floating UI. The first example uploads a single image, the second allows multiple files. Direct mode cannot be combined with static.

```blade
<x-upload label="Banner" accept="image/*" direct />
 
<x-upload label="Photos" multiple direct />
```

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

### Example $data array structure

Source: https://tallstackui.com/docs/customization/soft

Displays the structure of the $data variable when using the input component, including all properties and their values.

```php
[
    "label" => "Name"
    "hint" => "Your full name"
    "icon" => null
    "clearable" => null
    "invalidate" => null
    "position" => "left"
    "prefix" => null
    "suffix" => null
    "componentName" => "input"
    "attributes" => Illuminate\View\ComponentAttributeBag {...}
    "blade" => Illuminate\View\InvokableComponentVariable {...}
    "customization" => Illuminate\View\InvokableComponentVariable {...}
    "ignoredParameterNames" => Illuminate\View\InvokableComponentVariable {...}
    "classes" => TallStackUi\View\Components\Form\Input::classes(?Closure $callback = null): [...]
    "slot" => Illuminate\View\ComponentSlot {...}
    "__laravel_slots" => [...]
    "livewire" => true
    "property" => null
    "error" => false
    "id" => null
]
```

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

### Output HTML with Custom Prefix

Source: https://tallstackui.com/docs/ui/editor

Example HTML output when using a string prefix like 'blog-'. The classes become blog-numeric-list and blog-list-item.

```html
<ol class="blog-numeric-list">
    <li class="blog-list-item">…</li>
</ol>
```

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

### Table paginator view path examples

Source: https://tallstackui.com/docs/upgrade-guide

Shows the old and new paginator view paths. The old 'components.table.paginators' no longer exists; use 'components.table.paginators.simple' or other variations.

```blade
<x-table :$headers :$rows paginate paginator="components.table.paginators" /> 
 
<x-table :$headers :$rows paginate paginator="components.table.paginators.simple" /> 
```

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

### Basic Step Usage

Source: https://tallstackui.com/docs/ui/step

Creates a step component with three items, starting at step 1 and using the navigate attribute for navigation.

```blade
<x-step selected="1" navigate>
    <x-step.items step="1">
        Step one...
    </x-step.items>
    <x-step.items step="2">
        Step two...
    </x-step.items>
    <x-step.items step="3">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>
```

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

### Full form example using TallStackUI components without Livewire

Source: https://tallstackui.com/docs/without-livewire

A complete HTML form using various TallStackUI components with name attributes and :value bindings. The form posts to a route and includes CSRF protection. This example demonstrates how to use components like input, password, textarea, number, pin, color, range, checkbox, radio, toggle, select.styled, tag, date, time, and button outside of Livewire.

```blade
<form action="{{ route('users.profile') }}" method="post">
    @csrf
 
    <x-input label="Name" name="input" :value="old('name')" />
 
    <x-password label="Password" name="pass" :value="old('pass')" />
 
    <x-textarea label="Description" name="textarea" :value="old('textarea')" />
 
    <x-number label="Quantity of Users" name="number" :value="old('number')" />
 
    <x-pin label="Security Code" length="4" name="pin" :value="old('pin')" />
 
    <x-color label="Favorite Color" name="color" :value="old('color')" />
 
    <x-range label="Minimum Quantity" name="range" :value="old('range')" />
 
    <x-checkbox label="Accept the Terms" name="checkbox" :value="old('checkbox')" />
 
    <x-radio label="Receive Notification" name="radio" :value="old('radio')" />
 
    <x-toggle label="Enable Notifications" name="toggle" :value="old('toggle')" />
 
    <x-select.styled :options="['TALL', 'LIVT']"
                     label="Select One Option"
                     name="select_options"
                     searchable
                     :value="old('select_options')" />
 
    <x-select.styled :request="route('api.users')"
                     select="label:name|value:id"
                     label="Search User Through API"
                     name="search_api"
                     :value="old('search_api')" />
 
    <x-tag label="Frameworks" name="frameworks" :value="['Laravel', 'Symfony', 'CodeIgniter']" />
 
    <x-date label="DoB" name="dob" value="2024-02-27" />
 
    <x-time label="Preferred Hour" name="hour" value="02:30 PM" />
 
    <x-button type="submit">
        Submit
    </x-button>
 
</form>
```

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

### Card footer alignment with between slot

Source: https://tallstackui.com/docs/ui/card

A Card example using the 'between' attribute on the footer slot to align buttons with justify-between. The comment lists accepted values: start, center, end, between, unwrapped.

```blade
<x-card>
    TallStackUI
    <x-slot:footer between>
        <x-button color="red">Delete</x-button>
        <x-button>Save</x-button>
    </x-slot:footer>
</x-card>
 
<!-- Accepted: start, center, end, between, unwrapped -->
```

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

### Controller parsing array values with json_decode

Source: https://tallstackui.com/docs/without-livewire

A controller method that intercepts the form request and uses json_decode to access array items from the 'frameworks', 'select_options', and 'vacation' fields. This is the second step of the workflow that starts with the form example.

```php
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class RegisterController extends Controller
{
    // ...
 
    public function store(Request $request)
    {
        $tagFrameworks = json_decode($request->get('frameworks')); 
 
        $selectOptions = json_decode($request->get('select_options')); 
 
        $vacationDates = json_decode($request->get('vacation')); 
 
        dd($tagFrameworks, $selectOptions, $vacationDates);
 
        // ...
    }
}
```

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

### Set up component prefix with php artisan tallstackui:setup-prefix

Source: https://tallstackui.com/docs/command

Use this command to configure the component prefix for TallStackUI components.

```bash
php artisan tallstackui:setup-prefix
```

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

### Install EnvBar via Composer

Source: https://tallstackui.com/docs/helpers/env-bar

Install the TallStackUI EnvBar package version 2.0 using Composer. After installation, EnvBar is automatically injected into your application.

```bash
composer require tallstackui/envbar:^2.0
```

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

### Live Wireable Example (wire:model.live)

Source: https://tallstackui.com/docs/ui/step

Binds the current step to a Livewire string property 'step' with live updates using wire:model.live. The selected step is displayed as 'Selected: 1'.

```blade
<!--  Livewire string property: $step - initial value: "1" -->
 
<x-step wire:model.live="step"
        helpers
        navigate-previous>
    <x-step.items step="1"
                  title="Starting"
                  description="Step One">
        Step one...
    </x-step.items>
    <x-step.items step="2"
                  title="Advancing"
                  description="Step Two">
        Step two...
    </x-step.items>
    <x-step.items step="3"
                  title="Finishing"
                  description="Step Three">
        Step three... <b>finished!</b>
    </x-step.items>
</x-step>
```

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

### Readonly and Disabled autocomplete examples

Source: https://tallstackui.com/docs/form/autocomplete

Shows the readonly and disabled states for the autocomplete component. The readonly example uses value="São Paulo" and readonly, while the disabled example uses disabled. Both include a list of items.

```blade
<x-autocomplete label="Readonly" value="São Paulo" readonly :items="[
    ['value' => 'São Paulo'],
    ['value' => 'Rio de Janeiro'],
]" />
```

```blade
<x-autocomplete label="Disabled" value="São Paulo" disabled :items="[
    ['value' => 'São Paulo'],
    ['value' => 'Rio de Janeiro'],
]" />
```

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

### Prepare files for static mode in Livewire mount method

Source: https://tallstackui.com/docs/form/upload

In the Livewire component's mount method, prepare and store existing files in an array property. The example maps files from the public storage directory to a structure with name, extension, size, path, and URL. The property must be an array for static usage.

```php
use Livewire\Component;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Facades\Storage;
use Symfony\Component\Finder\SplFileInfo;
 
class MyComponent extends Component
{
    // For static usage the property must be an array 
    public $photos = [];
 
    public function mount(): void
    {
        // We get all files and map the contents of the files
        // to ensure a necessary structure for the component.
        $this->photos = collect(File::allFiles(public_path('storage/images')))->map(fn (SplFileInfo $file) => [
            'name' => $file->getFilename(),
            'extension' => $file->getExtension(),
            'size' => $file->getSize(),
            'path' => $file->getPath(),
            'url' => Storage::url('images/'.$file->getFilename()),
        ])->toArray();
 
        // In this example we are using the images that exists
        // in the application server, but you can use any other
        // files for example, files that are stored in the S3 bucket.
    }
 
    // ...
}
```

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

### Label Alignment

Source: https://tallstackui.com/docs/form/radio

Shows how to align the label to the middle (default) or to the start using the 'start' attribute on the label slot.

```blade
<x-radio>
    <x-slot:label>
        Align on Middle
    </x-slot:label>
</x-radio>
 
<x-radio>
    <x-slot:label start>
        Align on Start
    </x-slot:label>
</x-radio>
```

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

### Basic Usage

Source: https://tallstackui.com/docs/ui/reaction

Renders the reaction component with default settings.

```APIDOC
## <x-reaction />

### Description
Renders the reaction component with default settings.

### Example
```html
<x-reaction />
```
```

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

### Checkbox Label Alignment

Source: https://tallstackui.com/docs/form/checkbox

Demonstrates aligning the label to the middle (default) or to the start using the 'start' attribute on the label slot.

```blade
<x-checkbox>
    <x-slot:label>
        Align on Middle
    </x-slot:label>
</x-checkbox>
 
<x-checkbox>
    <x-slot:label start>
        Align on Start
    </x-slot:label>
</x-checkbox>
```

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

### Generate color setup class with artisan command

Source: https://tallstackui.com/docs/customization/color

Run this artisan command to select a component and generate a PHP object class for color manipulation. The class is created in the `App\View\Components\TallStackUi\Colors` namespace.

```bash
php artisan tallstackui:setup-color
```

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

### Basic Usage

Source: https://tallstackui.com/docs/form/color

Renders a color input component with default settings.

```APIDOC
## Basic Usage

### Description
Renders a color input component with default settings.

### Component
<x-color />

### Usage
```
<x-color />
```
```

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

### Paddingless tab example

Source: https://tallstackui.com/docs/ui/tab

Shows how to use the paddingless attribute to remove padding from the tab body. The example includes three tab items with text content.

```blade
<x-tab selected="Tab 1" paddingless>
    <x-tab.items tab="Tab 1">
        Tall
    </x-tab.items>
    <x-tab.items tab="Tab 2">
        Stack
    </x-tab.items>
    <x-tab.items tab="Tab 3">
        UI 🥰
    </x-tab.items>
</x-tab>
```

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

### Custom icon usage examples

Source: https://tallstackui.com/docs/ui/icon

Examples of using custom icons with the naming pattern: replace '-' with '.' in the icon name. TallStackUI internally converts '.' back to '-'.

```blade
<!-- Assuming you have installed: secondnetwork/blade-tabler-icons -->
<x-icon name="tabler.sun" />
<x-icon name="tabler.moon" />
<x-icon name="tabler.a-b" />
<x-icon name="tabler.users" />
<x-icon name="tabler.brand-vimeo" />

<!-- Assuming you have installed: owenvoke/blade-fontawesome -->
<x-icon name="far.moon" />
<x-icon name="fas.moon" />
<x-icon name="fab.facebook" />
```

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

### Example: transform all inputs to fully round style

Source: https://tallstackui.com/docs/customization/soft

Shows the minimal code needed to replace rounded-md with rounded-full on all inputs, achieving a fully round style.

```php
use TallStackUi\Facades\TallStackUi;
 
class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
       TallStackUi::customize()
           ->form('input')
           ->block('input.base')
           ->replace('rounded-md', 'rounded-full'); 
    }
}
```

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

### Readonly and Disabled Select

Source: https://tallstackui.com/docs/form/select

Shows how to make the select readonly or disabled. The readonly example uses a value of '2', while the disabled example uses a value of '2' as a string.

```blade
<x-select.styled label="Readonly" :options="[1, 2, 3]" value="2" readonly />
<x-select.styled label="Disabled" :options="[1, 2, 3]" value="2" disabled />
```

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

### Basic Usage

Source: https://tallstackui.com/docs/ui/swap

Shows how to use the Swap component with flat arrays, collections, and dimensional arrays.

```APIDOC
## Swap Component - Basic Usage

### Description
Demonstrates the basic usage of the Swap component with different option formats.

### Usage
```blade
<!-- Flat array -->
<x-swap :options="['Apple', 'Banana', 'Cherry']" />

<!-- Collection -->
<x-swap :options="collect(['Apple', 'Banana', 'Cherry'])" />

<!-- Dimensional array, default keys -->
<x-swap :options="[
    ['label' => 'Small', 'value' => 1],
    ['label' => 'Medium', 'value' => 2],
    ['label' => 'Large', 'value' => 3],
]" />
```

### Parameters
- `options` (array|Collection) - Required - The list of options to display.
```

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

### Brand Collapsed Slot Example

Source: https://tallstackui.com/docs/ui/layout

Shows how to provide a compact brand version when the sidebar is collapsed using the brand-collapsed slot. The example includes both full and collapsed brand images.

```blade
<x-side-bar collapsible>
    <x-slot:brand>
        <div class="flex justify-center">
            <img src="/logo-full.svg" class="h-8" />
        </div>
    </x-slot:brand>
    <x-slot:brand-collapsed> 
        <div class="flex justify-center">
            <img src="/logo-icon.svg" class="h-6" />
        </div>
    </x-slot:brand-collapsed>
 
    <!-- side-bar items goes here... -->
</x-side-bar>
```

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

### All four helper methods: replace, remove, append, prepend

Source: https://tallstackui.com/docs/customization/soft

Shows the four methods available for interacting with original classes: replace, remove, append, and prepend, each with comments explaining their usage.

```php
use TallStackUi\Facades\TallStackUi;
 
class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
       TallStackUi::customize()
           ->form('input')
           ->block('input.base')
           // Replace: replace parts of the original content. 
           // Accepts:
           // - single: from/to replace,
           // - array for multiples replaces in the first parameter
           ->replace('rounded-md', 'rounded-full');
 
 
      TallStackUi::customize()
           ->form('input')
           ->block('input.base')
           // Remove: 
           // - single removal
           // - an array for multiple removals
           ->remove('w-full');
 
       TallStackUi::customize()
           ->form('input')
           ->block('input.base')
           // Append: appends classes as string 
           ->append('px-4');
 
       TallStackUi::customize()
           ->form('input')
           ->block('input.base')
           // Prepend: prepend classes as string 
           ->prepend('py-4');
    }
}
```

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

### Loading: Basic and with delay option

Source: https://tallstackui.com/docs/ui/card

Sets the card in a loading state. The first example uses the bare loading attribute; the second uses loading="save" with the Livewire delay option "longest". All Livewire delay options (shortest, shorter, short, long, longer, longest) are supported.

```blade
<x-card loading>
    TallStackUI
</x-card>
 
<!-- You can use all the Livewire delay options: shortest, shorter, short, long, longer, longest -->
 
<x-card loading="save" delay="longest">
    TallStackUI
</x-card>
```

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

### Side Bar Item Individual and Grouped Example

Source: https://tallstackui.com/docs/ui/layout

Shows how to add individual or grouped clickable items using the side-bar.item component. The grouped example nests items inside a parent item.

```blade
<!-- Individual -->
<x-side-bar.item text="Home" icon="home" :route="route('dashboard')" />
 
<!-- Grouped -->
<x-side-bar.item text="Admin">
    <x-side-bar.item text="Home" icon="home" :route="route('admin.dashboard')" />
</x-side-bar.item>
```

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

### Default account password

Source: https://tallstackui.com/docs/starter-kit

Default password for the starter kit's default account. Intended for local use only.

```text
Test123!
```

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

### Basic Usage: Integer and String Percent

Source: https://tallstackui.com/docs/ui/progress

Shows how to pass the percentage as an integer or as a string. The integer example uses :percent="50" and the string example uses percent="50.55".

```blade
<!-- As integer -->
<x-progress :percent="50" />
 
<!-- As string -->
<x-progress percent="50.55" />
```

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

### Range Mode with x-date

Source: https://tallstackui.com/docs/form/date

Enables range selection in the date picker. The Livewire property must be an array with two positions: start and end date. If the user selects only the start date, the end date will be null.

```blade
<!--
The Livewire property must be an array with two positions,
the first one is the start date and the second one is the end date.
 
Property:
public array $date = ['2021-01-01', '2021-01-31'];
 
Usage:
<x-date range wire:model="date" />
-->
 
<x-date range />
```

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

### Basic Usage

Source: https://tallstackui.com/docs/ui/signature

Renders the signature component. Must be used inside a Livewire component.

```APIDOC
## Basic Usage

### Description
Renders the signature component. The signature component can only be used inside a Livewire component.

### Usage
```
<x-signature />
```
```

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

### Basic Dialog usage with all types

Source: https://tallstackui.com/docs/interactions/dialog

Shows how to send success, error, warning, and info dialogs with title and message.

```php
$this->dialog()->success('Success', 'This is a success message.')->send();
$this->dialog()->error('Error', 'This is an error message.')->send();
$this->dialog()->warning('Warning', 'This is a warning message.')->send();
$this->dialog()->info('Info', 'This is an info message.')->send();
```

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

### Laravel route example for unfiltered API query

Source: https://tallstackui.com/docs/form/select

Example API route that filters users by name when a search term is provided, otherwise limits to 10 results. This query is used with the unfiltered attribute to handle filtering server-side.

```php
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Illuminate\Database\Eloquent\Builder;
 
Route::get('/users', function (Request $request) {
    $search = $request->get('search');
 
    return User::query()
        ->when($search, fn (Builder $query) => $query->where('name', 'like', "%{$search}%"))
        ->unless($search, fn (Builder $query) => $query->limit(10))
        ->get()
        ->map(fn (User $user): array => [
            'label' => $user->name,
            'value' => $user->id,
        ]);
})->name('api.users');
```

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

### Configure ~/.claude/settings.json for personal use

Source: https://tallstackui.com/docs/ai

Add this configuration to your `~/.claude/settings.json` to use the MCP server across all your projects.

```json
{
    "mcp": {
        "mcpServers": {
            "tallstackui": {
                "type": "http",
                "url": "https://tallstackui.com/mcp/tallstackui"
            }
        }
    }
}
```

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

### Example generated AlertColors class

Source: https://tallstackui.com/docs/customization/color

Example of the generated PHP class for the Alert component. It defines `backgroundColors` and `textColors` methods returning arrays for solid, outline, and light color variants, with all color keys initially set to null.

```php
// app/View/Components/TallStackUi/Colors/AlertColors.php
 
namespace App\View\Components\TallStackUi\Colors;
 
use Illuminate\View\Component;
 
class AlertColors
{
    /**
     * Background colors.
     */
    public function backgroundColors(Component $component): array
    {
        return [
            'solid' => [
                'black' => null,
                'primary' => null,
                'secondary' => null,
                'slate' => null,
                'gray' => null,
                'zinc' => null,
                'neutral' => null,
                'stone' => null,
                'red' => null,
                'orange' => null,
                'amber' => null,
                'yellow' => null,
                'lime' => null,
                'green' => null,
                'emerald' => null,
                'teal' => null,
                'cyan' => null,
                'sky' => null,
                'blue' => null,
                'indigo' => null,
                'violet' => null,
                'purple' => null,
                'fuchsia' => null,
                'pink' => null,
                'rose' => null,
                'mauve' => null,
                'olive' => null,
                'mist' => null,
                'taupe' => null,
            ],
            'outline' => [
                'black' => null,
                'primary' => null,
                'secondary' => null,
                'slate' => null,
                'gray' => null,
                'zinc' => null,
                'neutral' => null,
                'stone' => null,
                'red' => null,
                'orange' => null,
                'amber' => null,
                'yellow' => null,
                'lime' => null,
                'green' => null,
                'emerald' => null,
                'teal' => null,
                'cyan' => null,
                'sky' => null,
                'blue' => null,
                'indigo' => null,
                'violet' => null,
                'purple' => null,
                'fuchsia' => null,
                'pink' => null,
                'rose' => null,
                'mauve' => null,
                'olive' => null,
                'mist' => null,
                'taupe' => null,
            ],
            'light' => [
                'black' => null,
                'primary' => null,
                'secondary' => null,
                'slate' => null,
                'gray' => null,
                'zinc' => null,
                'neutral' => null,
                'stone' => null,
                'red' => null,
                'orange' => null,
                'amber' => null,
                'yellow' => null,
                'lime' => null,
                'green' => null,
                'emerald' => null,
                'teal' => null,
                'cyan' => null,
                'sky' => null,
                'blue' => null,
                'indigo' => null,
                'violet' => null,
                'purple' => null,
                'fuchsia' => null,
                'pink' => null,
                'rose' => null,
                'mauve' => null,
                'olive' => null,
                'mist' => null,
                'taupe' => null,
            ],
        ];
    }
 
    /**
     * Text colors.
     */
    public function textColors(Component $component): array
    {
        return [
            'solid' => [
                'black' => null,
                'primary' => null,
                'secondary' => null,
                'slate' => null,
                'gray' => null,
                'zinc' => null,
                'neutral' => null,
                'stone' => null,
                'red' => null,
                'orange' => null,
                'amber' => null,
                'yellow' => null,
                'lime' => null,
                'green' => null,
                'emerald' => null,
                'teal' => null,
                'cyan' => null,
                'sky' => null,
                'blue' => null,
                'indigo' => null,
                'violet' => null,
                'purple' => null,
                'fuchsia' => null,
                'pink' => null,
                'rose' => null,
                'mauve' => null,
                'olive' => null,
                'mist' => null,
                'taupe' => null,
            ],
            'outline' => [
                'black' => null,
                'primary' => null,
                'secondary' => null,
                'slate' => null,
                'gray' => null,
                'zinc' => null,
                'neutral' => null,
                'stone' => null,
                'red' => null,
                'orange' => null,
                'amber' => null,
                'yellow' => null,
                'lime' => null,
                'green' => null,
                'emerald' => null,
                'teal' => null,
                'cyan' => null,
                'sky' => null,
                'blue' => null,
                'indigo' => null,
                'violet' => null,
                'purple' => null,
                'fuchsia' => null,
                'pink' => null,
                'rose' => null,
                'mauve' => null,
                'olive' => null,
                'mist' => null,
                'taupe' => null,
            ],
            'light' => [
                'black' => null,
                'primary' => null,
                'secondary' => null,
                'slate' => null,
                'gray' => null,
                'zinc' => null,
                'neutral' => null,
                'stone' => null,
                'red' => null,
                'orange' => null,
                'amber' => null,
                'yellow' => null,
                'lime' => null,
                'green' => null,
                'emerald' => null,
                'teal' => null,
                'cyan' => null,
                'sky' => null,
                'blue' => null,
                'indigo' => null,
                'violet' => null,
                'purple' => null,
                'fuchsia' => null,
                'pink' => null,
                'rose' => null,
                'mauve' => null,
                'olive' => null,
                'mist' => null,
                'taupe' => null,
            ],
        ];
    }
}
```

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

### Basic Usage

Source: https://tallstackui.com/docs/form/time

Renders a time input component with default settings.

```APIDOC
## Basic Usage

### Description
Renders a time input component with default settings.

### Component
<x-time />

### Parameters
None

### Example
```blade
<x-time />
```
```

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

### Preview

Source: https://tallstackui.com/docs/ui/swap

Shows how to enable preview of previous and next values.

```APIDOC
## Swap Component - Preview

### Description
Adds a preview of the previous and next values.

### Usage
```blade
<x-swap preview :options="['January', 'February', 'March', 'April', 'May']" />
```

### Parameters
- `preview` (boolean) - Optional - Enables preview of previous and next values.
- `options` (array) - Required - The list of options.

### Notes
`preview` and `vertical` cannot be combined.
```

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

### Multiple

Source: https://tallstackui.com/docs/form/select

Example of enabling multiple selection in the select component.

```APIDOC
## [COMPONENT] x-select.styled (Multiple)

### Description
Enables multiple selection in the styled select component.

### Usage
```blade
<x-select.styled :options="[1,2,3,4,5,6]" multiple />
```

### Parameters
- **options** (array) - Required - Array of options to display.
- **multiple** (boolean) - Optional - Enables multiple selection.
```

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

### Readonly & Disabled

Source: https://tallstackui.com/docs/form/select

Examples of using the select.styled component with readonly and disabled attributes.

```APIDOC
## [COMPONENT] x-select.styled (Readonly & Disabled)

### Description
Renders a styled select component that can be set to readonly or disabled state.

### Usage
```blade
<x-select.styled label="Readonly" :options="[1, 2, 3]" value="2" readonly />
<x-select.styled label="Disabled" :options="[1, 2, 3]" value="2" disabled />
```

### Parameters
- **label** (string) - Optional - The label displayed above the select.
- **options** (array) - Required - Array of options to display.
- **value** (mixed) - Optional - The selected value.
- **readonly** (boolean) - Optional - Makes the select readonly.
- **disabled** (boolean) - Optional - Disables the select.
```

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

### Basic Usage

Source: https://tallstackui.com/docs/ui/key-value

Renders a KeyValue component with default headers 'KEY' and 'VALUE'. Use wire:model to bind to an array of key-value pairs.

```APIDOC
## [COMPONENT] <x-key-value>

### Description
Renders a KeyValue component with default headers 'KEY' and 'VALUE'. Use wire:model to bind to an array of key-value pairs.

### Usage
```blade
<x-key-value wire:model="metadata" />
```

### Parameters
- **wire:model** (string) - Required - The Livewire property (array) to bind the key-value rows to.

### Example
```php
public array $metadata = [
    ['key' => 'php', 'value' => 'Laravel'],
    ['key' => 'vuejs', 'value' => 'NuxtJS'],
];
```
```

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

### Required

Source: https://tallstackui.com/docs/form/select

Example of making the select component required, preventing deselection after an option is chosen.

```APIDOC
## [COMPONENT] x-select.styled (Required)

### Description
Makes the select component required, preventing the user from deselecting the selected option.

### Usage
```blade
<x-select.styled :options="[1,2,3]" required />
```

### Parameters
- **options** (array) - Required - Array of options to display.
- **required** (boolean) - Optional - Makes the select required.
```

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

### Placeholders

Source: https://tallstackui.com/docs/form/select

Examples of customizing placeholders for the select input, search field, and empty state.

```APIDOC
## [COMPONENT] x-select.styled (Placeholders)

### Description
Shows how to customize the placeholder text for the select input, search field, and empty state.

### Usage
```blade
<!-- Changing only the placeholder of the input -->
<x-select.styled placeholder="Custom Placeholder" ... />
 
<!-- Changing all placeholders -->
<x-select.styled :placeholders="[
                    'default' => 'This is the default placeholder',
                    'search'  => 'This is the search placeholder',
                    'empty'   => 'This is the empty placeholder',
                 ]" ... />
```

### Parameters
- **placeholder** (string) - Optional - Placeholder for the select input.
- **placeholders** (array) - Optional - Associative array with keys 'default', 'search', and 'empty' to customize respective placeholders.
```

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

### Block

Source: https://tallstackui.com/docs/ui/swap

Shows how to display the component using full width.

```APIDOC
## Swap Component - Block

### Description
Displays the Swap component using the full width of its container.

### Usage
```blade
<x-swap block :options="['Daily', 'Weekly', 'Monthly', 'Yearly']" />
```

### Parameters
- `block` (boolean) - Optional - Displays the component using full width.
- `options` (array) - Required - The list of options.
```

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

### Dial with Labels

Source: https://tallstackui.com/docs/ui/dial

Shows labels on each item. The label is not mandatory, as shown in the Without Tooltip example.

```blade
<x-dial>
    <x-dial.items icon="pencil" label="Edit" />
    <x-dial.items icon="share" label="Share" />
    <x-dial.items icon="document-duplicate" label="Copy" />
    <x-dial.items icon="trash" label="Delete" />
</x-dial>
```

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

### Configure .mcp.json for team sharing

Source: https://tallstackui.com/docs/ai

Create a `.mcp.json` file in your project root with this content to share the MCP server configuration with your team via version control.

```json
{
    "mcpServers": {
        "tallstackui": {
            "type": "http",
            "url": "https://tallstackui.com/mcp/tallstackui"
        }
    }
}
```

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

### Readonly and Disabled x-color

Source: https://tallstackui.com/docs/form/color

Shows how to make the color input readonly or disabled, with example values.

```blade
<x-color label="Readonly" value="#3B82F6" readonly />
<x-color label="Disabled" value="#3B82F6" disabled />
```

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

### Step 11: Customize list dividers keyed on data-list-on

Source: https://tallstackui.com/docs/upgrade-guide

In AppServiceProvider's boot method, customize the list items.wrapper to key dividers on data-list-on instead of data-list-row to avoid phantom dividers.

```php
// AppServiceProvider, "boot" method.

// Dividers must be keyed on data-list-on, not data-list-row
TallStackUi::customize()
    ->list()
    ->block('items.wrapper', '[&>[data-list-on]~[data-list-on]]:border-t');
```

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

### <x-calendar range />

Source: https://tallstackui.com/docs/ui/calendar

Enables range mode, allowing the user to select a start and end date.

```APIDOC
## [BLADE] <x-calendar range />

### Description
Enables range mode, allowing the user to select a start and end date. The Livewire property must be an array with two positions: the first is the start date, the second is the end date.

### Parameters
- **range** (boolean) - Optional - Enables range selection.
- **wire:model** (string) - Optional - The Livewire property to bind to.

### Usage
```blade
<x-calendar range wire:model="date" />
```

### Notes
- The Livewire property must be an array with two positions: `['2026-04-01', '2026-04-15']`.
- In range mode, the user can select only the start date initially; the end date will be null.

```

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

### Define helper links with ENVBAR_LINKS (only links)

Source: https://tallstackui.com/docs/helpers/env-bar

Sets the ENVBAR_LINKS environment variable to a comma-separated list of URLs. Each URL becomes a link in the dropdown.

```bash
ENVBAR_LINKS="https://google.com.br,https://github.com"
```

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

### Set icon library environment variable

Source: https://tallstackui.com/docs/ui/icon

Set the TALLSTACKUI_ICON_TYPE environment variable to the installed icon package.

```bash
TALLSTACKUI_ICON_TYPE="owenvoke/blade-fontawesome"
```

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

### Dial Without Tooltip

Source: https://tallstackui.com/docs/ui/dial

Disables the tooltip on items using the without-tooltip attribute. Items do not have labels in this example.

```blade
<x-dial without-tooltip>
    <x-dial.items icon="pencil" />
    <x-dial.items icon="share" />
    <x-dial.items icon="trash" />
</x-dial>
```

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

### Basic Usage of x-clipboard

Source: https://tallstackui.com/docs/ui/clipboard

Two equivalent ways to render the clipboard component: using the text attribute or placing the text inside the component's slot.

```blade
<x-clipboard text="TallStackUI" />
 
<!-- Or -->
 
<x-clipboard>
    TallStackUI
</x-clipboard>
```

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

### Readonly and disabled x-tag examples

Source: https://tallstackui.com/docs/form/tag

Shows how to make the tag component readonly or disabled, with pre-populated values.

```blade
<x-tag label="Readonly" :value="['Laravel', 'Livewire']" readonly />
<x-tag label="Disabled" :value="['Laravel', 'Livewire']" disabled />
```

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

### Available Options for Banner

Source: https://tallstackui.com/docs/ui/banner

Shows how to add a close button, set enter and leave delays in seconds, and control only the leave delay.

```php
public function save(): void
{
    $this->banner()
        ->close() // Add the close button
        ->success('...')
        ->send();
 
    $this->banner()
        ->enter(seconds: 3) // Enter in 3 seconds
        ->leave(seconds: 10) // Leave in 10 seconds
        ->success('...')
        ->send();
 
    $this->banner()
        ->leave(seconds: 10) // Controlling only the seconds to leave
        ->success('...')
        ->send();
}
```

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

### Multi-dimensional Array

Source: https://tallstackui.com/docs/form/select

Examples of using multi-dimensional arrays for options, including custom label and value mapping.

```APIDOC
## [COMPONENT] x-select.styled (Multi-dimensional Array)

### Description
Allows using multi-dimensional arrays for options, with support for custom label and value keys.

### Usage
```blade
<x-select.styled  :options="[
    ['label' => 'TALL', 'value' => 1],
    ['label' => 'LIVT', 'value' => 2],
]" />
```

When the value and label do not come from the label and value positions respectively, you must specify this manually using the select attribute:

```blade
<x-select.styled  :options="[
    ['name' => 'TALL', 'id' => 1],
    ['name' => 'LIVT', 'id' => 2],
]" select="label:name|value:id" />
```

### Parameters
- **options** (array) - Required - Multi-dimensional array of options, each containing 'label' and 'value' keys by default.
- **select** (string) - Optional - Specifies custom keys for label and value in the format 'label:key|value:key'.
```
Tokens:
Raw