Renders a statistics card with semantic background color.

Examples

<.stat_card
  value={@session_stats.total_active}
  title="Active Sessions"
  subtitle="Currently logged in"
>
  <:icon>
    <PhoenixKitWeb.Components.Core.Icons.icon_activity />
  </:icon>
</.stat_card>

<.stat_card
  rounded="2xl"
  value={@stats.active_users}
  title="Active Users"
  subtitle="Currently online"
>
  <:icon>
    <PhoenixKitWeb.Components.Core.Icons.icon_check_circle_filled />
  </:icon>
</.stat_card>

<.stat_card
  compact={true}
  value={@stats.total_users}
  title="Total Users"
  subtitle="Registered accounts"
>
  <:icon>
    <.icon name="hero-users" 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.

Slots

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