> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/stat.md).

# Stat

The `Stat` component displays a statistic value with an optional icon and a positive or negative change value.

### Preview

<div align="left"><figure><img src="/files/yvNsNzwJGMKhwGxwSrDg" alt="Gravity stat component" width="292"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Stat } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Stat 
        value="1200" 
        label="Total Sales" 
        change='+10%'
        icon="dollar-sign" 
      />
    </div>
  );
}
```

## Props

| Prop      | Description                                         | Required | Value             |
| --------- | --------------------------------------------------- | -------- | ----------------- |
| change    | positive/negative value indicating change amount    | optional | string            |
| className | custom style                                        | required | SCSS or Tailwind  |
| icon      | [icon](/gravity-web/components/icon.md) name to use | optional | string            |
| label     | value label                                         | required | string            |
| value     | value                                               | required | integer or string |

### Notes

* The `Stat` component uses the `Icon` and `cn` functions from `'components/lib'` for handling icons and class names, respectively.
* The `change` prop specifies the change value, which can be positive or negative.
* The `className` prop allows for custom styling to be applied.
* The `icon` prop specifies the name of the icon to be displayed.
* The `label` prop is required and provides a description for the value.
* The `value` prop is required and represents the numeric or string value to be displayed.
* The `changeUp` variable is used to determine if the change value is positive or negative.