Components

Revenue Card

Pronew

A dashboard stat card with a value, a trend and a sparkline.

Monthly recurring revenue

$48,240

12.4%

Up $5,310 from September across 1,204 paying accounts.

Updated 5 minutes ago

Installation

npx shadcn@latest add @blank-pro/revenue-card

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import {
  RevenueCard,
  RevenueCardChart,
  RevenueCardContent,
  RevenueCardDelta,
  RevenueCardHeader,
  RevenueCardLabel,
  RevenueCardValue,
} from "@/components/ui/revenue-card"

<RevenueCard>
  <RevenueCardHeader>
    <RevenueCardLabel>Monthly recurring revenue</RevenueCardLabel>
  </RevenueCardHeader>
  <RevenueCardContent>
    <RevenueCardValue>$48,240</RevenueCardValue>
    <RevenueCardDelta trend="up">12.4%</RevenueCardDelta>
  </RevenueCardContent>
  <RevenueCardChart data={[31, 33, 32, 35, 36, 40, 44, 48]} />
</RevenueCard>

The delta states its direction with trend rather than reading the sign of a number, because "down" is good news for churn, costs or response times. Pass intent="positive" and a falling arrow turns green.

RevenueCardChart draws a sparkline from a plain array, with no chart library. It colors itself with currentColor, so a text color class recolors both the line and its fill. Give it an aria-label that states the trend in words; without one it is hidden from assistive technology.

Examples

KPI row

Net revenue

$182.4k

8.1%

vs. last quarter

Churn rate

2.1%

0.6 pts

Lower is better

Refunds

$3,904

14%

Mostly annual plans