Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Examples
  • Daily sign-ins
  • Stat cards
  • Stat cards with a footer
  • Recommendations
  • Usage boundaries
  • API reference

Charts

Metric Trend

Composes a metric card: label, value, change chip, and an optional chart. Without a chart it is a stat card.

idle

Usage

import { MetricTrend } from "@mizen-labs/ui";

Examples

Daily sign-ins

Stat cards

Without a chart, MetricTrend is a stat card with an icon, value, and change chip.

Stat cards with a footer

deltaPlacement="footer" moves the description and change chip into an inset strip.

Recommendations

GuidancePractice
Do

State the reporting period and the comparison baseline. Keep the current value readable without interpreting the plot.

Do

Put the legend in actions and pass legend={false} to the chart. Set good="down" on MetricDelta for metrics where a fall is good, such as refunds.

Usage boundaries

GuidanceBoundary
Scope

The application supplies the trend visualization and calculations. Color alone must not indicate improvement.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
label / valueReactNodeRequired / OptionalProvides the metric heading and headline value. Omit the value when the chart is the headline.
deltaReactNodeOptionalPlaces a change chip, usually MetricDelta, beside the value.
descriptionReactNodeOptionalAdds supporting context below the value.
iconReactNodeOptionalShows a glyph in a 24px brand tile before the label.
actionsReactNodeOptionalPlaces a legend, menu, or range control at the top inline end.
childrenReactNodeOptionalComposes a caller-owned chart below the header; omit it for a stat card.
valuePrefix / valueSuffixstringNoneSets a currency sign or unit beside the value, smaller and muted, so the numeral leads: "$" or "h".
deltaPlacement"value" | "footer""value"footer moves the description and change chip into an inset strip at the bottom of the card.
PreviousHeatmapNextPart-to-Whole
Revenue
$152,314
+16%
$131,304 last year
  • This year
  • Last year
JanFebMarAprMayJunJulAugSepOctNovDec$0$20K$40K$60K$80K

Daily sign-ins

March 2026 · America/Los Angeles

Sign-ins on March 20
17
One day was not reported in March.
Total revenue
$152,313.92
+16%
From last month
Total orders
25,162
+20%
From last month
New customers
3,847
+8.1%
From last month
Refunds
$4,209.44
+2.4%
From last month
Total revenue
$152,313.92
From last month
+16%
Refunds
$4,209.44
From last month
+2.4%