Pro Components

Base Components

Stats Card 4

Metric card showing a total value with a breakdown list of contributing segments below.

Example

Revenue by Device
$50,000
Desktop
$32,45065%
Mobile
$12,30025%
Tablet
$5,25010%

Introduction

Stats Card 4 shows a total with a breakdown list:
  • Total: Bold total value at the top.
  • Breakdown: List of segments with colored dot, label, value, and optional percentage.
  • Use case: Revenue by source, users by plan, or any segmented total.
Uses Card. No extra dependencies.

Usage

import { StatsCard6 } from "@/components/ui/stats-card-6";

<StatsCard6
  title="Revenue"
  total="$24,800"
  items={[
    { label: "Subscription", value: "$18,200", percent: 73 },
    { label: "One-time", value: "$4,200", percent: 17 },
    { label: "Add-ons", value: "$2,400", percent: 10 },
  ]}
/>

On this page

ExampleIntroductionInstallationUsage