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.

Slots

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