# `PhoenixKitWeb.Components.Core.StatCard`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v2.14.2/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. Was previously declared but ignored — the class was hardcoded. The values are a fixed list because Tailwind scans SOURCE for literal class names: an interpolated class is invisible to it, so the CSS would simply not exist for anything not already written literally elsewhere. Defaults to `"box"`. Must be one of `"box"`, `"none"`, `"sm"`, `"md"`, `"lg"`, `"xl"`, `"2xl"`, `"3xl"`, or `"full"`.
* `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"`.
* `value_color` (`:string`) - Optional CSS color for the value itself — for values whose color IS information (a price colored by cheapness, a temperature by severity). E.g. "hsl(140 85% 55%)". Any `;` is stripped so the value cannot append further declarations; every legitimate colour syntax (hsl/oklch/var/color-mix) is unaffected. Defaults to `nil`.
* `navigate` (`:string`) - Optional destination. When set the whole card becomes a link to the report behind the number — a statistic a reader cannot drill into is a dead end. Pass a path already built through `PhoenixKit.Utils.Routes.path/1`; only pass one when a real report exists, since a link to a list that does not contain the counted rows is worse than no link. Defaults to `nil`.
## Slots

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

---

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