StatisticCard
proStatisticCard is a bordered or inset card shell for composing a label, value, and supporting content such as trend indicators, charts, or progress bars.
Installation
Add this component with the NateUI CLI.
Examples
Basic
Open tickets
128
18.2%Header
Database Throughput (TPS)
2,450
+450vs baseline
Footer
New Client
1,862
12.5%View report
Inset
Inset Footer
With Chart
Weekly sessions
3,102
12.5%vs yesterday
With Progress
Storage used
91%
18 GB left of 200 GB
API
| Prop | Description | Type | Default |
|---|---|---|---|
inset | Renders the muted outer frame with an inset body, instead of the plain bordered card. | boolean | false |
header | Content shown above the body, in its own bordered/padded region. | ReactNode | string | — |
footer | Content shown below the body, in its own bordered/padded region. | ReactNode | string | — |
bodyClass | Class names applied to the inner body. Only takes effect when inset is true. | string | — |
className | Class names applied to the outermost element. | string | — |
children | The card's main content. | ReactNode | — |
...rest | Native div props. | ComponentProps<'div'> | — |