# `PhoenixKitWeb.Components.Core.StatCard`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.114/lib/phoenix_kit_web/components/core/stat_card.ex#L1)

Provides a statistics card UI component for dashboard metrics.

This component renders a gradient card with an icon, main statistic value,
title, and subtitle. Commonly used in admin dashboards to display KPIs
and real-time statistics.

# `stat_card`

Renders a statistics card with semantic background color.

## Examples

    <.stat_card
      value={@session_stats.total_active}
      title="Active Sessions"
      subtitle="Currently logged in"
    >
      <:icon>
        <.icon name="hero-signal" class="w-6 h-6" />
      </:icon>
    </.stat_card>

    <.stat_card
      color="primary"
      value={@stats.active_users}
      title="Active Users"
      subtitle="Currently online"
    >
      <:icon>
        <.icon name="hero-users" class="w-6 h-6" />
      </:icon>
    </.stat_card>

    <.stat_card
      color="success"
      compact={true}
      value={@stats.total_users}
      title="Total Users"
      subtitle="Registered accounts"
    >
      <:icon>
        <.icon name="hero-check-circle" class="w-5 h-5" />
      </:icon>
    </.stat_card>

## Attributes

* `rounded` (`:string`) - Border radius size (xl, 2xl, etc.). Defaults to `"xl"`.
* `compact` (`:boolean`) - Use compact layout with reduced height. Defaults to `false`.
* `value` (`:any`) (required) - The main statistic value to display.
* `title` (`:string`) (required) - The card title text.
* `subtitle` (`:string`) (required) - The smaller descriptive text.
* `color` (`:string`) - Background color theme (info, primary, success, secondary, warning, error, accent, neutral). Defaults to `"info"`. Must be one of `"info"`, `"primary"`, `"success"`, `"secondary"`, `"warning"`, `"error"`, `"accent"`, or `"neutral"`.
## Slots

* `icon` (required) - Icon to display in the card header.

---

*Consult [api-reference.md](api-reference.md) for complete listing*