Shadcn UI Stats Card Block
StatsCard9 is a metric card with a toggle control in the header to switch between two views. The default configuration shows MRR and ARR with a small tab switcher. The value and label below update based on the selected toggle state.
Light card surface with a compact tabs component in the header aligned right of the title. The tabs use small text and reduced padding to fit the card header. The value display transitions between states without animation. A subtle label below the value provides context for the current view.
This card is specifically designed for SaaS revenue metrics where both monthly and annual views are relevant. The toggle keeps both metrics accessible without requiring two separate cards. A practical pattern for founder dashboards and investor reporting views. The interaction is simple and immediate.
The toggle state is managed internally. The card can be extended to support different toggle pairs beyond MRR/ARR.
Dependencies
| Package | Type |
|---|---|
| react | NPM |
card @shadcn | Registry |
tabs @shadcn | Registry |