Stats

Display statistics and data in organized blocks for dashboards and analytics.

Import

import { Stats } from 'asterui'

Examples

Basic Stat

Simple stat with title and value.

</>

Total Page Views

89,400

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Total Page Views" value="89,400" />
      </Stats>
    )
}

export default App

With Description

Add description using desc prop.

</>

Downloads

31K

Jan 1st - Feb 1st

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
      </Stats>
    )
}

export default App

Multiple Stats

Display multiple stats horizontally.

</>

Total Users

4,200

↗︎ 400 (22%)

New Users

1,200

↘︎ 90 (14%)

New Registers

4,200

↗︎ 400 (22%)

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat title="Total Users" value="4,200" desc="↗︎ 400 (22%)" />
        <Stats.Stat title="New Users" value="1,200" desc="↘︎ 90 (14%)" />
        <Stats.Stat title="New Registers" value="4,200" desc="↗︎ 400 (22%)" />
      </Stats>
    )
}

export default App

With Icons

Adding icons using figure prop.

</>

Downloads

31K

Jan 1st - Feb 1st

New Users

4,200

↗︎ 400 (22%)

import { Stats } from 'asterui'
import { InformationCircleIcon, AdjustmentsVerticalIcon } from '@aster-ui/icons'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          figure={<InformationCircleIcon size={32} />}
          title="Downloads"
          value="31K"
          desc="Jan 1st - Feb 1st"
        />
        <Stats.Stat
          figure={<AdjustmentsVerticalIcon size={32} />}
          title="New Users"
          value="4,200"
          desc="↗︎ 400 (22%)"
        />
      </Stats>
    )
}

export default App

Colored Values

Using className for colored values.

</>

Account balance

$89,400

21% more than last month

Current balance

$12,721

12% less than last month

import { Stats } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          title="Account balance"
          value={<span className="text-primary">$89,400</span>}
          desc="21% more than last month"
        />
        <Stats.Stat
          title="Current balance"
          value={<span className="text-secondary">$12,721</span>}
          desc="12% less than last month"
        />
      </Stats>
    )
}

export default App

Vertical Layout

Stack stats vertically.

</>

Downloads

31K

Jan 1st - Feb 1st

New Users

4,200

↗︎ 400 (22%)

New Registers

1,200

↘︎ 90 (14%)

import { Stats } from 'asterui'

function App() {
  return (
      <Stats vertical className="shadow">
        <Stats.Stat title="Downloads" value="31K" desc="Jan 1st - Feb 1st" />
        <Stats.Stat title="New Users" value="4,200" desc="↗︎ 400 (22%)" />
        <Stats.Stat title="New Registers" value="1,200" desc="↘︎ 90 (14%)" />
      </Stats>
    )
}

export default App

With Actions

Adding buttons using actions prop.

</>

Account balance

$89,400

Add funds

import { Stats, Button } from 'asterui'

function App() {
  return (
      <Stats className="shadow">
        <Stats.Stat
          title="Account balance"
          value="$89,400"
          actions={
            <Button size="sm" color="primary">
              Add funds
            </Button>
          }
        />
      </Stats>
    )
}

export default App

API

Stats

Property	Description	Type	Default
children	Stat items to display	React.ReactNode	-
vertical	Stack stats vertically	boolean	false
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Stats.Stat

Property	Description	Type	Default
title	Stat title	React.ReactNode	-
value	Stat value	React.ReactNode	-
desc	Description text	React.ReactNode	-
figure	Icon or image figure	React.ReactNode	-
actions	Action buttons or elements	React.ReactNode	-
className	Additional CSS classes	string	-
data-testid	Test ID for testing	string	-

Accessibility

• Semantic heading structure for stat titles
• Values can include ARIA labels for context
• Figures have appropriate alt text when using images
• Action buttons are keyboard accessible