<a id="stat"></a>

## Stat  
**Category**: Data Display
Statistical data display component
### Examples

#### Basic Stat  
```python
Div(
    Div(
        Div('Total Page Views', cls='stat-title'),
        Div('89,400', cls='stat-value'),
        Div('21% more than last month', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats shadow'
)
```

#### Custom Styled  
```python
Div(
    Div(
        Div('Account balance', cls='stat-title'),
        Div('$89,400', cls='stat-value'),
        Div(
            Button('Add funds', cls='btn btn-sm btn-success'),
            cls='stat-actions'
        ),
        cls='stat'
    ),
    Div(
        Div('Current balance', cls='stat-title'),
        Div('$89,400', cls='stat-value'),
        Div(
            Button('Withdrawal', cls='btn btn-sm'),
            Button('Deposit', cls='btn btn-sm'),
            cls='stat-actions'
        ),
        cls='stat'
    ),
    cls='stats bg-primary text-primary-content'
)
```

#### With Icons and Images  
```python
Div(
    Div(
        Div(Icon.heart(), cls='stat-figure text-primary'),
        Div('Total Likes', cls='stat-title'),
        Div('25.6K', cls='stat-value text-primary'),
        Div('21% more than last month', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(Icon.lightning(), cls='stat-figure text-secondary'),
        Div('Page Views', cls='stat-title'),
        Div('2.6M', cls='stat-value text-secondary'),
        Div('21% more than last month', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(
            Div(
                Img(src='https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp'),
                cls='w-16 rounded-full'
            ),
            cls='avatar'
        ),
        Div('Tasks done', cls='stat-title'),
        Div('86%', cls='stat-value'),
        Div('31 tasks remaining', cls='stat-desc text-secondary'),
        cls='stat'
    ),
    cls='stats shadow'
)
```

#### Multiple Stats  
```python
Div(
    Div(
        Div(Icon.info(), cls='stat-figure text-secondary'),
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('Jan 1st - Feb 1st', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(Icon.settings(), cls='stat-figure text-secondary'),
        Div('New Users', cls='stat-title'),
        Div('4,200', cls='stat-value'),
        Div('↗︎ 400 (22%)', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div(Icon.archive(), cls='stat-figure text-secondary'),
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats shadow'
)
```

#### Centered Layout  
```python
Div(
    Div(
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('From January 1st to February 1st', cls='stat-desc'),
        cls='stat place-items-center'
    ),
    Div(
        Div('Users', cls='stat-title'),
        Div('4,200', cls='stat-value text-secondary'),
        Div('↗︎ 40 (2%)', cls='stat-desc text-secondary'),
        cls='stat place-items-center'
    ),
    Div(
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat place-items-center'
    ),
    cls='stats shadow'
)
```

#### Vertical Layout  
```python
Div(
    Div(
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('Jan 1st - Feb 1st', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Users', cls='stat-title'),
        Div('4,200', cls='stat-value'),
        Div('↗︎ 400 (22%)', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats stats-vertical shadow'
)
```

#### Responsive Layout  
```python
Div(
    Div(
        Div('Downloads', cls='stat-title'),
        Div('31K', cls='stat-value'),
        Div('Jan 1st - Feb 1st', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Users', cls='stat-title'),
        Div('4,200', cls='stat-value'),
        Div('↗︎ 400 (22%)', cls='stat-desc'),
        cls='stat'
    ),
    Div(
        Div('New Registers', cls='stat-title'),
        Div('1,200', cls='stat-value'),
        Div('↘︎ 90 (14%)', cls='stat-desc'),
        cls='stat'
    ),
    cls='stats stats-vertical lg:stats-horizontal shadow'
)
```