Metric components

Powerful and customizable React metric components built for modern applications and websites. These metric components are built using React Aria and styled with Tailwind CSS.

Metrics example

Get the code

View 24 hours

2,000

100%
vs last month

Installation

You can add this metrics component using our CLI or manually:

npx untitledui@latest add metrics

Metrics examples

Below are examples and variations of this metrics component:

Simple

Get the code

Views 24 hours

2,000

100%

Metrics icon 01

Get the code

View 24 hours

2,000

100%

Metrics icon 02

Get the code

View 24 hours

2,000

100%
vs last month

Metrics icon actions 02

Get the code

View 24 hours

2,000

100%
vs last month
View report

Metrics icon 03

Get the code

View 24 hours

2,000

100%
vs last month

Metrics icon actions 03

Get the code

View 24 hours

2,000

100%
vs last month
View report

Metrics icon 04

Get the code

View 24 hours

2,000

100%

Chart 01

Get the code

View 24 hours

2,000

100%
vs last month

Chart actions 01

Get the code

View 24 hours

2,000

100%
vs last month
View report

Chart 02

Get the code

View 24 hours

2,000

100%

Chart 03

Get the code

View 24 hours

2,000

100%
vs last month

Chart actions 03

Get the code

View 24 hours

2,000

100%
vs last month
View report

Chart 04

Get the code

View 24 hours

2,000

100%
vs last month

Chart actions 04

Get the code

View 24 hours

2,000

100%
vs last month
View report

API reference

MetricChangeIndicator

Import MetricChangeIndicator from @/components/application/metrics/metrics. Renders a <div> element.

MetricChangeIndicator props
PropTypeDefaultDescription
type* (required)
"simple""trend""modern"
—Visual style of the indicator: "simple" uses a straight arrow, "trend" a trend line arrow, and "modern" a diagonal arrow inside a bordered pill.
trend* (required)
"positive""negative"
—Direction of the change. "positive" points the arrow up and tints it green, "negative" points it down and tints it red; outside the "modern" style the value text is tinted to match.
valuestring—The change amount rendered next to the arrow, such as "100%".
classNamestring—Additional CSS classes to apply to the indicator wrapper.

MetricsChart01

Import MetricsChart01 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsChart01 props
PropTypeDefaultDescription
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Heading shown at the top of the card, naming the metric or the period it covers.
changestring"100%"The change amount rendered inside the indicator, such as "100%".
changeDescriptionstring"vs last month"Supporting text shown after the change indicator, typically the comparison period.
actionsbooleantrueWhether to render the actions dropdown button in the top-right corner of the card.
trend
"positive""negative"
"positive"Direction of the change. It sets the indicator's arrow direction and tints both the indicator and the area chart green when positive or red when negative.
chartData{ value: number; highlight?: boolean; }[]lineDataPoints plotted in the fixed-size area chart. Each entry's value is its height, and highlight: true draws a ringed dot on that point.
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsChart02

Import MetricsChart02 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsChart02 props
PropTypeDefaultDescription
iconFC<{ className?: string; }>EyeIcon component rendered inside the featured icon beside the heading.
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Heading shown next to the featured icon at the top of the card.
changestring"100%"The change amount rendered inside the trend indicator, such as "100%".
changeTrend
"positive""negative"
"positive"Direction of the change. It sets the trend indicator's arrow direction and tints both the indicator and the area chart green when positive or red when negative.
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsChart03

Import MetricsChart03 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsChart03 props
PropTypeDefaultDescription
change* (required)string—The change amount rendered inside the indicator, such as "100%".
changeTrend* (required)
"positive""negative"
—Direction of the change. It sets the indicator's arrow direction and, unless chartColor is given, whether the chart is drawn green or red.
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Label above the figure naming the metric or the period it covers.
type
"simple""trend""modern"
"trend"Visual style of the change indicator shown beside the figure.
changeDescriptionstring—Supporting text shown after the change indicator, typically the comparison period. It is left out when empty.
chartColorstring—Text color class applied to the chart's line and to its gradient fill. When omitted, the chart follows changeTrend, drawing green for a positive trend and red for a negative one.
chartAreaFillstring—Fill for the area under the line, replacing the generated top-to-bottom gradient.
chartCurveTypeCurveType"monotone"Interpolation Recharts uses to draw the line between points.
chartData{ value: number; }[]lineData3Points plotted in the full-width area chart, where each entry's value is its height.
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsChart04

Import MetricsChart04 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsChart04 props
PropTypeDefaultDescription
title* (required)string—The metric's headline figure, rendered as the large display number.
subtitle* (required)string—Heading shown in the tinted strip above the metric card.
change* (required)string—The change amount rendered inside the indicator, such as "100%".
changeTrend* (required)
"positive""negative"
—Direction of the change, setting the indicator's arrow direction and its green or red tint.
type
"simple""trend""modern"
"trend"Visual style of the change indicator shown beside the figure.
changeDescriptionstring—Supporting text shown after the change indicator, typically the comparison period. It is left out when empty.
chartColorstring"text-fg-success-secondary"Text color class applied to the chart's line and to its gradient fill.
chartAreaFillstring—Fill for the area under the line, replacing the generated top-to-bottom gradient.
chartCurveTypeCurveType"monotone"Interpolation Recharts uses to draw the line between points.
chartData{ value: number; }[]lineData3Points plotted in the full-width area chart, where each entry's value is its height.
footerReactNode—Content rendered in a right-aligned row at the bottom of the card. It is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsIcon01

Import MetricsIcon01 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsIcon01 props
PropTypeDefaultDescription
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Label above the figure naming the metric or the period it covers.
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsIcon02

Import MetricsIcon02 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsIcon02 props
PropTypeDefaultDescription
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Heading shown next to the featured icon at the top of the card.
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsIcon03

Import MetricsIcon03 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsIcon03 props
PropTypeDefaultDescription
iconFC<{ className?: string; }>TrendUp01Icon component rendered inside the featured icon block above the metric.
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Label above the figure naming the metric or the period it covers.
changestring"100%"The change amount rendered inside the trend indicator, such as "100%".
changeTrend
"positive""negative"
"positive"Direction of the change, setting the trend indicator's arrow direction and its green or red tint.
actionsbooleantrueWhether to render the actions dropdown button in the top-right corner of the card.
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsIcon04

Import MetricsIcon04 from @/components/application/metrics/metrics. Renders a <div> element.

MetricsIcon04 props
PropTypeDefaultDescription
iconFC<{ className?: string; }>TrendUp01Icon component rendered inside the featured icon block beside the metric.
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Label above the figure naming the metric or the period it covers.
changestring"100%"The change amount rendered inside the pill indicator, such as "100%".
changeTrend
"positive""negative"
"positive"Direction of the change, setting the pill indicator's arrow direction and its green or red tint.
actionsbooleantrueWhether to render the actions dropdown button in the top-right corner of the card.
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

MetricsSimple

Import MetricsSimple from @/components/application/metrics/metrics. Renders a <div> element.

MetricsSimple props
PropTypeDefaultDescription
type* (required)
"simple""trend""modern"
—Visual style of the change indicator shown beside the figure.
trend* (required)
"positive""negative"
—Direction of the change, setting the indicator's arrow direction and its green or red tint.
titlestring"2,000"The metric's headline figure, rendered as the large display number.
subtitlestring"View 24 hours"Label above the figure naming the metric or the period it covers.
changestring—The change amount rendered inside the indicator, such as "100%".
footerReactNode—Content rendered in a right-aligned row below a divider. The row is left out entirely when nothing is passed.
classNamestring—Additional CSS classes to apply to the card.

FAQs

Please refer to our frequently asked questions page for more.

The metrics file exports nine cards: MetricsSimple, MetricsIcon01 through MetricsIcon04, and MetricsChart01 through MetricsChart04. The icon cards pair a FeaturedIcon with the value, and the chart cards embed a small Recharts area chart alongside it.

Pass the change as a string via change (for example "100%") and set the direction. MetricsSimple and MetricsChart01 use a trend prop, while MetricsIcon03, MetricsIcon04, MetricsChart02, MetricsChart03 and MetricsChart04 use changeTrend. Both accept "positive" or "negative", which switches the arrow icon and swaps the colors between the success and error tokens.

The exported MetricChangeIndicator supports three type values: "simple" (a plain up or down arrow), "trend" (a trend line icon), and "modern" (a diagonal arrow inside a bordered pill). The cards that expose the choice — MetricsSimple, MetricsChart03 and MetricsChart04 — take it as the type prop, and the chart cards default to "trend".

Every metric card accepts a footer prop that takes any React node. When it is provided, the card renders a divider and a right-aligned footer row — the examples on this page pass a <Button color="link-color" size="sm">. Omit footer or pass null to render the card without one.

Yes. MetricsChart01 accepts chartData as an array of { value: number; highlight?: boolean }, where highlight: true renders the emphasized dot on that point. MetricsChart03 and MetricsChart04 accept chartData as an array of { value: number }, plus chartColor, chartAreaFill and chartCurveType (a Recharts CurveType) for customizing the area itself.

MetricsIcon03, MetricsIcon04 and MetricsChart02 accept an icon prop that takes an icon component, such as one from @untitledui/icons. MetricsIcon01 and MetricsIcon02 use fixed icons, so edit the component file if you need to swap those.

Set actions={false}. That prop is available on MetricsIcon03, MetricsIcon04 and MetricsChart01; on the other cards the dots dropdown is always rendered, so remove the ActionsDropdown element in the component file to drop it. Every card also accepts className if you only need to restyle the container.

MessagingModals