Statistic

A component for displaying key metrics and statistics with optional badges and measurement units.

Usage

Basic Statistic

import { Statistic } from "@prisma/eclipse";

export function BasicStat() {
  return <Statistic title="Total Users" value={1234} />;
}

Live Example:

Total Users

1234

With Measurement Unit

import { Statistic } from "@prisma/eclipse";

export function StatWithMeasure() {
  return <Statistic title="Response Time" value={42} measure="ms" />;
}

Live Example:

Response Time

42ms

With Badge

import { Statistic } from "@prisma/eclipse";

export function StatWithBadge() {
  return (
    <Statistic
      title="API Status"
      value="99.9"
      measure="%"
      badge="Live"
      badgeColor="success"
    />
  );
}

Live Example:

API StatusLive

99.9%

Multiple Statistics Grid

import { Statistic } from "@prisma/eclipse";

export function StatsGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      <Statistic title="Total Queries" value="1.2M" badge="Today" badgeColor="ppg" />
      <Statistic title="Avg Response" value={45} measure="ms" badge="Improved" badgeColor="success" />
      <Statistic title="Active Users" value={847} badge="Online" badgeColor="success" />
    </div>
  );
}

Live Example:

Total QueriesToday

1.2M

Avg ResponseImproved

45ms

Active UsersOnline

847

Different Badge Colors

import { Statistic } from "@prisma/eclipse";

export function ColoredBadges() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
      <Statistic title="Cache Hits" value={95} measure="%" badge="Optimal" badgeColor="success" />
      <Statistic title="Error Rate" value={0.3} measure="%" badge="Warning" badgeColor="warning" />
      <Statistic title="Failed Requests" value={12} badge="Critical" badgeColor="error" />
      <Statistic title="Database Size" value={2.4} measure="GB" badge="Growing" badgeColor="neutral" />
    </div>
  );
}

Live Example:

Cache HitsOptimal

95%

Error RateWarning

0.3%

Failed RequestsCritical

Database SizeGrowing

2.4GB

Statistic Props

title - The label for the statistic (default: "Statistic")
value - The numeric or string value to display (default: 0)
measure - The unit of measurement (e.g., "ms", "%", "GB") (optional)
badge - Badge content to display next to the title (optional)
badgeColor - The color variant for the badge: "neutral", "ppg", "orm", "error", "success", "warning" (default: "ppg")

Features

✅ Large, bold typography for values
✅ Optional measurement units
✅ Integrated badge support with color variants
✅ Dashed border design for visual emphasis
✅ Responsive and flexible layout
✅ Eclipse design system tokens
✅ Supports both numeric and string values

Best Practices

Use concise titles that clearly describe what the statistic represents
Use badges to provide context like status, trends, or time periods
Keep values short and readable (use abbreviated formats like "1.2M" for large numbers)
Use measurement units consistently across related statistics
Group related statistics in a grid layout for easy comparison
Choose badge colors that match the semantic meaning:
- success - Positive metrics, goals achieved
- warning - Metrics requiring attention
- error - Critical issues or problems
- ppg - Prisma Pulse/Accelerate specific metrics
- orm - Prisma ORM specific metrics
- neutral - General information

Common Use Cases

Performance Metrics

<Statistic title="Response Time" value={42} measure="ms" badge="Fast" badgeColor="success" />
<Statistic title="Throughput" value="1.2K" measure="req/s" badge="Peak" badgeColor="ppg" />

Database Statistics

<Statistic title="Total Records" value="2.4M" badge="Growing" badgeColor="neutral" />
<Statistic title="Query Speed" value={15} measure="ms" badge="Optimized" badgeColor="success" />

Usage Analytics

<Statistic title="Active Users" value={1247} badge="Online" badgeColor="success" />
<Statistic title="Daily Queries" value="45.2K" badge="Today" badgeColor="ppg" />

Health Monitoring

<Statistic title="Uptime" value={99.99} measure="%" badge="Healthy" badgeColor="success" />
<Statistic title="Error Rate" value={0.01} measure="%" badge="Low" badgeColor="warning" />

Resource Usage

<Statistic title="Memory Usage" value={67} measure="%" badge="Normal" badgeColor="neutral" />
<Statistic title="CPU Load" value={23} measure="%" badge="Low" badgeColor="success" />

Typography & Spacing

The Statistic component uses:

Title: Uppercase, extra-small font (text-xs), gray-400 color
Value: Extra-large, bold font (text-4xl font-black)
Measure: Large font (text-lg), gray-500 color
Spacing: 6px horizontal, 5px vertical padding
Border: 2px dashed purple-400 border with rounded corners

Layout Tips

Single Column (Mobile)

<div className="space-y-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
</div>

Two Column Grid

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
  <Statistic title="Metric 3" value={300} />
  <Statistic title="Metric 4" value={400} />
</div>

Three Column Grid

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
  <Statistic title="Metric 3" value={300} />
</div>

Four Column Grid

<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <Statistic title="Metric 1" value={100} />
  <Statistic title="Metric 2" value={200} />
  <Statistic title="Metric 3" value={300} />
  <Statistic title="Metric 4" value={400} />
</div>

Accessibility

Clear visual hierarchy with distinct typography sizes
High contrast text colors for readability
Semantic HTML structure
Badge colors provide both visual and textual information
Responsive design works across all screen sizes
Title text is uppercase with tracking for improved legibility

Design Tokens

The component uses Eclipse design tokens:

Border: border-purple-400 with border-2 border-dashed
Radius: rounded-lg
Title: text-xs font-semibold tracking-widest text-gray-400 uppercase
Value: text-4xl font-black text-gray-900
Measure: text-lg text-gray-500
Spacing: px-6 py-5

Statistic

On this page