Total Revenue
$45,231.89
+20.1% from last month
Active Users
2,350
-4.5% from last week
Pending Orders
12
Requires attention
Usage
<%= ui.stat do %>
<%= ui.stat_label "Total Revenue" %>
<%= ui.stat_value "$45,231.89" %>
<%= ui.stat_description "+20.1% from last month", variant: :success %>
<% end %>
<%= ui.stat do %>
<%= ui.stat_icon "users" %>
<%= ui.stat_label "Active Users" %>
<%= ui.stat_value "2,350" %>
<%= ui.stat_description "-4.5%", variant: :error %>
<% end %>SubcomponentsUse subcomponents below or any HTML.
| Name | Helper | Description |
|---|---|---|
stat_icon | ui.stat_icon | Optional icon displayed at the top of the stat card. |
stat_label | ui.stat_label | Label text describing the statistic. |
stat_value | ui.stat_value | The main statistic value displayed prominently. |
stat_description | ui.stat_description | Additional context or trend information with optional variant styling. |
Examples
Basic Stat
Total Revenue
$45,231.89
+20.1% from last month
<%= ui.stat do %>
<%= ui.stat_label "Total Revenue" %>
<%= ui.stat_value "$45,231.89" %>
<%= ui.stat_description "+20.1% from last month", variant: :success %>
<% end %>Stat with Icon
Active Users
2,350
-4.5% from last week
<%= ui.stat do %>
<%= ui.stat_icon "users" %>
<%= ui.stat_label "Active Users" %>
<%= ui.stat_value "2,350" %>
<%= ui.stat_description "-4.5% from last week", variant: :error %>
<% end %>Warning Variant
Pending Orders
12
Requires attention
<%= ui.stat do %>
<%= ui.stat_icon "exclamation-triangle" %>
<%= ui.stat_label "Pending Orders" %>
<%= ui.stat_value "12" %>
<%= ui.stat_description "Requires attention", variant: :warning %>
<% end %>Default Description
Total Items
1,234
All time
<%= ui.stat do %>
<%= ui.stat_label "Total Items" %>
<%= ui.stat_value "1,234" %>
<%= ui.stat_description "All time" %>
<% end %>Dashboard Grid
Revenue
$45,231
+20.1%
Users
2,350
+180
Orders
12,234
-4.5%
Conversion
3.2%
No change
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<%= ui.stat do %>
<%= ui.stat_icon "currency-dollar" %>
<%= ui.stat_label "Revenue" %>
<%= ui.stat_value "$45,231" %>
<%= ui.stat_description "+20.1%", variant: :success %>
<% end %>
<%= ui.stat do %>
<%= ui.stat_icon "users" %>
<%= ui.stat_label "Users" %>
<%= ui.stat_value "2,350" %>
<%= ui.stat_description "+180", variant: :success %>
<% end %>
<%= ui.stat do %>
<%= ui.stat_icon "shopping-cart" %>
<%= ui.stat_label "Orders" %>
<%= ui.stat_value "12,234" %>
<%= ui.stat_description "-4.5%", variant: :error %>
<% end %>
<%= ui.stat do %>
<%= ui.stat_icon "chart-bar" %>
<%= ui.stat_label "Conversion" %>
<%= ui.stat_value "3.2%" %>
<%= ui.stat_description "No change" %>
<% end %>
</div>