Stat

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

Total Page Views: 1,993,818; 21% more than last month

<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

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

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

import { Stat } from "@workspaces/ui"

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

Stat.Label, Stat.Value, Stat.HelperMessage, and Stat.Icon can be omitted.

Change Size

Time to complete: 8hr18min

Time to complete: 8hr18min

Time to complete: 8hr18min

Time to complete: 8hr18min

<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

Total Likes: 818K; 21% more than last month

Total Likes: 818K; 21% more than last month

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

Downloads: 18K; From August 1 to August 18

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

Display Unit

Time to complete: 8hr18min

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

Total Page Views: 1,993,818; 21% more than last month

<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

Component	Role and Attributes	Usage
`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 is a component for efficiently organizing and displaying data.

Table is a table component equipped with column sorting, row selection, and click event features.

AreaChart is a component for drawing area charts to compare multiple sets of data.

Badge is a component that emphasizes the status of an item to make it immediately recognizable.

BarChart is a component for drawing bar charts to compare multiple sets of data.

Card is a component that groups and displays related information. By default, it renders a article element.

ComposedChart is a component for drawing composed charts to compare multiple sets of data.

DataList is used to display a list of data items.

Uses Components & Hooks

Icon is a general icon component that can be used in your projects.