---
title: Stat
description: "`Stat` is used to display numbers or data within a box."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/stat/stat.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/stat
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-stat--basic
---

# Stat

`Stat` is used to display numbers or data within a box.

```tsx
<Stat.Root>
  <Stat.Label>Total Page Views</Stat.Label>
  <Stat.Value>1,993,818</Stat.Value>
  <Stat.HelperMessage>
    <Stat.Icon type="increase" />
    21% more than last month
  </Stat.HelperMessage>
</Stat.Root>
```

## Usage

```tsx
import { Stat } from "@yamada-ui/react"
```

```tsx
import { Stat } from "@/components/ui"
```

```tsx
import { Stat } from "@workspaces/ui"
```

```tsx
<Stat.Root>
  <Stat.Label />
  <Stat.Value />
  <Stat.Unit />
  <Stat.HelperMessage />
  <Stat.Icon />
</Stat.Root>
```

:::note
`Stat.Label`, `Stat.Value`, `Stat.HelperMessage`, and `Stat.Icon` can be omitted.
:::

### Change Size

```tsx
<VStack>
  <For each={["xs", "sm", "md", "lg"]}>
    {(size, index) => (
      <Stat.Root
        key={index}
        size={size}
        label="Time to complete"
        value={
          <>
            8<Stat.Unit>hr</Stat.Unit>
            18<Stat.Unit>min</Stat.Unit>
          </>
        }
      />
    )}
  </For>
</VStack>
```

### Change Color Scheme

```tsx
<VStack>
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Stat.Root
        key={index}
        colorScheme={colorScheme}
        helperMessage="21% more than last month"
        label="Total Likes"
        value="818K"
      />
    )}
  </For>
</VStack>
```

### Center Content

To center the content, set `centerContent` to `true`.

```tsx
<Stat.Root
  centerContent
  helperMessage="From August 1 to August 18"
  icon="increase"
  label="Downloads"
  value="18K"
/>
```

### Display Unit

```tsx
<Stat.Root>
  <Stat.Label>Time to complete</Stat.Label>
  <Stat.Value>
    8<Stat.Unit>hr</Stat.Unit>
    18<Stat.Unit>min</Stat.Unit>
  </Stat.Value>
</Stat.Root>
```

### Display Decrease Icon

To display a decrease icon, set the `type` of `Stat.Icon` to `decrease`.

```tsx
<Stat.Root>
  <Stat.Label>Total Page Views</Stat.Label>
  <Stat.Value>1,993,818</Stat.Value>
  <Stat.HelperMessage>
    <Stat.Icon type="decrease" />
    21% more than last month
  </Stat.HelperMessage>
</Stat.Root>
```

## Props

### Stat.Root

| Prop                 | Default | Type                                                                                                                      | Description                                                              |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `as`                 | -       | `As`                                                                                                                      | The HTML element to render.                                              |
| `asChild`            | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child.                               |
| `css`                | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                          |
| `colorScheme`        | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                              |
| `size`               | `"md"`  | `"lg" \| "md" \| "sm" \| "xs"`                                                                                            | The size of the component.                                               |
| `centerContent`      | `false` | `boolean`                                                                                                                 | If `true`, container will center its children regardless of their width. |
| `helperMessage`      | -       | `ReactNode`                                                                                                               | The stat helper message to use.                                          |
| `helperMessageProps` | -       | `StatHelperMessageProps`                                                                                                  | Props for stat helper message component.                                 |
| `icon`               | -       | `StatIconProps["type"]`                                                                                                   | The stat icon to use.                                                    |
| `iconProps`          | -       | `Omit<StatIconProps, "type">`                                                                                             | Props for stat icon component.                                           |
| `label`              | -       | `ReactNode`                                                                                                               | The stat label to use.                                                   |
| `labelProps`         | -       | `StatLabelProps`                                                                                                          | Props for stat label component.                                          |
| `value`              | -       | `ReactNode`                                                                                                               | The stat value to use.                                                   |
| `valueProps`         | -       | `StatValueProps`                                                                                                          | Props for stat value component.                                          |

### Stat.HelperMessage

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Stat.Icon

| Prop          | Default      | Type                                                                                                                      | Description                                |
| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -            | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -            | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -            | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -            | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `type`        | `"increase"` | `"decrease" \| "increase"`                                                                                                | The type of the icon.                      |

### Stat.Label

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Stat.Unit

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

### Stat.Value

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |

## Accessibility

### ARIA Roles and Attributes

| Element             | Roles and Attributes | Usage                                                                                                               |
| ------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `svg.ui-stat__icon` | `aria-label`         | Set to `"Increased by"` if `type` is set to `"increase"`, and to `"Decreased by"` if `type` is set to `"decrease"`. |

## Similar Components

- [NativeTable](https://yamada-ui.com/docs/components/native-table.md): `NativeTable` is a component for efficiently organizing and displaying data.
- [Table](https://yamada-ui.com/docs/components/table.md): `Table` is a table component equipped with column sorting, row selection, and click event features.
- [AreaChart](https://yamada-ui.com/docs/components/area-chart.md): `AreaChart` is a component for drawing area charts to compare multiple sets of data.
- [Badge](https://yamada-ui.com/docs/components/badge.md): `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
- [BarChart](https://yamada-ui.com/docs/components/bar-chart.md): `BarChart` is a component for drawing bar charts to compare multiple sets of data.
- [Card](https://yamada-ui.com/docs/components/card.md): `Card` is a component that groups and displays related information. By default, it renders a `article` element.
- [ComposedChart](https://yamada-ui.com/docs/components/composed-chart.md): `ComposedChart` is a component for drawing composed charts to compare multiple sets of data.
- [DataList](https://yamada-ui.com/docs/components/data-list.md): `DataList` is used to display a list of data items.

## Uses Components & Hooks

- [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects.