A customer health card: score gauge, renewal countdown, five signals, an AI risk summary and the next step.
Preview
npx shadcn add @fetaui/account-healthNorthwind
Enterprise · $184,000 ARR
Needs attention
Down 9 pts in 30 days
Renews Dec 13, 2026
47days left
- 61%At risk
Product usage
Analytics down 18%
- 89%Good
Seat utilization
188 of 212 seats active
- 14 openAt risk
Support tickets
3 P1 on CSV exports
- +32Watch
NPS
Was +41 last quarter
- PaidGood
Invoice status
Paid Oct 1, net 30
Risk summary
Bitter modelAnalytics usage fell 18% after their data team moved weekly reporting to another tool, and 3 P1 tickets about CSV export timeouts are still open. Seats and billing are healthy, so this reads as a product gap, not a budget cut.
Schedule a QBR with Northwind
Usage dropped 18% in Analytics
Northwind
Enterprise · $184,000 ARR
Needs attention
Down 9 pts in 30 days
Renews Dec 13, 2026
47days left
- 61%At risk
Product usage
Analytics down 18%
- 89%Good
Seat utilization
188 of 212 seats active
- 14 openAt risk
Support tickets
3 P1 on CSV exports
- +32Watch
NPS
Was +41 last quarter
- PaidGood
Invoice status
Paid Oct 1, net 30
Risk summary
Bitter modelAnalytics usage fell 18% after their data team moved weekly reporting to another tool, and 3 P1 tickets about CSV export timeouts are still open. Seats and billing are healthy, so this reads as a product gap, not a budget cut.
Schedule a QBR with Northwind
Usage dropped 18% in Analytics
Northwind
Enterprise · $184,000 ARR
Needs attention
Down 9 pts in 30 days
Renews Dec 13, 2026
47days left
- 61%At risk
Product usage
Analytics down 18%
- 89%Good
Seat utilization
188 of 212 seats active
- 14 openAt risk
Support tickets
3 P1 on CSV exports
- +32Watch
NPS
Was +41 last quarter
- PaidGood
Invoice status
Paid Oct 1, net 30
Risk summary
Bitter modelRefreshing the summarySchedule a QBR with Northwind
Usage dropped 18% in Analytics
Installation
npx shadcn add @fetaui/account-health
Accessibility
- A region named by the account.
- Status is never colour only: icons and labels repeat it.
- The gauge and the renewal bar have text names. Sparklines are decorative because the row states the value.
- The summary sets aria-busy while it refreshes.
Motion
- The panel fades and rises 8 px in 400 ms.
- Rows fade in 240 ms, 40 ms apart.
- Changing the period tweens the gauge, sparklines and counts in 240 ms.
- The summary shows a shimmering skeleton while it refreshes, and the shimmer pauses offscreen.
- With reduced motion, the panel appears, values swap and the skeleton is static.
Responsive behavior
- 580 px on Web and 358 px on Mobile.
- Mobile drops the sparklines and model name rather than shrinking text.
- The renewal stacks under the score, and the action Button under its text.
Performance
- A period change updates values in place: paths morph and digits roll, and nothing remounts.
- Numbers count by writing text directly, so they never re-render per frame.
- The skeleton replaces only the summary, so scores stay readable while it refreshes.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import AccountHealth and HEALTH_ICONS from @/components/fetaui/account-health.
- periods maps a label to its snapshot, and the first key is the default. Each snapshot holds score, signals and summary.
- No model runs here. model is a label, and onRefresh and loading are yours to wire to a real summary.
- scoreStatus sets the color, not the score. onAction is yours. Composes Button, Icon Button, Skeleton, Spinner and ToggleGroup.