Stats Card

v0.4.0

Display dashboard metrics with trend indicators

Live Demo

Total Users

2,543

+12% from last month

Revenue

$45,231

+8% from last month

Sales

$12,234

-3% from last month

Active Orders

573

Installation

npm install noorui-rtl

Usage

import { StatsCard } from 'noorui-rtl'
import { Users } from 'lucide-react'

<StatsCard
  icon={<Users className="h-4 w-4" />}
  label="Total Users"
  value="2,543"
  trend={12}
  trendLabel="from last month"
/>

// Without trend
<StatsCard
  icon={<Icon />}
  label="Metric Name"
  value="1,234"
/>

Props

Name	Type	Default	Description
`icon` Required	`React.ReactNode`	`undefined`	Icon React node to display in the header
`label` Required	`string`	`undefined`	Label text for the metric
`value` Required	`string \| number`	`undefined`	Value to display (string or number)
`trend`	`number`	`undefined`	Optional trend percentage (positive or negative number)
`trendLabel`	`string`	`undefined`	Optional trend label (e.g., "vs last month")
`className`	`string`	`undefined`	Additional CSS classes to apply

Best Practices

Do

✓ Use consistent icons across the dashboard
✓ Provide context for trend indicators (e.g., "vs last month")
✓ Use appropriate colors for trends (green for positive, red for negative)
✓ Keep labels short and descriptive
✓ Show loading state while fetching data

Don't

✗ Don't use different icons for the same type of metrics
✗ Don't show trends without time context
✗ Don't use red for positive trends or green for negative
✗ Don't use long or ambiguous labels
✗ Don't display stale data without a loading indicator