website·Indexed 32 days ago
https://tallstackui.com/docs/v1A TALL Stack (Tailwind CSS, Alpine.js, Laravel, Livewire) component library providing 80+ Blade components. Documentation covers a wide range of UI elements including data tables, charts, calendars, rich text editors, and form inputs like autocomplete and checkboxes.
<x-wrapper.radio> component is a utility wrapper designed to provide consistent label positioning and error display around radio, checkbox, and toggle form components. While primarily used internally by other TallStackUI components, it can be used directly to wrap input elements. It supports flexible label placement (left or right) and vertical alignment (start or middle).<!-- Example with right-aligned label and Livewire error handling -->
<x-wrapper.radio label="Accept terms" position="right" property="terms" error>
<input type="checkbox" wire:model="terms" class="rounded border-gray-300" />
</x-wrapper.radio>
<!-- Example with left-aligned label and top vertical alignment -->
<x-wrapper.radio label="Option A" position="left" alignment="start" id="option-a">
<input type="radio" name="option" value="a" id="option-a" />
</x-wrapper.radio>x-card component is a versatile container for the TALL stack (Tailwind CSS, Alpine.js, Laravel, Livewire). It supports optional headers, footers, images, and various styling variants including solid and light color themes, as well as accent borders.<x-card header="User Profile">
<p>Name: John Doe</p>
<x-slot:footer>
<x-button text="Save" />
</x-slot:footer>
</x-card>TallStackUI is a component library for the TALL stack. To use it, your project must meet the following minimum version requirements:
<x-pin /> uses <x-label />). To customize these nested children independently of their standalone versions, use the scope attribute within the TallStackUi::customize method. This namespaces the customization to only affect the child when it appears within that specific parent component.// In AppServiceProvider::boot()
// Option 1: Direct customization
TallStackUi::customize('label', scope: 'form.pin.label')
->block('wrapper', 'your-tailwind-classes');
// Option 2: Chained API
TallStackUi::customize()
->label(scope: 'form.pin.label')
->block('wrapper', 'your-tailwind-classes');<x-dropdown.items> component renders an individual menu item within a <x-dropdown> container. It can render as a button, a link (when href is provided), or a custom div (when using the default slot). It supports Heroicons and Livewire navigation.<x-dropdown text="Actions">
<!-- Basic item with icon -->
<x-dropdown.items text="Edit" icon="pencil" />
<!-- Item with a top border separator -->
<x-dropdown.items text="Delete" icon="trash" separator />
<!-- Link item with Livewire SPA navigation -->
<x-dropdown.items text="Dashboard" href="/dashboard" navigate />
<!-- Item with icon on the right -->
<x-dropdown.items text="Settings" href="/settings" icon="cog-6-tooth" position="right" />
<!-- Custom content using the default slot -->
<x-dropdown.items>
<div class="flex items-center gap-2">
<img src="/avatar.jpg" class="h-6 w-6 rounded-full" />
<span>John Doe</span>
</div>
</x-dropdown.items>
</x-dropdown><x-key-value /> component provides a dynamic interface for users to add, edit, and remove key-value entries. It must be used within a Livewire component and syncs data via wire:model.{{-- Basic usage --}}
<x-key-value wire:model="metadata" />
{{-- With custom labels, row limit, and delete functionality --}}
<x-key-value wire:model="settings" label="Setting" value="Value" :limit="5" deletable />
{{-- Read-only mode --}}
<x-key-value wire:model="data" static />
{{-- With specific accent color --}}
<x-key-value wire:model="metadata" color="green" />
{{-- Without any accent colors --}}
<x-key-value wire:model="metadata" colorless /><x-side-bar> component provides a responsive navigation layout with a fixed panel for desktop and a slide-out drawer for mobile. It supports collapsible modes, custom branding, and a footer slot. The mobile drawer locks page scrolling when open and closes on the Escape key.<x-side-bar collapsible navigate thin-scroll>
<x-slot:brand>
<div class="px-4 py-6"><img src="/logo.svg" class="h-8" /></div>
</x-slot:brand>
<x-slot:brand-collapsed>
<div class="px-2 py-6"><img src="/icon.svg" class="h-8" /></div>
</x-slot:brand-collapsed>
<x-side-bar.separator text="Main" />
<x-side-bar.item text="Dashboard" route="/dashboard" icon="home" />
<x-side-bar.item text="Settings" route="/settings" icon="cog-6-tooth" />
<x-slot:footer>
<p class="text-sm text-gray-400">v3.0</p>
</x-slot:footer>
</x-side-bar>x-tooltip directive allows any element within an Alpine tree to trigger a tooltip. This is useful for non-component elements like images or spans. It also supports specific data- attributes for configuration.{{-- Basic directive usage --}}
<span x-data x-tooltip="Any element can carry one"></span>
<img x-data x-tooltip="Even an image" src="..." />
{{-- Using a tooltip prop on other components (e.g., Button) --}}
<x-button tooltip="Buttons have a prop for it" text="Save" />
{{-- Advanced configuration via data attributes --}}
<x-button
tooltip="Opens right away"
data-tooltip-delay="flash"
data-tooltip-color="emerald"
text="Save"
/>
{{-- Reactive disabling of a tooltip --}}
<span x-tooltip="Hidden while the menu is open"
x-bind:data-tooltip-disabled="$store['tsui.side-bar'].open">
</span>#[Lazy] attribute in Livewire, the placeholder() method can return a table skeleton. To ensure the skeleton displays the correct column labels, define the $headers array as a class-level property default. Headers assigned inside the mount() method will not be available during the placeholder render, causing the table to fall back to generic columns.#[Lazy]
class UsersTable extends Component
{
// Class-level default survives into the placeholder
public array $headers = [
['index' => 'name', 'label' => 'Name'],
['index' => 'email', 'label' => 'E-mail'],
];
public function placeholder(): string
{
return <<<'HTML'
<div>
<x-table :$headers skeleton="5" />
</div>
HTML;
}
}TallStackUi::customize() method. This can be done globally or scoped to a specific instance.// Global customization of the 'md' size block
TallStackUi::customize()
->icon()
->block('sizes.md', 'h-9 w-9');
// Scoped customization for 'hero' icons
TallStackUi::customize('icon', scope: 'hero')
->block('sizes.md', 'h-12 w-12');Available Blocks: sizes.xs, sizes.sm, sizes.md, sizes.lg, sizes.xl, sizes.2xl, sizes.3xl, sizes.4xl, sizes.5xl, sizes.6xl, sizes.7xl
Associate tabs with URLs using the href attribute on <x-tab.items>. This prevents heavy Livewire components from rendering unless the current URL matches.
navigate: Uses Livewire.navigate() for SPA-style navigation.navigate-hover: Adds prefetching on hover.window.location.href navigation.<x-tab>
<x-tab.items tab="users" title="Users" :href="route('users.index')" navigate>
<livewire:users.index />
</x-tab.items>
<x-tab.items tab="invoices" title="Invoices" :href="route('invoices.index')" navigate>
<livewire:invoices.index />
</x-tab.items>
</x-tab>