Stat

A component for displaying statistics with labels, values, and trend indicators.

Anatomy

<script>
  import { Stat } from "@saas-ui/svelte/components/stat";
</script>

<Stat.Root>
  <Stat.Label>Total Revenue</Stat.Label>
  <Stat.ValueText>$45,000</Stat.ValueText>
  <Stat.HelpText>
    <Stat.UpTrend>12%</Stat.UpTrend>
  </Stat.HelpText>
</Stat.Root>

Examples

Basic Accessibility

Basic stat with label and value.

<Stat.Root>
	<Stat.Label>Unique visitors</Stat.Label>
	<Stat.ValueText>192.1k</Stat.ValueText>
</Stat.Root>

Colours Accessibility

Use the colour prop on trend indicators.

<VStack gap={4}>
	{#each colours as colour}
		<HStack gap={4} class="items-center">
			<Text size="xs" class="w-16">{colour}</Text>
			<Stat.Root class="flex-row flex-wrap items-center gap-x-2">
				<Stat.Label class="w-full">Revenue</Stat.Label>
				<Stat.ValueText>$8,456</Stat.ValueText>
				<Stat.UpTrend {colour}>12%</Stat.UpTrend>
			</Stat.Root>
			<Stat.Root class="flex-row flex-wrap items-center gap-x-2">
				<Stat.Label class="w-full">Visitors</Stat.Label>
				<Stat.ValueText>192.1k</Stat.ValueText>
				<Stat.DownTrend {colour}>1.9%</Stat.DownTrend>
			</Stat.Root>
		</HStack>
	{/each}
</VStack>

Format Options Accessibility

Use formatOptions to format the value as currency, percentage, etc.

<Stat.Root>
	<Stat.Label>Revenue</Stat.Label>
	<Stat.ValueText
		value={935.4}
		formatOptions={{ style: "currency", currency: "USD" }}
	/>
</Stat.Root>

Icon Accessibility

Add icons to the stat label.

<Stat.Root class="border-border-default max-w-60 rounded-md border p-4">
	<Stat.Label class="flex w-full justify-between">
		Sales
		<Icon
			as={CurrencyDollar}
			size="sm"
			class="text-fg-muted"
			aria-hidden="true"
		/>
	</Stat.Label>
	<Stat.ValueText>$4.24k</Stat.ValueText>
</Stat.Root>

Indicator Accessibility

Use Stat.DownTrend or Stat.UpTrend to show change indicators.

<Stat.Root>
	<Stat.Label>Unique visitors</Stat.Label>
	<Stat.ValueText>192.1k</Stat.ValueText>
	<Stat.DownTrend variant="plain">1.9%</Stat.DownTrend>
</Stat.Root>

Progress Bar Accessibility

Combine stat with a progress bar for visual representation.

<VStack gap={2} class="max-w-60">
	<Stat.Root>
		<Stat.Label>This week</Stat.Label>
		<Stat.ValueText
			value={1340}
			formatOptions={{
				currency: "USD",
				style: "currency",
				maximumFractionDigits: 0,
			}}
		/>
		<Stat.HelpText>+12% from last week</Stat.HelpText>
	</Stat.Root>
	<Progress.Root value={50}>
		<Progress.Track>
			<Progress.Range />
		</Progress.Track>
	</Progress.Root>
</VStack>

Trend Accessibility

Show trend with value, percentage, and help text.

<Stat.Root class="flex-row flex-wrap items-center gap-x-2">
	<Stat.Label class="w-full">Unique</Stat.Label>
	<Stat.ValueText
		value={8456.4}
		formatOptions={{ style: "currency", currency: "USD" }}
	/>
	<Stat.UpTrend>12%</Stat.UpTrend>
	<Stat.HelpText class="w-full">since last month</Stat.HelpText>
</Stat.Root>

Value Unit Accessibility

Use Stat.ValueUnit to add units to the value.

<Stat.Root>
	<Stat.Label>Time to complete</Stat.Label>
	<Stat.ValueText class="items-baseline">
		3 <Stat.ValueUnit>hr</Stat.ValueUnit>
		20 <Stat.ValueUnit>min</Stat.ValueUnit>
	</Stat.ValueText>
</Stat.Root>

Props

Prop	Type	Default	Description
`class`	`text`	-	CSS class to apply to the component.