GenericCard

A themed KPI metric card that renders a title, a numeric value, and a colour-coded icon. Shadow, border radius, and hover animation come from the active MUI theme automatically.

📖 Storybook

Preview

Live preview↗ Open in Storybook

Import

import { GenericCard } from "@xocialive/ui-components";

Basic usage

import Home from "@mui/icons-material/Home";

<GenericCard title="Total Users" value="1,234" icon={Home} color="primary" />;

Color variants

<GenericCard title="Active" value={987}  icon={CheckCircle} color="success" />
<GenericCard title="Failed" value={12}   icon={Error}        color="error"   />
<GenericCard title="Pending" value={34}  icon={Warning}      color="warning" />
<GenericCard title="Info"   value="N/A"  icon={Info}         color="info"    />

Props

Prop	Type	Default	Description
title	string	—	Label shown above the value
value	string | number | null | undefined	—	Metric value; renders "-" when null/undefined
icon	React.ElementType	—	MUI SvgIcon component (not an element — pass the class itself)
color	"primary" | "success" | "error" | "warning" | "info" | "secondary"	"primary"	Palette colour used for the gradient, border, and shadow
sx	SxProps<Theme>	—	Root Paper style overrides

Notes

• All visual styling (shadow, border radius, hover lift) is derived from the active theme — do not hardcode boxShadow or borderRadius via sx.
• icon expects the component class (e.g. HomeIcon), not <HomeIcon />.