Skip to component details
EXEPERTAI LAB
ProductCapabilitiesTrustFAQUI GalleryBlogNews
Sign inOpen app ↗
ProductCapabilitiesTrustFAQUI GalleryBlogNewsSign in
← Browse gallery
Data·@exepert/ui / DataMetric

Data Metric

A compact readout for one measured value and its supporting context.

Open in Playground ↗All components

Variants and states

3 copy-ready examples

Positive trend

A comparison gives the value useful context.

Open in Playground ↗
Starting preview…
import { DataMetric } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <DataMetric label="Median latency" value="842 ms" change="12% faster" trend="up" />
  );
}

Usage

Use a clear label and format neighboring values consistently.

Props

  • label: ReactNode
  • value: ReactNode
  • change: ReactNode
  • trend: up | down | flat

Accessibility

  • Keep the metric label adjacent to its value.
  • Include units in visible text or an accessible description.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.0

import { DataMetric } from "@exepert/ui";

import "@exepert/ui/styles.css";

EXEPERTAI LAB

Compare supported models, inspect system behaviour, and understand the context around each result.

PrivacyTermsContact

EXEPERT AI is an independent software and AI research lab in Malaysia

Malaysia · hello@exepert.com

Open in Gmail ↗

© 2026 EXEPERT AI. All rights reserved.