Component

Metric

Show key numbers with labels, descriptions, and optional trend state.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Metric } from "@chitrank2050/monoline-ui/metric"

Basic usage

<Metric
  size="md"
  value="14"
  label="Production apps"
  description="Shipped across portfolio, docs, and internal tools."
  trend="up"
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Metric highlights one value with a compact label, optional trend, and short explanation.

Avoid when

The value represents continuous progress, belongs in a dense table, or needs a chart to explain its trend.

Accessibility

Metric places its text in generic divs and shows trend with an arrow. Add spoken context when the direction has meaning.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgMetric scale

valueReactNodePrimary numeric or short value

labelReactNodeUppercase metric label

descriptionReactNode?Supporting copy

trendup | down | flatOptional trend glyph

Design tokens

Theme variables this component reads for color, spacing, and motion.

--surfaceCSS varMetric background

--borderCSS varMetric outline

--callout-tip-accentCSS varPositive trend colour

Implementation

The source used by the example above, including any state it needs.

import { Metric } from "@chitrank2050/monoline-ui/metric"

export function Stats() {
  return (
    <Metric
      value="9"
      label="Years"
      description="React, Node, and ML infrastructure."
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentProgressComponent · ReferenceReference→02ComponentData ListComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview