shadcn.io is not affiliated with official shadcn/ui
Customer Success Renewal Queue Profile Block for Radix UI
A customer success profile as a renewal queue: nine accounts renewing in 120 days with ARR and a health bar, figures for the ARR renewing and at risk in 90 days, an At risk only switch that dims, and a next action with a Done checkbox.
Installation
Overview
Give a customer success manager the accounts that matter this quarter, in the order they renew, with this renewal queue profile for React with Radix UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the manager: initials, name and role. Two figures sit on shared hairlines, both worked out from the rows and a typed "now": the ARR renewing in the next 90 days and how much of it is at risk. Under them a native table lists the accounts renewing within 120 days, soonest first, each with its renewal date, ARR in thousands and a health Progress bar named Healthy, Watch or At risk in words, with a glyph and a weight. A Switch dims everything that is not at risk instead of hiding it, so the table never changes height. Choosing an account shows its next action in a held band ("Exec call before 27 Oct") with a Done Checkbox that the row echoes. The bands are ruled by Guides. It's built from Switch, Progress, Checkbox, Badge, Avatar and Guides, with a CSS entrance only. For a customer-success platform, an account-management view or any queue ranked by a date.
FAQ
How do I fill it with my own accounts?
Edit ACCOUNTS. Each has an id, a name, an ISO renews date, the arr in dollars, a health score from 0 to 100, and a next action with the ISO day it is due by. AS_OF is the day the page treats as today and WINDOW_DAYS is how far ahead the first figure looks. Health below 40 is At risk, 40 to 69 is Watch and 70 and up is Healthy, so the word, the glyph and the bar all come from the score. The two figures are worked out from the same rows.
How are the two figures worked out?
The first adds the ARR of every account whose renewal is within 90 days of the typed "now"; the second adds the ARR of those that are At risk. An account renewing in 101 days is in the table but in neither figure, and moving AS_OF moves the window with it. Both are worked out when the page renders, never typed, and they are written in thousands of dollars.
Why does At risk only dim rows instead of hiding them?
So the table keeps its height and your place. Hiding rows would pull everything below the table up and back down every time the switch moved. Dimmed rows keep their text readable and stay in the tab order, and the status line says how many are shown, such as "3 of 9 shown, the rest dimmed". Every row can still be chosen.
What stays local in this demo?
Everything. The accounts are typed samples, and choosing a row or ticking Done changes only the page. To make it real, load the accounts from your customer-success platform and save the Done tick through your own API in the checkbox handler.
Is it accessible?
The table has a caption and column headings, each account name is a button that marks the chosen row with a bar and the current state, and the Done checkbox is named for the action it ticks and described by the account and its renewal. The switch is named, the status line is a polite live region present from the start, and health is a word and a glyph as well as a bar and a weight.