shadcn.io is not affiliated with official shadcn/ui
Subscription Overview Dashboard Block for React
A subscriber ledger filtered by lifecycle state, with a row menu that retries a payment, extends a trial or pauses, totals that follow the rows in view and a real CSV download of them.
Installation
Overview
Keep the subscribers who need you in view, with this subscription ledger for React with Base UI. A Toggle Group in the header filters ten subscribers by Active, Trialing, Past due, Cancelling or Paused, each with its count, and the sentence above the table adds up the MRR of the rows in view. The table shows initials and name, plan, MRR, the day it renews and the state in words, and each row has a Dropdown Menu whose choices fit its state: Retry payment moves a past due subscriber to Active, Extend trial 7 days moves its date, Pause and Resume change its state. The foot's Shine Button retries every past due payment at once, and a button downloads the visible rows as a CSV file. It's built from Toggle Group, Native Select, Dropdown Menu, Download Trigger, Avatar and Guides. For billing admin and support consoles.
FAQ
How do I fill it with my own subscribers?
Edit SUBSCRIBERS: each has a name, a plan, MRR in dollars, the ISO day it renews or its trial ends, and a state. The filter counts, the sentence's totals, the past due count in the foot and the CSV are all worked out from the rows, so they never disagree. Dates are plain ISO days; none is read from the clock.
What do the row choices do?
Each state allows a few: Retry payment for Past due, Extend trial 7 days for Trialing, Keep subscription for Cancelling, Resume for Paused, and Pause for Active, Trialing and Past due. A choice changes the row in this page, the row leaves the current filter when its state changes, and a polite line says what happened. Focus then moves to the table so it is not lost with the row.
What is in the CSV?
A header row and one row per subscriber in the filter you are looking at: name, plan, MRR, renews and state. It is a real file built in the page, with anything a spreadsheet could read as a formula kept as text. Nothing is uploaded.
What stays local, and how do I wire it for real?
Everything: no payment is retried, no trial is extended and nothing is sent. To make it real, call your billing provider from the menu's handlers and from Retry all, reload the rows from it, and keep the same state names.
How does it look on a phone?
The filter becomes a select, the table keeps each subscriber with their plan, MRR and renewal day on a second line, the state and the menu, and the action foot stays pinned to the bottom of the screen. The table holds its height as the filter changes, and an empty state appears when nobody matches.