WebPremium Verified

KPI Line Panel UI Block

A reusable KPI reporting section that pairs a headline metric with a clearly labeled time-series line chart. Built for product and marketing teams who need a polished, warm-neutral presentation block that remains editable and faithful to the supplied data.

What you get

  • One responsive KPI panel with a clear value and comparison
  • A labeled, legible line chart using supplied time-series data
  • Editable content structure and reusable component styling
  • Accessible text context for the chart and key change

Good fit

  • Executive reporting where one trend deserves focused attention
  • Product or marketing pages embedding a compact performance view

Not for

  • A complete analytics dashboard or exploratory charting workspace
  • Metrics without ordered time-series values when a line would mislead

What you provide

  • KPI name, value, unit, and period
  • Ordered time-series labels and values

Requirements

  • A modern browser
  • Node.js 20+ for the validator

Running cost

No external services. Runs entirely on your agent.

Try this prompt

/sl-kpi-line-panel-ui-block Create a one-section page for business stakeholders showing weekly sign-ups across four weeks. Use the headline "Weekly sign-ups · count · 4 weeks ending 25 Mar · editable values" and show 1,020 for 04 Mar, 1,128 for 11 Mar, 1,182 for 18 Mar, and 1,284 for 25 Mar. Keep the Sage Frame style restrained.

Follow-up prompts

  • Add a clearly labeled target line at 1,350 without changing the data scale.
  • Adapt the panel to a narrow mobile column while preserving readable date labels.

Verification

Verified

render-checkpass4.0 / 516s

FAQ

Can the panel show a target line?

Yes. Provide a target or benchmark and its meaning; keep it visually secondary and label it explicitly.

Can I use this without a comparison period?

Yes. Omit the comparison rather than inventing a baseline; the headline KPI and trend can stand alone.

Similar skills

KPI Line Panel UI Block · SkillLoom