Skip to main content
These components provide structural and utility functionality. They don’t require visual previews as they are primarily wrappers or functional elements.

​
Container

Page content wrapper with responsive horizontal padding. 
<x-shopper::container>
    <!-- Page content -->
</x-shopper::container>
Source: 
<div {{ $attributes->twMerge(['class' => 'px-4 lg:px-6']) }}>
    {{ $slot }}
</div>
Internal navigation link with Livewire wire:navigate.hover for SPA-like navigation. 
<x-shopper::link href="{{ route('shopper.products.index') }}">
    Products
</x-shopper::link>
Source: 
<a {{ $attributes }} wire:navigate.hover>
    {{ $slot }}
</a>

​
Separator

Visual divider between content sections. 
<x-shopper::separator />
Source: 
<div class="sh-separator py-8 lg:py-10">
    <div class="border-t border-gray-200 dark:border-white/20"></div>
</div>
Navigation breadcrumb with mobile back link support. 
<x-shopper::breadcrumb :back="route('shopper.products.index')" current="iPhone 15">
    <x-shopper::breadcrumb.link
        :href="route('shopper.products.index')"
        :title="__('Products')"
    />
</x-shopper::breadcrumb>

​
Props

PropTypeDescription
backstringURL for mobile back link
currentstringCurrent page title (optional)
<x-shopper::breadcrumb.link
    :href="route('shopper.categories.index')"
    :title="__('Categories')"
/>

​
Validation Errors

Displays Laravel validation errors in a styled error box. 
<x-shopper::validation-errors />
Automatically displays all validation errors from $errors->all(). Source: 
@if ($errors->count() > 0)
    <div class="bg-danger-50 my-2 rounded-lg p-4">
        <div class="flex">
            <div class="shrink-0">
                <!-- Error icon -->
            </div>
            <div class="ml-3">
                <h3 class="text-danger-800 text-sm leading-5 font-medium">
                    {{ __('shopper::forms.error') }}
                </h3>
                <div class="text-danger-700 mt-2 text-sm leading-5">
                    <ul class="list-disc space-y-1 pl-5">
                        @foreach ($errors->all() as $message)
                            <li>{{ $message }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endif
Menu item for dropdown menus. 
<x-shopper::dropdown-link :href="route('shopper.profile')">
    Profile
</x-shopper::dropdown-link>

​
Form Slide-over

Wrapper for forms displayed in slide-over panels. 
<x-shopper::form-slider-over action="save" close-panel="form-panel">
    <x-slot:title>Edit Product</x-slot:title>

    <!-- Form content -->

    <x-slot:buttons>
        <x-filament::button type="submit">Save</x-filament::button>
    </x-slot:buttons>
</x-shopper::form-slider-over>

​
Props

PropTypeDescription
actionstringLivewire method to call on submit
close-panelstringPanel name to close after submit

​
Slots

SlotDescription
titleSlide-over header title
defaultForm content
buttonsFooter action buttons