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

# Component Reference

> Full reference for every subscribd Blade and Livewire component — props, events, slots, and publish tags

# Component Reference

This page documents every subscribd component with its props, events, slots, and publish tags.

All Livewire components live in the `subscribd::subscriber.*` and `subscribd::admin.*` namespaces.\
All Blade components are prefixed with `x-subscribd-`.

***

## Publish tags

| Tag               | What is published                                    |
| ----------------- | ---------------------------------------------------- |
| `subscribd-views` | Full view ownership — you manage updates manually    |
| `subscribd-css`   | CSS custom properties only — view logic auto-updates |

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

# Publish CSS variables only
php artisan vendor:publish --tag=subscribd-css

# Re-publish and diff against latest views
php artisan vendor:publish --tag=subscribd-views --force
```

> Always check the [CHANGELOG](/changelog) for **VIEW CHANGE** notices before re-publishing with `--force`.

***

## Subscriber components

### PlanPicker `(Livewire)`

Renders all active plans as selectable cards with upgrade/downgrade support for existing subscribers.

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

**Props**

| Prop                 | Type     | Default     | Description                                  |
| -------------------- | -------- | ----------- | -------------------------------------------- |
| `subscription-name`  | `string` | `'default'` | Named subscription slot to target            |
| `show-current-badge` | `bool`   | `true`      | Show "Current plan" badge on the active plan |
| `columns`            | `int`    | `3`         | Number of plan columns in the grid           |

**Events dispatched (browser)**

| Event                     | When                              |
| ------------------------- | --------------------------------- |
| `subscribd:plan-selected` | User clicks a plan card           |
| `subscribd:plan-changed`  | Subscription swapped successfully |

**Slots**

| Slot               | Description                                       |
| ------------------ | ------------------------------------------------- |
| `plan-card-footer` | Extra content below each plan card's feature list |
| `empty`            | Rendered when no active plans exist               |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/plan-picker.blade.php`

***

### Checkout `(Livewire)`

Renders the gateway-specific payment form for a given plan. Supports embedded (Stripe Elements, Braintree Drop-in, Square Web Payments) and overlay (Paddle) checkout modes.

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

**Required props**

| Prop   | Type   | Description                               |
| ------ | ------ | ----------------------------------------- |
| `plan` | `Plan` | The plan the customer is checking out for |

**Optional props**

| Prop                | Type           | Default     | Description                            |
| ------------------- | -------------- | ----------- | -------------------------------------- |
| `subscription-name` | `string`       | `'default'` | Named subscription slot                |
| `coupon-code`       | `string\|null` | `null`      | Pre-applied coupon code                |
| `return-url`        | `string\|null` | `null`      | Redirect URL after successful checkout |

**Events dispatched (browser)**

| Event                                | Payload              | When                          |
| ------------------------------------ | -------------------- | ----------------------------- |
| `subscribd:checkout-complete`        | `{ subscriptionId }` | Payment succeeded             |
| `subscribd:checkout-failed`          | `{ message }`        | Payment failed                |
| `subscribd:checkout-requires-action` | `{ clientSecret }`   | SCA/3DS confirmation required |

**Slots**

| Slot           | Description                                 |
| -------------- | ------------------------------------------- |
| `payment-form` | Override the entire payment form (advanced) |
| `legal`        | Legal copy below the submit button          |
| `cta`          | Custom text for the subscribe button        |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/checkout.blade.php`

***

### BillingDashboard `(Livewire)`

Full self-service billing portal. Composes PlanPicker, SubscriptionManager, InvoiceHistory, PaymentMethods, CouponRedeem, and TrialStatus into a single tabbed dashboard.

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

**Optional props**

| Prop                | Type          | Default     | Description                                                           |
| ------------------- | ------------- | ----------- | --------------------------------------------------------------------- |
| `subscription-name` | `string`      | `'default'` | Named subscription slot                                               |
| `tabs`              | `array\|null` | `null`      | Whitelist of visible tab IDs: `plan`, `invoices`, `payment`, `coupon` |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/billing-dashboard.blade.php`

***

### SubscriptionManager `(Livewire)`

Displays the current subscription with status, plan name, next billing date, and self-service actions (cancel, resume, trial convert, trial extend).

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

**Optional props**

| Prop                | Type     | Default     | Description             |
| ------------------- | -------- | ----------- | ----------------------- |
| `subscription-name` | `string` | `'default'` | Named subscription slot |
| `allow-cancel`      | `bool`   | `true`      | Show cancel button      |
| `allow-resume`      | `bool`   | `true`      | Show resume button      |

**Events dispatched (browser)**

| Event                             | When                  |
| --------------------------------- | --------------------- |
| `subscribd:subscription-canceled` | Subscription canceled |
| `subscribd:subscription-resumed`  | Subscription resumed  |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/subscription-manager.blade.php`

***

### PaymentMethods `(Livewire)`

Lists stored payment methods with update and set-default actions.

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

**Events dispatched (browser)**

| Event                              | When                     |
| ---------------------------------- | ------------------------ |
| `subscribd:payment-method-updated` | New payment method saved |
| `subscribd:payment-method-removed` | Payment method deleted   |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/payment-methods.blade.php`

***

### InvoiceHistory `(Livewire)`

Paginated invoice list with PDF download links.

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

**Optional props**

| Prop                 | Type   | Default | Description                 |
| -------------------- | ------ | ------- | --------------------------- |
| `per-page`           | `int`  | `10`    | Invoices per page           |
| `show-status-filter` | `bool` | `true`  | Show status filter dropdown |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/invoice-history.blade.php`

***

### CouponRedeem `(Livewire)`

Coupon code input widget for custom checkout flows. Validates and stores coupon code in session.

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

**Optional props**

| Prop                | Type         | Default     | Description                                   |
| ------------------- | ------------ | ----------- | --------------------------------------------- |
| `plan`              | `Plan\|null` | `null`      | When set, validates coupon against this plan  |
| `subscription-name` | `string`     | `'default'` | Named slot to apply coupon to (post-checkout) |

**Events dispatched (browser)**

| Event                        | Payload              | When            |
| ---------------------------- | -------------------- | --------------- |
| `subscribd:coupon-validated` | `{ code, discount }` | Coupon accepted |
| `subscribd:coupon-removed`   | —                    | Coupon removed  |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/coupon-redeem.blade.php`

***

### TrialStatus `(Livewire)`

Displays trial days remaining with Convert and Extend actions.

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

**Optional props**

| Prop                | Type     | Default     | Description                                                              |
| ------------------- | -------- | ----------- | ------------------------------------------------------------------------ |
| `subscription-name` | `string` | `'default'` | Named subscription slot                                                  |
| `show-extend`       | `bool`   | `true`      | Show extend button (only rendered when gateway supports trial extension) |

**Events dispatched (browser)**

| Event                       | When                           |
| --------------------------- | ------------------------------ |
| `subscribd:trial-converted` | ConvertTrialToActive succeeded |
| `subscribd:trial-extended`  | Trial extended                 |
| `subscribd:trial-canceled`  | Trial canceled                 |

**Published view path:** `resources/views/vendor/subscribd/livewire/subscriber/trial-status.blade.php`

***

## Admin components

### Admin\BillingDashboard `(Livewire)`

Admin overview dashboard with KPI widgets (MRR, ARR, Active Subscriptions, Churn Rate, Trial Conversion).

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

**Published view path:** `resources/views/vendor/subscribd/livewire/admin/billing-dashboard.blade.php`

***

### Admin\SubscriptionList `(Livewire)`

Searchable, filterable subscription table with inline management actions.

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

**Optional props**

| Prop            | Type           | Default | Description                                                   |
| --------------- | -------------- | ------- | ------------------------------------------------------------- |
| `filter-status` | `string\|null` | `null`  | Pre-filter by status (`active`, `trialing`, `past_due`, etc.) |
| `filter-plan`   | `string\|null` | `null`  | Pre-filter by plan key                                        |

**Published view path:** `resources/views/vendor/subscribd/livewire/admin/subscription-list.blade.php`

***

### Admin\PlanManager `(Livewire)`

Create, update, and reorder plans and plan items.

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

**Published view path:** `resources/views/vendor/subscribd/livewire/admin/plan-manager.blade.php`

***

### Admin\CouponManager `(Livewire)`

Create and manage coupons, view redemption counts, and expire coupons early.

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

**Published view path:** `resources/views/vendor/subscribd/livewire/admin/coupon-manager.blade.php`

***

### Admin\BulkOperations `(Livewire)`

UI for running bulk plan swaps, cancellations, price overrides, and coupon campaigns.

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

**Published view path:** `resources/views/vendor/subscribd/livewire/admin/bulk-operations.blade.php`

***

## Blade components

### x-subscribd-plan-picker

Renders all active plans as server-rendered selectable cards. No reactivity — form submit triggers a page reload.

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

**Required props**

| Prop    | Type               | Description      |
| ------- | ------------------ | ---------------- |
| `plans` | `Collection<Plan>` | Plans to display |

**Optional props**

| Prop              | Type         | Default                | Description                         |
| ----------------- | ------------ | ---------------------- | ----------------------------------- |
| `current-plan`    | `Plan\|null` | `null`                 | Highlights the current plan         |
| `subscribe-route` | `string`     | `'subscribd.checkout'` | Route name for the subscribe action |

**Slots:** `plan-card-footer` on each card.

***

### x-subscribd-checkout

Server-rendered checkout form. For embedded gateways, renders a gateway-specific JS snippet. Pass the `gateway-client-key` prop to initialise the payment SDK.

```blade theme={null}
<x-subscribd-checkout :plan="$plan" :setup-intent="$setupIntent" />
```

**Required props**

| Prop           | Type    | Description                                      |
| -------------- | ------- | ------------------------------------------------ |
| `plan`         | `Plan`  | The plan being purchased                         |
| `setup-intent` | `array` | Array from `BillingGateway::createSetupIntent()` |

**Optional props**

| Prop         | Type     | Default    | Description            |
| ------------ | -------- | ---------- | ---------------------- |
| `return-url` | `string` | `url('/')` | Redirect after payment |

**Slots:** `legal` (below submit button).

***

### x-subscribd-subscription-manager

Read-only subscription summary card. Shows plan name, status badge, next billing date, and grace period countdown if applicable.

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

**Required props**

| Prop           | Type           | Description             |
| -------------- | -------------- | ----------------------- |
| `subscription` | `Subscription` | Subscription to display |

***

### x-subscribd-payment-methods

Read-only list of stored payment methods.

```blade theme={null}
<x-subscribd-payment-methods :methods="$user->paymentMethods" />
```

**Required props**

| Prop      | Type                        | Description                |
| --------- | --------------------------- | -------------------------- |
| `methods` | `Collection<PaymentMethod>` | Payment methods to display |

***

### x-subscribd-invoice-history

Non-paginated invoice table. Best for recent-invoice widgets.

```blade theme={null}
<x-subscribd-invoice-history :invoices="$user->invoices()->take(5)->get()" />
```

**Required props**

| Prop       | Type                  | Description         |
| ---------- | --------------------- | ------------------- |
| `invoices` | `Collection<Invoice>` | Invoices to display |

***

### x-subscribd-coupon-redeem

Inline coupon entry form. Submits a POST request to the coupon validation endpoint.

```blade theme={null}
<x-subscribd-coupon-redeem :action="route('subscribd.coupon.validate')" />
```

**Required props**

| Prop     | Type     | Description     |
| -------- | -------- | --------------- |
| `action` | `string` | Form action URL |

***

### x-subscribd-subscription-badge

Status pill badge for the current subscription.

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

Renders nothing when `$subscription` is null.

***

### x-subscribd-trial-status

Read-only trial status text. Shows days remaining. No action buttons.

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

Renders nothing when the subscription is not on trial.

***

## Next steps

* **[Theming](/components/theming)** — CSS custom properties and dark mode
* **[Localization](/components/localization)** — Translate component strings
* **[Livewire Components](/components/livewire)** — Overview of all Livewire components
* **[Blade Components](/components/blade)** — Overview of all Blade components