Documentation Index
Fetch the complete documentation index at: https://docs.laravelshopper.dev/llms.txt
Use this file to discover all available pages before exploring further.
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>
<div {{ $attributes->twMerge(['class' => 'px-4 lg:px-6']) }}>
{{ $slot }}
</div>
Link
Internal navigation link with Livewire wire:navigate.hover for SPA-like navigation.
<x-shopper::link href="{{ route('shopper.products.index') }}">
Products
</x-shopper::link>
<a {{ $attributes }} wire:navigate.hover>
{{ $slot }}
</a>
Separator
Visual divider between content sections.
Source:
<div class="sh-separator py-8 lg:py-10">
<div class="border-t border-gray-200 dark:border-white/20"></div>
</div>
Breadcrumb
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
| Prop | Type | Description |
|---|
back | string | URL for mobile back link |
current | string | Current page title (optional) |
Breadcrumb Link
<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 />
$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
Dropdown Link
Menu item for dropdown menus.
<x-shopper::dropdown-link :href="route('shopper.profile')">
Profile
</x-shopper::dropdown-link>
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
| Prop | Type | Description |
|---|
action | string | Livewire method to call on submit |
close-panel | string | Panel name to close after submit |
Slots
| Slot | Description |
|---|
title | Slide-over header title |
default | Form content |
buttons | Footer action buttons |
