Skip to main content
Browse docs

Marwes documentation

Stat Tile

Compact KPI tile synced from the V2 Stat Tile Figma component, with tone treatments, optional trend metadata, and shared React/Vue adapter contracts.

What this family solves

Compact KPI tile synced from the V2 Stat Tile Figma component, with tone treatments, optional trend metadata, and shared React/Vue adapter contracts.

Use when

  • The UI needs a compact KPI summary with label, value, optional trend, and optional subtitle.
  • The metric fits one of the synced neutral, brand, success, warning, or danger tone treatments.
  • React and Vue consumers should receive the same dashboard metric anatomy and metadata.

Avoid when

  • The experience needs charting, sparklines, expandable analytics, or locale-aware formatting inside the component.
  • The tile is only being used as a generic card without metric-specific label/value/trend structure.
  • The product needs responsive dashboard layout behavior that should be owned by a layout component.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Component

StatTile

Type

StatTileProps

Vue — @marwes-ui/vue

Component

StatTile

Type

StatTileProps

Svelte — @marwes-ui/svelte

Component

StatTile

Type

StatTileProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { StatTile } from "@marwes-ui/react"

export function Example() {
  return (
    <StatTile
      label="Monthly revenue"
      value="$24,800"
      subtitle="Compared with last month"
      trendValue="12%"
      trendDirection="positive"
      tone="success"
    />
  )
}

Vue

<script setup lang="ts">
import { StatTile } from "@marwes-ui/vue"
</script>

<template>
  <StatTile
    label="Monthly revenue"
    value="$24,800"
    subtitle="Compared with last month"
    trend-value="12%"
    trend-direction="positive"
    tone="success"
  />
</template>

Svelte

<script lang="ts">
  import { StatTile } from "@marwes-ui/svelte"
</script>

<StatTile
  label="Monthly revenue"
  value="$24,800"
  subtitle="Compared with last month"
  trendValue="12%"
  trendDirection="positive"
  tone="success"
/>

Accessibility requirements

  • Accurate trend semantics: Keep the trend direction and tone semantically accurate; do not use tone as decoration alone.
  • Trend announcement review: Verify the auto-built trend announcement reads correctly to screen readers.
  • Manual review boundary: Visual review against the synced V2 Stat Tile page for tone and spacing fidelity.
  • Manual review 2: Product-level review for metric wording, number formatting, and trend semantics in real dashboards.

Theming

Stat Tile uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources