maud-ui64 components

Dashboard — Stats

Overview

Last 30 days compared to the previous period.

MRR

$42,310

+12.4%vs last month

New customers

284

+8.1%vs last month

Active sessions

1,429

-3.2%vs last month

Churn

2.1%

-0.4%lower is better

Recent activity

  • Sofia Davis upgraded to the Pro plan2 min ago
  • Mateo Ortega invited 3 teammates14 min ago
  • Jin-Ho Lee published a new workflow37 min ago
  • Amira Khan exported the Q1 revenue report1 hour ago

Usage

use maud_ui::blocks::dashboard::stats;

stats::render(stats::Props {
    title: Some("Overview".into()),
    subtitle: Some("Last 30 days".into()),
    cards: vec![
        stats::StatCard {
            label: "MRR".into(),
            value: "$42,310".into(),
            delta: Some(stats::Delta { value: "+12.4%".into(), positive: true }),
            hint: Some("vs last month".into()),
        },
        stats::StatCard {
            label: "Churn".into(),
            value: "2.1%".into(),
            // Set positive:true on a negative number for
            // "lower is better" metrics (churn, error rate).
            delta: Some(stats::Delta { value: "-0.4%".into(), positive: true }),
            hint: Some("lower is better".into()),
        },
    ],
    chart: None,         // Some(html! { (chart::render(...)) })
    activity: None,      // Some(vec![ ActivityItem { .. } ])
})
← Back to Blocks