Components — Modern React UI Library

Examples

Basic Stat Card

Renders an icon, title, and a large numeric value.

Basic

import { Stats } from "@g4rcez/components";
import { UsersIcon } from "@phosphor-icons/react";

function BasicStat() {
  return (
    <Stats title="Total Users" Icon={UsersIcon}>
      1,284
    </Stats>
  );
}

The footer prop renders below a divider for trend or context information.

With footer

import { Stats } from "@g4rcez/components";
import { CurrencyDollarIcon, ArrowUpIcon } from "@phosphor-icons/react";

function StatWithFooter() {
  return (
    <Stats
      title="Monthly Revenue"
      Icon={CurrencyDollarIcon}
      footer={
        <span className="flex items-center gap-1 text-success text-sm">
          <ArrowUpIcon size={14} />
          12% from last month
        </span>
      }
    >
      $48,200
    </Stats>
  );
}

Stats Grid

Multiple stat cards in a responsive grid layout.

import { Stats } from "@g4rcez/components";
import { UsersIcon, CurrencyDollarIcon, ChartLineUpIcon, ArrowUpIcon, ArrowDownIcon } from "@phosphor-icons/react";

function StatsGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Stats
        title="Total Users"
        Icon={UsersIcon}
        footer={
          <span className="flex items-center gap-1 text-success text-sm">
            <ArrowUpIcon size={14} /> +24 this week
          </span>
        }
      >
        1,284
      </Stats>
      <Stats
        title="Revenue"
        Icon={CurrencyDollarIcon}
        footer={
          <span className="flex items-center gap-1 text-danger text-sm">
            <ArrowDownIcon size={14} /> -3% vs last month
          </span>
        }
      >
        $48,200
      </Stats>
      <Stats title="Growth" Icon={ChartLineUpIcon}>
        +18%
      </Stats>
    </div>
  );
}

When to use Stats

Use when

You need the documented Stats interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Stats behavior you need.

Accessibility

Keep the Stats labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.