Skip to content
Nim UI

Stat

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

Basic Stat

1,234

Total Users
View 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.

Stat Group

1.2K

Followers

456

Following

89

Posts
View 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.

Styled Stats

98%

Success Rate

2.3s

Avg Response
View 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>
  );
}
  • DataCard - Metric card with trend indicators and description
  • Badge - Status indicator labels
  • PriceTag - Price display with discounts