Dashboard — Stats

Anatomy

A composed application section with typed inputs and native HTML output.

maud_ui::blocks::dashboard::stats

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`title`	`Option<String>`	`None`	Section title shown above the cards. `None` hides the header.
`subtitle`	`Option<String>`	`None`	Small subtitle under the title (e.g., "Last 30 days"). `None` if you don't need one.
`cards`	`Vec<StatCard>`	`[]`	The KPI cards. Rendered in an auto-fit grid (min 14rem).
`chart`	`Option<Markup>`	`None`	Optional arbitrary chart markup rendered in a wide card under the stat row. Pair with `maud_ui::primitives::chart` or your favorite chart library.
`activity`	`Option<Vec<ActivityItem>>`	`None`	Optional list of recent activity rendered under the chart. `None` hides the activity card entirely.

Examples

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

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 { .. } ])
})

Accessibility

Supply meaningful labels, choose heading levels for the surrounding page, and preserve native link and form behavior. Keyboard focus follows document order. Motion honors reduced-motion preferences.

← Back to Blocks