shadcn.io is not affiliated with official shadcn/ui
Customer Health Dashboard Block for Svelte
Eight accounts with a health score and risk word worked out from four weighted factors, a Scoring model popover with a slider per weight, and a side cell that shows what makes the chosen score.
Installation
Overview
Score your accounts and see why, with this customer health panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a table of eight accounts with health out of 100, a risk word (Healthy, Watch or At risk, told apart by a filled, half or hollow dot), NPS, last activity and ARR. Health is four factor scores (Usage, Support, Billing and Engagement) multiplied by their weights. The "Scoring model" button in the header opens a Popover with a Slider for each weight; whatever you set is scaled to shares of 100, and every score, risk word and the sentence in the header are worked out again. Choosing an account fills the side cell with a stacked bar of its factor contributions, a list of points per factor and three reasons: the factor that drags it down, the one that holds it up and a typed note. The accounts and factor scores are typed and nothing is saved. Below the large breakpoint NPS, activity and ARR fold into a line under the account name, and below the medium one the side cell stacks under the table. It's built from Popover, Slider, Button and Guides. For customer success teams.
FAQ
How do I fill it with my accounts?
Edit ACCOUNTS and FACTORS. Each account has its four factor scores out of 100 in the factors' order, its NPS, ARR, last activity date and a one-line note. Health, risk, the contribution bar and the reasons are derived from those scores and the current weights.
How are the weights turned into a score?
The four slider values are scaled so they add up to exactly 100 (the leftover points go to the largest remainders), and the health score is the sum of each factor score times its share, rounded. Healthy is 75 or more, Watch 50 to 74 and At risk below 50. The popover shows each factor's share, and the status line repeats the shares after you stop moving a slider.
Where do the reasons come from?
The first two are computed: the lowest factor and how far it is under a target of 70, and the highest factor with the points it adds at the current weight. The third is the account's typed note, which is the only part you write by hand.
What stays local, and how do I wire it for real?
The weights live in component state and reset when the page reloads, and nothing is written anywhere. To make it real, compute factor scores in your warehouse, store the weights per workspace so they apply to everyone, and link each risk word to the playbook your team runs.