Stat

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

Theming

The Stat is a multi part component.

If you want to change the style of the component, please check here.

export const Stat: ComponentMultiStyle<"Stat"> = {
  baseStyle: {
    container: {},
    helperMessage: {
      color: "muted",
      fontSize: "sm",
    },
    icon: {
      h: "3.5",
      marginEnd: "1",
      vars: [
        {
          name: "increase",
          token: "colors",
          value: "success.400",
        },
        {
          name: "decrease",
          token: "colors",
          value: "danger.400",
        },
      ],
      verticalAlign: "middle",
      w: "3.5",
    },
    label: {
      color: "muted",
      fontWeight: "medium",
    },
    number: ({ colorScheme: c }) => ({
      color: c
        ? [`${c}.500`, `${c}.600`]
        : ["blackAlpha.800", "whiteAlpha.700"],
      fontFeatureSettings: '"pnum"',
      fontSize: "5xl",
      fontVariantNumeric: "proportional-nums",
      fontWeight: "extrabold",
      verticalAlign: "baseline",
    }),
  },

  defaultProps: {},
}

Copied!

Edit this page on GitHub

PreviousCard NextTable