RapidRails UI

Stat

A metric card for displaying key numbers with optional change indicators, progress bars, and composable slots.

Key Features

  • Composes rui_text, rui_badge, rui_progress — no bespoke markup underneath
  • Change indicator — auto-detects :up/:down from a +/- prefix
  • Optional progress bar — pass progress: to render one below the metric
  • Three slots — icon, sparkline, footer
  • Three sizes — :sm, :base, :lg card padding
  • No JavaScript — pure server-rendered HTML
  • Starter tier — available on all RRUI licenses

Basic Usage

label and value are both positional and required.

Leads
129
Basic Usage 
<%= rui_stat("Leads", "129") %>

Change Indicator

change_direction is auto-detected from the string (+ -> :up, - -> :down). Override explicitly if needed.

Leads
129 +8%
Churn
12% -3%
Change Indicator 
<%= rui_stat("Leads", "129", change: "+8%") %>
<%= rui_stat("Churn", "12%", change: "-3%") %>

<%= rui_stat("Revenue", "$32,209", change: "+24% vs last month", change_color: :emerald) %>

<%= rui_stat("Refunds", "7", change: "7 new", change_direction: :down, change_color: :red) %>

With Progress Bar

Renders an rui_progress bar below the metric.

Retention
95%
Storage
68%
With Progress Bar 
<%= rui_stat("Retention", "95%", progress: 95) %>

<%= rui_stat("Storage", "68%", progress: 68, color: :primary, progress_color: :warning) %>

Icon Slot

The icon appears at the top-right of the card.

Leads
129
Icon Slot 
<%= rui_stat("Leads", "129") do |s| %>
  <% s.with_icon(:trending_up) %>
<% end %>

Sparkline Slot

Arbitrary content alongside the value — e.g. a mini chart placeholder.

Signups
1,204
Sparkline Slot 
<%= rui_stat("Signups", "1,204") do |s| %>
  <% s.with_sparkline do %>
    <%= content_tag(:div, nil, class: "w-16 h-8 bg-emerald-100 dark:bg-emerald-900 rounded") %>
  <% end %>
<% end %>

Sizes

Controls card padding.

Leads
129
Leads
129
Leads
129
Sizes 
<%= rui_stat("Leads", "129", size: :sm) %>    
<%= rui_stat("Leads", "129", size: :base) %>  
<%= rui_stat("Leads", "129", size: :lg) %>

Dashboard Grid

A common real-world layout — a responsive grid of stat cards.

Total Users
12,847 +12%
Revenue
$94,200 +8% vs last month
Active Sessions
3,421 -2%
Conversion
3.2% +0.4%
Dashboard Grid 
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <%= rui_stat("Total Users", "12,847", change: "+12%", change_color: :emerald, progress: 72) do |s| %>
    <% s.with_icon(:users) %>
  <% end %>

  <%= rui_stat("Revenue", "$94,200", change: "+8% vs last month", change_color: :emerald) do |s| %>
    <% s.with_icon(:dollar_sign) %>
  <% end %>
</div>

Accessibility

  • Uses rui_text for label/value — proper semantic markup
  • Change badge uses rui_badge — screen-reader friendly text
  • Progress bar uses rui_progress — role="progressbar" with ARIA values
  • No JS — pure server-rendered HTML

API Reference

rui_stat

Metric card composing rui_text/rui_badge/rui_progress internally, with an optional change indicator and composable slots

Parameter Type Default Description
label* String — Metric name, e.g. "Leads" — positional and required
value* String/Integer — Metric value, e.g. "129" — positional and required

Change Indicator

Optional trend badge next to the value

Parameter Type Default Description
change String — Change text, e.g. "+8%", "-3 vs yesterday"
change_color Symbol :emerald Badge color for the change indicator
change_direction Symbol auto Auto-detected from the +/- prefix in change:; pass explicitly to override
:up :down

Progress

Optional progress bar rendered below the metric

Parameter Type Default Description
progress Integer — 0-100; renders rui_progress when present
progress_color Symbol color: Progress bar color — defaults to the card's color:

Appearance

Visual styling options

Parameter Type Default Description
color Symbol :primary Accent color for the card
size Symbol :base Card padding
:sm :base :lg

Slots

Content slots for customizing component parts

Slot Description
icon with_icon(name, **options) — Lucide icon at top-right. Accepts icon name + any rui_icon options.
sparkline with_sparkline { } — arbitrary content next to the value (mini chart, etc.)
footer with_footer { } — arbitrary content below the metric area