# Subscription List

> Recurring payments with their next charge, trial and cancelled states, and what they cost together a month and a year.

Component · Life · Halo kit · [Live page](https://ui.twentyfirst.media/halo/components/SubscriptionList/)

Recurring payments with their next charge, trial and cancelled states, and what they cost together
a month and a year.

- `period` is `week`, `month` or `year`; the totals convert every active item.
- `onManage(id)` adds a "Manage {name}" button (cancel, change plan …).

## Example

```tsx
import { Panel, SubscriptionList } from "@twentyfirstmedia/halo";

export default function Preview() {
  return (
    <Panel title="Subscriptions" subtitle="6 active" style={{ maxWidth: 560 }}>
      <SubscriptionList
        onManage={() => {}}
        items={[
          {
            id: "stream",
            name: "Streaming",
            icon: "play",
            amount: 13.99,
            period: "month",
            next: new Date(2026, 10, 18),
            category: "Entertainment",
          },
          {
            id: "music",
            name: "Music",
            icon: "monitor",
            amount: 10.99,
            period: "month",
            next: new Date(2026, 10, 21),
            category: "Entertainment",
          },
          {
            id: "cloud",
            name: "Cloud storage",
            icon: "folder",
            amount: 99,
            period: "year",
            next: new Date(2027, 2, 4),
            category: "Work",
          },
          {
            id: "gym",
            name: "Gym",
            icon: "zap",
            amount: 34.9,
            period: "month",
            next: new Date(2026, 11, 1),
            category: "Health",
          },
          {
            id: "news",
            name: "News",
            icon: "book",
            amount: 2.5,
            period: "week",
            status: "trial",
            next: new Date(2026, 10, 20),
          },
          {
            id: "maps",
            name: "Maps pro",
            icon: "map",
            amount: 4.99,
            period: "month",
            status: "cancelled",
          },
        ]}
      />
    </Panel>
  );
}
```

## Props

### SubscriptionList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `Subscription[]` | Required |
| `currency?` | `string` |  |
| `onManage?` | `(id: string) => void` | "Manage" on a subscription (cancel, change plan …). |
| `totals?` | `boolean` | Hide the monthly and yearly totals. |
| `label?` | `string` | Accessible name (default "Subscriptions"). |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Panel

| Prop | Type | Notes |
| --- | --- | --- |
| `side?` | `boolean` |  |
| `title?` | `string` |  |
| `subtitle?` | `string` |  |
| `action?` | `ReactNode` |  |
| `children?` | `ReactNode` |  |
| `surface?` | `Surface` | `"glass"`: translucent glass over what is behind (maps, 3D, video, photos); `"solid"` opts out inside a glass `UIProvider`. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |