Stat components make data look fabulous. Use the family of stat components to display metrics, values, icons, and actions in a visually pleasing way.
A basic stat block with title, value, and description, using the Stats, Stat, StatTitle, StatValue, and StatDesc components.
The Stats components include the following:
The Stats component is the parent element that groups stat blocks together.
| Stats Slots | Description |
|---|---|
default | The default slot. Place |
The Stat component is the wrapper for a single stat. Use orientation props to control layout.
| Stat Props | Type | Description |
|---|---|---|
orientation | string | Sets the layout orientation. Options: - |
| vertical | boolean | Shortcut for vertical orientation. |
| horizontal | boolean | Shortcut for horizontal orientation. |
| Stat Slots | Description |
|---|---|
default | The default slot. Place stat content and child components here. |
The StatTitle component contains the title of the stat block.
| StatTitle Slots | Description |
|---|---|
default | The default slot. Place title text here. |
The StatValue component holds the featured value of the stat block.
| StatValue Slots | Description |
|---|---|
default | The default slot. Place the value here. |
The StatDesc component holds the description of the stat block.
| StatDesc Slots | Description |
|---|---|
default | The default slot. Place the description here. |
The StatFigure component holds an icon or image for the stat block.
| StatFigure Slots | Description |
|---|---|
default | The default slot. Place icon or image here. |
The StatActions component is the place to put buttons or other actions for the stat block.
| StatActions Slots | Description |
|---|---|
default | The default slot. Place actions here. |
Stat blocks with icons and colored values, using the StatFigure component to display icons or avatars.
Stat blocks with buttons and actions, using the StatActions component for interactive controls.
An additional stat example demonstrating advanced or custom usage.