v3.5.0 is out! Dozens of significant improvements overall! Keep your TallStackUI up to date to get the best experience.

Powerful suite of Blade components for TALL Stack apps.

List

List component.

# Concept

The list component is a card-shaped, action-oriented list for browsing or managing collections of items. Each row displays a bold name , an optional inline caption (or arbitrary Blade content), and an optional ellipsis-vertical menu trigger that opens a per-row dropdown. Optional client-side search filters rows by name and caption.

The component can be populated in two ways:

  • slot composition (recommended for static lists or @foreach with rich per-row Blade)
  • data-driven via the :items attribute

# Basic Usage

general 1 server
production 12 servers
staging 3 servers

No items.

<x-list>
    <x-list.items name="general" caption="1 server" />
    <x-list.items name="production" caption="12 servers" />
    <x-list.items name="staging" caption="3 servers" />
</x-list>
 
<!-- or -->
 
@php
    // `$items` may be an array, a Collection, or any object that implements
    // `Illuminate\Contracts\Support\Arrayable`. Each entry is read with
    // `data_get`, so accessors and array keys both work. The only required
    // key is `name` — every other key is optional and accessible inside
    // `@interact('item_menu', $item)` as `$item['extra_key']`.
    $items = [
        ['name' => 'general',    'caption' => '1 server'],
        ['name' => 'production', 'caption' => '12 servers'],
        ['name' => 'staging',    'caption' => '3 servers'],
    ];
@endphp
 
<x-list :items="$items" />

# Label & Hint

general 1 server
production 12 servers

No items.

Manage your tags here. 
<x-list label="Tags" hint="Manage your tags here.">
    <x-list.items name="general" caption="1 server" />
    <x-list.items name="production" caption="12 servers" />
</x-list>

# Searchable

An option to perform client-side filtering of rows.

general 1 server
production 12 servers
staging 3 servers

No items.

<x-list label="Tags" searchable>
    <x-list.items name="general" caption="1 server" />
    <x-list.items name="production" caption="12 servers" />
    <x-list.items name="staging" caption="3 servers" />
</x-list>

# Search Placeholder

general 1 server
production 12 servers

No items.

<x-list label="Tags" searchable search-placeholder="Filter tags by name or caption">
    <x-list.items name="general" caption="1 server" />
    <x-list.items name="production" caption="12 servers" />
</x-list>

# Per-Item Menu

general 1 server
production 12 servers

No items.

Click an ellipsis to act on a tag. 
<x-list label="Tags" hint="Click an ellipsis to act on a tag.">
    <x-list.items name="general" caption="1 server">
        <x-slot:menu>
            <x-dropdown.items text="Edit" wire:click="edit('general')" />
            <x-dropdown.items text="Delete" wire:click="delete('general')" />
        </x-slot:menu>
    </x-list.items>
    <x-list.items name="production" caption="12 servers">
        <x-slot:menu>
            <x-dropdown.items text="Edit" wire:click="edit('production')" />
            <x-dropdown.items text="Delete" wire:click="delete('production')" />
        </x-slot:menu>
    </x-list.items>
</x-list>

# Loop Items 

<x-list label="Tags" searchable>
    @foreach ($tags as $tag)
        <x-list.items :name="$tag->name" :caption="$tag->servers_count.' server(s)'">
            <x-slot:menu>
                <x-dropdown.items text="Edit" wire:click="edit({{ $tag->id }})" />
                <x-dropdown.items text="Delete" wire:click="delete({{ $tag->id }})" />
            </x-slot:menu>
        </x-list.items>
    @endforeach
</x-list>

# Data-Driven

general 1 server
production 12 servers
staging 3 servers

No items.

@php
    $tags = [
        ['name' => 'general',    'caption' => '1 server'],
        ['name' => 'production', 'caption' => '12 servers'],
        ['name' => 'staging',    'caption' => '3 servers'],
    ];
@endphp
 
<x-list label="Tags" :items="$tags" searchable />

# Data-Driven Menu

general 1 server
production 12 servers
staging 3 servers

No items.

@php
    $tags = [
        ['id' => 1, 'name' => 'general',    'caption' => '1 server'],
        ['id' => 2, 'name' => 'production', 'caption' => '12 servers'],
        ['id' => 3, 'name' => 'staging',    'caption' => '3 servers'],
    ];
@endphp
 
<x-list label="Tags" :items="$tags" searchable>
    @interact('item_menu', $item)
        <x-dropdown.items text="Edit" wire:click="edit('{{ $item['id'] }}')" />
        <x-dropdown.items text="Delete" wire:click="delete('{{ $item['id'] }}')" />
    @endinteract
</x-list>

# Scrollable Height

general 1 server
production 12 servers
staging 3 servers
monitoring 4 servers
database 6 servers
cache 2 servers
queue 3 servers
analytics 5 servers
mailer 1 server
logging 4 servers

No items.

<!--
    The `height` attribute accepts one of `'40'`, `'60'`, `'80'` or `'96'`,
    which translate to `max-h-{n}` plus a custom-styled scrollbar.
-->
<x-list label="Tags" :items="$tags" searchable height="60" />

# Custom Empty State

general 1 server

No tags configured yet.

<!--
    The empty slot is shown when the list has zero items AND when
    the search filter matches none. The default falls back to the
    `ts-ui::messages.list.empty` translation key.
 -->
<x-list label="Tags" searchable>
    <x-slot:empty>
        <div class="flex flex-col items-center gap-2 py-4">
            <p class="text-sm text-secondary-700 dark:text-dark-100">No tags configured yet.</p>
            <x-button text="Create tag" wire:click="create" />
        </div>
    </x-slot:empty>
    <x-list.items name="general" caption="1 server" />
</x-list>

# Rich Inline Content

signup-flow active
checkout-v2 rolling out
legacy-onboarding retired

No items.

<x-list label="Features">
    <x-list.items name="signup-flow">
        <x-badge color="green" round xs>active</x-badge>
    </x-list.items>
    <x-list.items name="checkout-v2">
        <x-badge color="amber" round xs>rolling out</x-badge>
    </x-list.items>
    <x-list.items name="legacy-onboarding">
        <x-badge color="red" round xs>retired</x-badge>
    </x-list.items>
</x-list>

# Caveats

  • x-list.items is an internal child component, it expects the parent x-list Alpine scope to be present. Using it standalone will fail with Alpine errors. Always wrap inside x-list .
  • name is required on every row (slot or data-driven). An empty or missing name throws an InvalidArgumentException at render time.
  • height is restricted to the tokens 40 , 60 , 80 and 96 , anything else throws.
  • The per-row menu is rendered through an internal x-floating at z-40 so it sits below Dialog/Modal/Slide/Toast overlays at z-50 . Customize the panel via the menu.floating block on x-list.items , not via floating's own customization.

Code highlighting provided by Torchlight