Search documentation of phoenix_kit

# PhoenixKitWeb.Components.Core.StatCard (phoenix_kit v1.6.19)

View Source

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.

# Summary

## Functions

stat_card(assigns)

Renders a statistics card with semantic background color.

# Functions

# stat_card(assigns)

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.