---
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
---

```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

Currently, this section is being updated due to the migration of v2.