MetricMini

Stable
WCAG 2.2 evidence
RTL

A small figure with its label and a one-line caption, for secondary numbers such as a leave balance next to a profile. Use MetricCard for headline numbers with a trend or chart. Presentational: no state and no "use client", so it renders in React Server Components. The text order is label, value, caption, so screen readers get the name before the number; nothing is conveyed by colour (WCAG 1.3.1, 1.4.1) and long or translated text wraps (1.4.10, 1.4.12). Consumer duties: the label and caption wording and locale-aware formatting of the value.

import { MetricMini } from "@nexera-ui/react";

Loading example…

5
examples: 3
props: 1
live controls: 1
platform: 5
WCAG criteria: 3
blocks use it

Try every prop. Copy the code.

Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.

Loading…

label

Generated code

import { MetricMini } from "@nexera-ui/react";

<MetricMini />

Examples 4

The same examples as Storybook, rendered live. Open Code to copy one.

In a grid

Tiles in a responsive grid: they fill their cells, and a missing caption leaves the tile shorter.

Loading example…

app.tsx

import { MetricMini } from "@nexera-ui/react";

export function InAGrid() {
  return (
    <div className="grid grid-cols-[repeat(auto-fill,minmax(10rem,1fr))] gap-3">
      <MetricMini label="Annual leave" value="12 days" caption="of 20 left" />
      <MetricMini label="Sick leave" value="3 days" caption="of 10 left" />
      <MetricMini label="Remote days" value="8" caption="this month" />
      <MetricMini label="Overtime" value="4.5 h" />
    </div>
  );
}

Long content

Long and translated text wraps in the tile; nothing is truncated.

Loading example…

app.tsx

import { MetricMini } from "@nexera-ui/react";

<MetricMini
  label="Anzahl der verbleibenden Urlaubstage im laufenden Kalenderjahr"
  value="12 Tage"
  caption="von insgesamt 20 Tagen, einschliesslich Uebertrag"
/>;

Right to left

Right-to-left: the text aligns to the start (right) edge.

Loading example…

app.tsx

import { MetricMini } from "@nexera-ui/react";

<MetricMini label="الإجازة السنوية" value="١٢ يومًا" caption="من أصل ٢٠ متبقية" />;

Narrow container

A 14 rem container: the tile keeps its padding and the text wraps.

Loading example…

app.tsx

import { MetricMini } from "@nexera-ui/react";

<div className="max-w-56">
  <MetricMini label="Annual leave" value="12 days" caption="of 20 left" />
</div>;

Props 3

Press "Try it" on a card to load that prop into the playground.

label*Nexera

ReactNode

What is measured. Short noun phrase; it wraps instead of truncating. It is read first, so the value that follows always has its name.

value*Nexera

string

The figure. Format numbers, dates and currency for the reader's locale and include the unit; Intl.NumberFormat is the right tool.

captionNexera

ReactNode

Context for the figure. Shown when provided.

* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.

Accessible by default.

Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.

WCAG 2.2 evidence

3 direct · 2 supporting

1.3.1Info and RelationshipsLevel A · tested directly
1.4.1Use of ColorLevel A · tested directly
1.4.10ReflowLevel AA · supporting test
1.4.12Text SpacingLevel AA · supporting test
4.1.2Name, Role, ValueLevel A · tested directly

Fits any width.

Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.

0 px · drag the corner

Styling hooks

Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.

Usage

<MetricMini className="shadow-sm" />

Theme studio

MetricMini

Try every prop. Copy the code.

Examples 4

In a grid

Long content

Right to left

Narrow container

Props 3

Accessible by default.

WCAG 2.2 evidence

Fits any width.

Styling hooks

Used in blocks

Related components