Overview of the Phoenix LiveView Stat Component
The Mishka Chelekom Stat
component renders a metric block with a title, value, description, optional figure (icon/image), trend indicator, and action area. Pair it with
stat_group
to display multiple stats with dividers and a chosen orientation.
Basic usage
<.stat title="Total revenue" value="$45,231.89" description="Last 30 days" />
Figure slot
Pass an icon or any HEEx into the
:figure
slot. Use
figure_position
(start, end, top) to control placement.
<.stat title="Total likes" value="25.6K" description="From all platforms" color="primary"> <:figure> <.icon name="hero-heart" /> </:figure> </.stat>
Trend indicator
Set
trend="up"
,
"down"
, or
"neutral"
to color the description with success / danger / natural tokens and add a directional arrow.
<.stat title="MRR" value="$12,400" description="20.1% from last month" trend="up" /> <.stat title="Churn" value="3.2%" description="0.4% from last month" trend="down" /> <.stat title="ARPU" value="$84" description="Flat vs last month" trend="neutral" />
Actions slot
<.stat title="Account balance" value="$89,400"> <:actions> <.button color="success" size="small">Add funds</.button> </:actions> </.stat>
Variants & colors
<.stat variant="default" color="primary" title="Visits" value="42K" description="This week" /> <.stat variant="shadow" color="success" title="Sales" value="$2.3K" description="Up 12%" /> <.stat variant="bordered" color="info" title="Signups" value="1,204" description="Today" /> <.stat variant="gradient" color="misc" title="Revenue" value="$98K" description="MTD" /> <.stat variant="base" title="Latency" value="248ms" description="p95" />
Sizes
<.stat size="extra_small" title="XS" value="42" /> <.stat size="small" title="SM" value="42" /> <.stat size="medium" title="MD" value="42" /> <.stat size="large" title="LG" value="42" /> <.stat size="extra_large" title="XL" value="42" />
Stat group
Wrap multiple
<.stat>
blocks with
<.stat_group>
to share dividers and a chosen orientation.
<.stat_group> <.stat title="Downloads" value="31K" description="Last 30 days" /> <.stat title="New users" value="4,200" description="+12% MoM" trend="up" /> <.stat title="New posts" value="1,200" description="-3% MoM" trend="down" /> </.stat_group>
Orientation
orientation="responsive"
stacks vertically on mobile and switches to horizontal at the lg
breakpoint.
<.stat_group orientation="responsive" variant="bordered" color="primary"> <.stat title="Total" value="89.4K" /> <.stat title="Avg time" value="4m 32s" /> <.stat title="Bounce" value="38%" /> </.stat_group>
Dashboard recipe
<.stat_group variant="base"> <.stat title="Revenue" value="$89,400" description="20.1% from last month" trend="up" color="success"> <:figure><.icon name="hero-currency-dollar" /></:figure> </.stat> <.stat title="Subscriptions" value="2,340" description="180 from last month" trend="up" color="primary"> <:figure><.icon name="hero-user-group" /></:figure> </.stat> <.stat title="Active now" value="573" description="201 since last hour" trend="up" color="info"> <:figure><.icon name="hero-bolt" /></:figure> </.stat> </.stat_group>