Stats Card

Display key metrics with trends and icons.

Installation

bash

npx @smicolon/fasla-ui@latest add stats-card

Run init once per project before adding components. See Installation.

Preview

Revenue

SAR 48,200

+12.5%vs last month

Orders

1,284

+8%vs last month

Returns

-2.1%vs last month

Features

Title and value display
Trend indicator (up/down with percentage)
Optional icon
Description text
Loading state
StatsGrid for layout

Props

Prop	Type	Default	Description
`title`	`string`	—	Label above the value.
`value`	`string \| number`	—	The main value.
`description`	`string`	—	Text below the value.
`icon`	`ReactNode`	—	Icon in the corner.
`trend`	`{ value, direction: "up" \| "down" \| "neutral" }`	—	Change, with an up or down arrow.
`loading`	`boolean`	`false`	Shows a skeleton while loading.
`StatsGrid`	`{ columns: 2 \| 3 \| 4 }`	—	Lays the cards out in 2, 3 or 4 columns.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

import { StatsCard, StatsGrid } from "@/components/blocks/stats-card"

export function StoreStats() {
  return (
    <StatsGrid columns={3}>
      <StatsCard
        title="Revenue"
        value="SAR 48,200"
        description="vs last month"
        trend={{ value: 12.5, direction: "up" }}
      />
      <StatsCard
        title="Orders"
        value="1,284"
        description="vs last month"
        trend={{ value: 8, direction: "up" }}
      />
      <StatsCard
        title="Returns"
        value="36"
        description="vs last month"
        trend={{ value: -2.1, direction: "down" }}
      />
    </StatsGrid>
  )
}