> ## Documentation Index
> Fetch the complete documentation index at: https://docs.subscribd.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Blade Components

> Static Blade components for billing UI

# Blade Components

Subscribd's Blade components are static, non-reactive alternatives to the Livewire components. Use them when you don't need server-side reactivity — for example, in read-only views, emails, or contexts where Livewire is not loaded.

All Blade components are prefixed with `x-subscribd-`.

## x-subscribd-plan-card

Renders a single plan card with name, price, interval, and feature list.

```blade theme={null}
<x-subscribd-plan-card :plan="$plan" />
```

Pass a custom CTA button via the `action` slot:

```blade theme={null}
<x-subscribd-plan-card :plan="$plan">
    <x-slot name="action">
        <form action="{{ route('subscribe', $plan) }}" method="POST">
            @csrf
            <button type="submit">Subscribe</button>
        </form>
    </x-slot>
</x-subscribd-plan-card>
```

## x-subscribd-plan-grid

Renders a full plan comparison grid for all active plans.

```blade theme={null}
<x-subscribd-plan-grid />
```

Limit to specific plan keys:

```blade theme={null}
<x-subscribd-plan-grid :plans="['starter', 'pro', 'enterprise']" />
```

## x-subscribd-subscription-badge

A status badge for the current subscription. Renders the subscription status as a coloured pill — for example, "Active", "Trial", or "Grace Period".

```blade theme={null}
<x-subscribd-subscription-badge :subscription="$subscription" />
```

When no `subscription` is passed, the component resolves the authenticated user's default subscription automatically.

## x-subscribd-trial-status

Shows trial status text and days remaining.

```blade theme={null}
<x-subscribd-trial-status />

<x-subscribd-trial-status :subscription="$subscription" />
```

## x-subscribd-invoice-history

Renders a non-paginated invoice table. Best for dashboards showing the most recent invoices.

```blade theme={null}
{{-- Show last 5 invoices --}}
<x-subscribd-invoice-history :per-page="5" />
```

## x-subscribd-invoice-link

A PDF download link for a single invoice.

```blade theme={null}
<x-subscribd-invoice-link :invoice="$invoice">
    Download PDF
</x-subscribd-invoice-link>
```

## Publishing and overriding views

```bash theme={null}
php artisan vendor:publish --tag=subscribd-views
```

Published views land in `resources/views/vendor/subscribd/components/`. Any published file overrides the package default.

## Next steps

* **[Livewire Components](/components/livewire)** — Reactive components with server-side state
* **[Theming](/components/theming)** — CSS variables and dark mode