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