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
Users
1,234
Success Rate
98%
Revenue
$1,234
Props
Prop | Type | Default value | Description |
|---|---|---|---|
Prop label | Type React.ReactNode | Default value undefined | Description Label text or content displayed below or above the title (depending on order prop) |
Prop title | Type React.ReactNode | Default value undefined | Description Main title/value text displayed prominently (typically a number or metric) |
Prop order | Type "titleTop" | "titleBottom" | Default value "titleTop" | Description Layout order - whether title appears above (titleTop) or below (titleBottom) the label |
Prop size | Type "sm" | "lg" | Default value "lg" | Description Size variant of the big stat component |
Prop spacing | Type "sm" | "lg" | Default value "lg" | Description Spacing between the title and label |
Prop state | Type "default" | "muted" | Default value "default" | Description Visual state variant - default (normal) or muted (reduced opacity) |
Prop fillWidth | Type boolean | Default value false | Description Whether the big stat should take up the full width of its container |
Prop maxWidth | Type string | Default value "200px" | Description Maximum width of the big stat component (e.g., "200px", "50%") |
Prop height | Type string | Default value "6rem" | Description Height of the big stat component (e.g., "6rem", "100px") |
Quick start
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
Total Users
1,234
Success Rate
98%
Revenue
$12,345
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
Page Views
45,678
Active Sessions
2,345
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
Users
1,234
Users
1,234
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
Users
1,234
Users
1,234