> ## 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.

# Card

> A container component for grouping related content with optional title and description

export const PreviewButton = ({children, variant = 'primary', size = 'md'}) => {
  const sizeStyles = {
    sm: {
      padding: '6px 12px',
      fontSize: 14
    },
    md: {
      padding: '8px 16px',
      fontSize: 14
    },
    lg: {
      padding: '12px 24px',
      fontSize: 16
    }
  };
  return <button className={`sh-btn sh-btn-${variant}`} style={sizeStyles[size]}>
      {children}
    </button>;
};

export const PreviewCard = ({title, description, children, className = ''}) => {
  return <div className={`sh-card-outer ${className}`}>
      {title && <div className="sh-card-header">
          <span className="sh-card-title">{title}</span>
          {description && <span className="sh-card-description">{description}</span>}
        </div>}
      <div className="sh-card-inner">
        {children}
      </div>
    </div>;
};

export const ComponentPreview = ({children, className = '', centered = true}) => {
  return <div className={`sh-preview ${className}`}>
      <div className={`sh-preview-content ${centered ? 'flex items-center justify-center' : ''}`}>
        {children}
      </div>
    </div>;
};

The Card component is the primary container used throughout Shopper to group related content. It provides a consistent visual treatment with a subtle border and background.

## Preview

<ComponentPreview centered={false}>
  <PreviewCard title="Card Title" description="This is a description that explains what this card contains.">
    <p className="text-gray-600 dark:text-gray-400">Your content goes here. This could be forms, tables, or any other content.</p>
  </PreviewCard>
</ComponentPreview>

## Usage

```blade theme={null}
<x-shopper::card title="Card Title" description="Optional description text">
    <p>Your content goes here</p>
</x-shopper::card>
```

## Props

<ParamField path="title" type="string | Slot" default="null">
  The card header title. Can be a string or a slot for custom content.
</ParamField>

<ParamField path="description" type="string" default="null">
  Optional description text displayed below the title.
</ParamField>

## Examples

### Basic Card

<ComponentPreview centered={false}>
  <PreviewCard>
    <p className="text-gray-600 dark:text-gray-400">A simple card without title or description.</p>
  </PreviewCard>
</ComponentPreview>

```blade theme={null}
<x-shopper::card>
    <p>A simple card without title or description.</p>
</x-shopper::card>
```

### Card with Title Only

<ComponentPreview centered={false}>
  <PreviewCard title="Product Information">
    <p className="text-gray-600 dark:text-gray-400">Display product details in an organized manner.</p>
  </PreviewCard>
</ComponentPreview>

```blade theme={null}
<x-shopper::card title="Product Information">
    <p>Display product details in an organized manner.</p>
</x-shopper::card>
```

### Card with Custom Title Slot

You can pass a custom slot for the title to include additional elements:

```blade theme={null}
<x-shopper::card>
    <x-slot:title>
        <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold">Custom Title</h3>
            <x-filament::button size="sm">Action</x-filament::button>
        </div>
    </x-slot:title>

    <p>Card content with custom header.</p>
</x-shopper::card>
```

### Card with Form Content

<ComponentPreview centered={false}>
  <PreviewCard title="Account Settings" description="Update your account information below.">
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name</label>

        <input type="text" placeholder="John Doe" className="w-full rounded-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-800 px-3 py-2 text-sm" />
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>

        <input type="email" placeholder="john@example.com" className="w-full rounded-lg border border-gray-300 dark:border-gray-700 dark:bg-gray-800 px-3 py-2 text-sm" />
      </div>
    </div>
  </PreviewCard>
</ComponentPreview>

```blade theme={null}
<x-shopper::card title="Account Settings" description="Update your account information below.">
    <div class="space-y-4">
        <div>
            <x-shopper::label for="name">Name</x-shopper::label>
            <x-shopper::forms.input name="name" placeholder="John Doe" />
        </div>
        <div>
            <x-shopper::label for="email">Email</x-shopper::label>
            <x-shopper::forms.input type="email" name="email" placeholder="john@example.com" />
        </div>
    </div>
</x-shopper::card>
```

## Blade Component Source

The Card component is located at `packages/admin/resources/views/components/card.blade.php`:

```blade theme={null}
@props([
    'title' => null,
    'description' => null,
])

<div
    {{ $attributes->twMerge(['class' => 'sh-card p-1.5 bg-gray-50 dark:bg-gray-950 rounded-lg ring-1 ring-gray-200 dark:ring-white/10 overflow-hidden']) }}
>
    @if ($title)
        <header class="sh-card-header px-2 py-3">
            @if ($title instanceof \Illuminate\View\ComponentSlot)
                {{ $title }}
            @else
                <x-shopper::section-heading :$title :$description />
            @endif
        </header>
    @endif

    <div class="sh-card-content bg-white dark:bg-gray-900 ring-1 ring-gray-200 rounded-lg dark:ring-white/10 p-4 overflow-hidden">
        {{ $slot }}
    </div>
</div>
```