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

# Livewire Components

> Ready-to-use Livewire components for subscription billing workflows

# Livewire Components

Subscribd ships a set of pre-built Livewire components in two namespaces:

* `subscribd::subscriber.*` — Customer-facing components for your subscriber UI
* `subscribd::admin.*` — Admin-facing components for internal billing management

All components are published via `subscribd-views` and can be overridden in your application.

## Subscriber components

### subscriber.plan-picker

A full-featured plan selection and checkout component. Renders plan cards, handles upgrades and downgrades for existing subscribers, and routes checkout to the active gateway.

```blade theme={null}
<livewire:subscribd::subscriber.plan-picker />
```

Pass a specific subscription slot name when working with multiple subscriptions:

```blade theme={null}
<livewire:subscribd::subscriber.plan-picker subscription-name="team" />
```

### subscriber.checkout

A standalone checkout component for custom checkout flows. Use this when you want full control over the plan selection UI but still need a gateway-specific payment form.

```blade theme={null}
<livewire:subscribd::subscriber.checkout :plan="$plan" />
```

### subscriber.portal

The full self-service billing portal — plan picker, current subscription details, invoice history, coupon redemption, and payment method management in a single component.

```blade theme={null}
<livewire:subscribd::subscriber.portal />
```

### subscriber.invoice-history

Paginated invoice list with PDF download links.

```blade theme={null}
<livewire:subscribd::subscriber.invoice-history />

{{-- Custom page size --}}
<livewire:subscribd::subscriber.invoice-history :per-page="25" />
```

### subscriber.payment-method

Allows the customer to update the payment method for their active subscription.

```blade theme={null}
<livewire:subscribd::subscriber.payment-method />
```

### subscriber.coupon-redeem

A coupon validation widget for custom checkout flows. Validates the coupon code, stores it in the checkout session, and dispatches browser events for the host page to react to.

```blade theme={null}
<livewire:subscribd::subscriber.coupon-redeem />

{{-- Scope to a named subscription --}}
<livewire:subscribd::subscriber.coupon-redeem subscription-name="team" />
```

Dispatches `subscribd:coupon-validated` (with `{ code }`) and `subscribd:coupon-removed`. See [Applying Coupons](/coupons/applying) for the full integration guide.

### subscriber.trial-status

Displays trial status and days remaining. Useful on dashboards or billing pages to prompt trial users to convert.

```blade theme={null}
<livewire:subscribd::subscriber.trial-status />
```

### subscriber.subscription-status

Shows the current subscription status, plan name, next billing date, and available self-service actions (cancel, resume, upgrade).

```blade theme={null}
<livewire:subscribd::subscriber.subscription-status />
```

## Admin components

### admin.subscription-list

A searchable, filterable subscription table. Supports filtering by status, plan, and gateway.

```blade theme={null}
<livewire:subscribd::admin.subscription-list />
```

### admin.subscription-view

Full subscription detail view with all management actions (swap plan, cancel, resume, extend trial, convert trial, transfer). The standalone equivalent of the Filament `SubscriptionResource` view page, without the Filament dependency.

```blade theme={null}
<livewire:subscribd::admin.subscription-view :subscription="$subscription" />
```

### admin.invoice-list

Paginated, searchable invoice list for admin use.

```blade theme={null}
<livewire:subscribd::admin.invoice-list />
```

## Publishing and overriding views

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

This publishes all component views to `resources/views/vendor/subscribd/`. Any file you publish takes precedence over the package default.

## Next steps

* **[Blade Components](/components/blade)** — Non-reactive HTML components
* **[Theming](/components/theming)** — Customise component appearance with CSS variables
* **[Localization](/components/localization)** — Translate component strings