Skip to main content
Shopper provides a set of Blade components that you can use when extending the admin panel. These components are designed to maintain visual consistency across your custom features.

​
Available Components

The component library includes:

Card

Container component with optional title and description for content grouping.

Alert

Colored alert boxes for displaying messages with different severity levels.

Heading

Page-level heading with optional action slot for buttons.

Section Heading

Section titles with optional descriptions for content organization.

Empty State

Placeholder component for empty data states with call-to-action.

​
Usage

All Shopper components are prefixed with x-shopper:: and can be used in any Blade view within the admin panel context: 
<x-shopper::card title="My Card Title">
    <p>Card content goes here</p>
</x-shopper::card>

​
Styling

Components use Tailwind CSS and support both light and dark modes out of the box. They follow the Shopper design system with consistent spacing, colors, and typography.

​
Customization

You can customize components by:
  1. Passing attributes: Most components accept standard HTML attributes via $attributes
  2. Using slots: Many components support named slots for flexible content placement
  3. Publishing views: Override component views by publishing them to your application
php artisan vendor:publish --tag=shopper-views
When overriding components, be careful to maintain the expected structure to avoid breaking the admin panel UI.