Stats Card

The StatsCard component is a simple card used to highlight a metric, value, and supporting description.

import { StatsCard } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
icon	ReactNode	-	Optional icon displayed above the title.
title	string	-	Main metric title or heading.
subTitle	ReactNode	-	Supporting number or secondary text.
description	ReactNode	-	Additional context or explanation.
classNames	StatsCardClassNames	-	Custom classes for wrapper, text, and icon sections.

StatsCardClassNames

interface StatsCardClassNames {
  wrapper?: string;
  title?: string;
  subTitle?: string;
  description?: string;
  icon?: string;
}

Usage

Basic example

<StatsCard
  icon={<Icon name="car" className="size-6 [&>path]:stroke-primary" />}
  title="Total Policies"
  subTitle="1,250"
  description="Compared to last month"
/>

With custom classes

<StatsCard
  title="Renewal Rate"
  subTitle="94%"
  description="Strong performance"
  classNames={{
    wrapper: "border border-primary/20 bg-primary/5",
    title: "text-primary",
    subTitle: "text-primary font-bold",
    description: "text-muted-foreground",
    icon: "size-7 text-primary",
  }}
/>

Features

• Minimal metric card layout for dashboards and summaries
• Supports icons, subtitle, and supporting text
• Custom class support via classNames
• Works well for KPI, overview, and performance panels