Metric components

Metrics are useful for presenting key data points or numbers to users. They're commonly used in dashboards to quickly summarise changes in data.

Metrics example

Get the code

View 24 hours

2,000

100%
vs last month

Installation

Some metric components depend on other components to function properly. Before using them, make sure to add the required components via CLI.

Use the following command to install them:

npx untitledui add dropdown featured-icons recharts

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%

Metrics chart 01

Get the code

View 24 hours

2,000

100%
vs last month

Metrics chart actions 01

Get the code

View 24 hours

2,000

100%
vs last month
View report

Metrics chart 02

Get the code

View 24 hours

2,000

100%

Metrics chart 03

Get the code

View 24 hours

2,000

100%
vs last month

Metrics chart actions 03

Get the code

View 24 hours

2,000

100%
vs last month
View report

Metrics chart 04

Get the code

View 24 hours

2,000

100%
vs last month

Metrics chart actions 04

Get the code

View 24 hours

2,000

100%
vs last month
View report
Radar chartsSlideout menus