Stats

Usage

<%= render "components/stats/stats_grid", columns: 4, cards: [
  { title: "Total Revenue", value: "$1,250.00", icon: :dollar, subtitle: "Trending up this month" },
  { title: "New Customers", value: "1,234", icon: :users },
  { title: "Active Accounts", value: "45,678", icon: :check_circle },
  { title: "Growth Rate", value: "4.5%", icon: :chart_bar }
] %>

Examples

Single Card

Cards render standalone too. Use value_classes and icon_classes for color accents — a utility class always wins over the theme default.

<%= render "components/stats/stats_card",
  title: "Open Tickets",
  value: "12",
  icon: :circle_alert,
  icon_classes: "text-amber-500",
  subtitle: "3 urgent" %>

With Action

<%= render "components/stats/stats_grid",
  columns: 3,
  cards: cards,
  action: link_to("View report", reports_path, data: { component: "button", variant: "outline" }),
  action_position: :end %>

API Reference

Stats Grid

Parameter	Type	Default	Description
cards	Array	[]	Hashes of stats_card parameters
columns	Integer	3	Grid columns from the sm breakpoint up, 1-6
action	String	nil	Captured HTML rendered beside the grid
action_position	Symbol	:end	:start or :end
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes, including data

Stats Card

Parameter	Type	Default	Description
title	String	required	Metric label
value	String	required	Metric value
icon	Symbol	nil	Built-in icon name; custom HTML is also accepted
subtitle	String	nil	Secondary line under the value
icon_classes	String	""	Classes for the icon area, e.g. a color utility
value_classes	String	""	Classes for the value, e.g. a color utility
css_classes	String	""	Additional CSS classes
html_options	Hash	{}	Additional HTML attributes, including data