Skip to content
Twentyfirst UIPro

Subscription List

Life · SubscriptionList, Panel

View as Markdown

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 …).

Subscriptions

6 active

  • StreamingEntertainment · Next on Nov 18€13.99/ month
  • MusicEntertainment · Next on Nov 21€10.99/ month
  • Cloud storageWork · Next on Mar 4€99.00/ year
  • GymHealth · Next on Dec 1€34.90/ month
  • NewsNext on Nov 20Trial€2.50/ week
  • Maps proCancelled€4.99/ month
€78.96 a month€948 a year

Props

SubscriptionList

PropTypeNotes
itemsSubscription[]Required
currency?string
onManage?(id: string) => void"Manage" on a subscription (cancel, change plan …).
totals?booleanHide the monthly and yearly totals.
label?stringAccessible name (default "Subscriptions").
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.

Panel

PropTypeNotes
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?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.