---
title: Big stat
description: BigStat is a component designed to highlight important pieces of information with a large, prominent display. It's perfect for showing key metrics, statistics, or important values.
category: Display
related: [Text, Container, Panel]
commonPatterns: [dashboard-stat, metric-display, kpi-display]
---

Source: https://clickhouse.design/click-ui/bigStat

# Big stat

BigStat is a component designed to highlight important pieces of information with a large, prominent display. It's perfect for showing key metrics, statistics, or important values in dashboards and analytics interfaces.

## Example

## Props

| Prop      | Type                          | Default value | Description                                                                            |
| --------- | ----------------------------- | ------------- | -------------------------------------------------------------------------------------- |
| label     | `React.ReactNode`             | `undefined`   | Label text or content displayed below or above the title (depending on order prop)     |
| title     | `React.ReactNode`             | `undefined`   | Main title/value text displayed prominently (typically a number or metric)             |
| order     | `"titleTop" \| "titleBottom"` | `"titleTop"`  | Layout order - whether title appears above (titleTop) or below (titleBottom) the label |
| size      | `"sm" \| "lg"`                | `"lg"`        | Size variant of the big stat component                                                 |
| spacing   | `"sm" \| "lg"`                | `"lg"`        | Spacing between the title and label                                                    |
| state     | `"default" \| "muted"`        | `"default"`   | Visual state variant - default (normal) or muted (reduced opacity)                     |
| fillWidth | `boolean`                     | `false`       | Whether the big stat should take up the full width of its container                    |
| maxWidth  | `string`                      | `"200px"`     | Maximum width of the big stat component (e.g., "200px", "50%")                         |
| height    | `string`                      | `"6rem"`      | Height of the big stat component (e.g., "6rem", "100px")                               |

```tsx
import { BigStat } from '@clickhouse/click-ui'

<BigStat 
title="1,234"
label="Users"
order="titleTop"
size="lg"
spacing="lg"
state="default"
/>
```

## Quick start

```tsx
import { BigStat } from '@clickhouse/click-ui'

function MyBigStat() {
return (
  <BigStat 
    title="1,234"
    label="Users"
    size="lg"
  />
)
}
```

## Related components

- **Text**: For displaying text content alongside big stats.
- **Container**: For organizing multiple big stats in grids or rows.
- **Panel**: Often used to contain big stats in dashboard layouts.

## Common use cases

### Dashboard stat

```tsx
import { BigStat, Container } from '@clickhouse/click-ui'

function DashboardStat() {
return (
  <Container orientation='horizontal' gap='lg' wrap='wrap'>
    <BigStat
      title="1,234"
      label="Total Users"
      size="lg"
    />
    <BigStat
      title="98%"
      label="Success Rate"
      size="lg"
    />
  </Container>
)
}
```

### Metric display

```tsx
import { BigStat, Container } from '@clickhouse/click-ui'

function MetricDisplay() {
return (
  <Container orientation='vertical' gap='md'>
    <BigStat
      title="45,678"
      label="Page Views"
      order="titleTop"
      size="lg"
    />
  </Container>
)
}
```

### Different states

```tsx
import { BigStat, Container } from '@clickhouse/click-ui'

function BigStatStates() {
return (
  <Container orientation='horizontal' gap='md'>
    <BigStat
      title="1,234"
      label="Users"
      state="default"
    />
    <BigStat
      title="1,234"
      label="Users"
      state="muted"
    />
  </Container>
)
}
```

### Different sizes