# Subscription Lifecycle block

> Subscription Management Workspace with Quick-Action Cards and Lifecycle Grid

Manage subscriptions across active, trialing, past due, and canceled states. Quick-action cards with budget progress lead a filterable, searchable grid with row actions. ReUI Frame, DataGrid; shadcn Tabs, Select, Avatar. Billing ops, revenue recovery

- Type: Pro block
- Category: [Billing](https://web.dev.reui.io/blocks/solutions/billing.md)
- Page: https://web.dev.reui.io/blocks/solutions/billing/solution-billing-3
- MCP: `get_block("solution-billing-3")`
- Built with: Avatar, Badge, Button, Data Grid, Dropdown Menu, Field, Frame, Input Group, Item, Popover, Progress, Rating, Select, Separator, Switch, Tabs, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Quick action cards with budget bars over lifecycle tabs, a star health rating, a readiness ring and a column settings popover

## Agent notes

- The `footerValue` budget percentages in `QUICK_ACTIONS` are literal numbers, and each card button only shows a toast
- `handleRowAction` and `handleAssignOwner` only show an info toast for open, change plan, pause, cancel and owners; `SUBSCRIPTIONS` never changes
- Replace `SUBSCRIPTIONS` in data.tsx; Settings state such as `stickyHeader` and `visibleProperties` is local and not persisted

## When not to use

- A flat invoice ledger with bulk reminders and a past due recovery alert: use [Invoice Ledger](https://web.dev.reui.io/blocks/solutions/billing/solution-billing-1.md) (`get_block("solution-billing-1")`)
- A payments table with a filter bar and skeleton rows while it reloads: use [Billing Transactions](https://web.dev.reui.io/blocks/data-grid/filtering/data-grid-filtering-1.md) (`get_block("data-grid-filtering-1")`)

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/solution-billing-3
```

## About Billing blocks

### When to use

- A back office for billing operators: the invoice ledger, subscriptions, a dunning queue and metered usage
- Plan and discount admin: editing the plan catalog and coupon rules, or moving a subscription to a new tier
- One customer's billing account seen by staff, or an invoice built line by line and then sent

### When not to use

- A public page where visitors compare plan tiers and pick one before signing up: use the [Pricing blocks](https://web.dev.reui.io/blocks/marketing/pricing.md)
- A signed in customer's own settings page showing their plan, usage and invoices: use the [Profile blocks](https://web.dev.reui.io/blocks/application/profile.md)
- A stepped intake flow with no money in it, such as vendor onboarding or team invites: use the [Wizard blocks](https://web.dev.reui.io/blocks/application/wizard.md)

### Agent notes

- Each block sets a `min-h-svh` wrapper with `bg-background`, padding and a max width in page.tsx or its root component; drop it inside an app shell
- No block calls an API: sends, retries, saves and exports update `useState` or fire a sonner `toast`; post to your billing backend from those handlers

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.