ComponentsData Display
Stat
Lightweight statistic display for KPIs and key metrics
The Stat component provides a minimal, composable way to display a numeric value with a descriptive label. It is ideal for profile pages, summary sections, and anywhere a simple value-label pair is needed without the card wrapper of DataCard.
Import
import { Stat } from '@nim-ui/components';Basic Usage
1,234
Total Users
Code
<Stat value="1,234" label="Total Users" />Multiple Stats
Group several stats together in a grid or flex layout for side-by-side comparison.
1.2K
Followers
456
Following
89
Posts
Code
<div className="grid grid-cols-3 gap-4">
<Stat value="1.2K" label="Followers" />
<Stat value="456" label="Following" />
<Stat value="89" label="Posts" />
</div>With Custom Styling
Apply additional Tailwind classes to customize the appearance.
98%
Success Rate
2.3s
Avg Response
Code
<Stat value="98%" label="Success Rate" className="text-green-600" />
<Stat value="2.3s" label="Avg Response" className="text-blue-600" />Props
| Name | Type | Default | Description |
|---|---|---|---|
value* | string | number | - | The statistic value to display |
label* | string | - | Descriptive label for the statistic |
className | string | - | Additional CSS classes to apply |
Usage Examples
User Profile Stats
function ProfileStats({ user }: { user: UserProfile }) {
return (
<div className="flex gap-8 border-t pt-4">
<Stat value={user.followers.toLocaleString()} label="Followers" />
<Stat value={user.following.toLocaleString()} label="Following" />
<Stat value={user.posts.toLocaleString()} label="Posts" />
</div>
);
}Server Health Summary
function ServerHealth() {
return (
<div className="grid grid-cols-2 gap-6 lg:grid-cols-4">
<Stat value="99.99%" label="Uptime" />
<Stat value="45ms" label="Latency" />
<Stat value="1.2K" label="Requests/sec" />
<Stat value="3.2GB" label="Memory Used" />
</div>
);
}Inline Stat Display
function OrderConfirmation({ order }: { order: Order }) {
return (
<div className="flex justify-between p-6 rounded-lg border">
<Stat value={`#${order.id}`} label="Order Number" />
<Stat value={order.total} label="Total" />
<Stat value={order.items.length} label="Items" />
</div>
);
}