Stat

A KPI block with label, value, and optional trend

Active users

12,480

+8.2%

Revenue

$48.2k

vs $44.1k last month

Churn

1.4%

−0.3%

import { TrendUp01 } from '@untitledui-pro/icons/solid';

import { Stat } from '@/components/stat';
import { Surface } from '@/components/surface';

export default function StatPreview() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
      <Surface>
        <Stat>
          <Stat.Label>Active users</Stat.Label>
          <Stat.Value>12,480</Stat.Value>
          <Stat.Trend direction="up">
            <TrendUp01 /> +8.2%
          </Stat.Trend>
        </Stat>
      </Surface>
      <Surface>
        <Stat>
          <Stat.Label>Revenue</Stat.Label>
          <Stat.Value>$48.2k</Stat.Value>
          <Stat.Description>vs $44.1k last month</Stat.Description>
        </Stat>
      </Surface>
      <Surface>
        <Stat>
          <Stat.Label>Churn</Stat.Label>
          <Stat.Value>1.4%</Stat.Value>
          <Stat.Trend direction="down">−0.3%</Stat.Trend>
        </Stat>
      </Surface>
    </div>
  );
}

Source Code

import type { VariantProps } from 'cva';

import { cn, cva } from '@/lib/utils/classnames';

const Stat = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'div'>) => (
  <div ref={ref} className={cn('flex flex-col gap-1', className)} {...rest} />
);

const StatLabel = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'div'>) => (
  <div
    ref={ref}
    className={cn('font-medium text-foreground-secondary text-sm', className)}
    {...rest}
  />
);

const StatValue = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'div'>) => (
  <div
    ref={ref}
    className={cn(
      'font-semibold text-3xl text-foreground tabular-nums md:text-4xl',
      className
    )}
    {...rest}
  />
);

const StatDescription = ({
  ref,
  className,
  ...rest
}: React.ComponentPropsWithRef<'div'>) => (
  <div
    ref={ref}
    className={cn('text-foreground-secondary text-sm', className)}
    {...rest}
  />
);

const trendStyle = cva({
  base: 'inline-flex items-center gap-1 font-medium text-sm tabular-nums [&>svg]:size-3.5',
  variants: {
    direction: {
      up: 'text-success',
      down: 'text-error',
      flat: 'text-foreground-secondary',
    },
  },
  defaultVariants: {
    direction: 'flat',
  },
});

interface StatTrendProps
  extends React.ComponentPropsWithRef<'div'>,
    VariantProps<typeof trendStyle> {}

const StatTrend = ({ ref, className, direction, ...rest }: StatTrendProps) => (
  <div
    ref={ref}
    className={cn(trendStyle({ direction }), className)}
    {...rest}
  />
);

const CompoundStat = Object.assign(Stat, {
  Label: StatLabel,
  Value: StatValue,
  Description: StatDescription,
  Trend: StatTrend,
});

export type { StatTrendProps };
export { CompoundStat as Stat };

Server component. No 'use client' — KPI layout compound; forwards props only.

Stat is the building block for KPIs in dashboards. Pair it with Surface to create cards, or use it inline.

Anatomy


          <Stat>
  <Stat.Label>{label}</Stat.Label>
  <Stat.Value>{value}</Stat.Value>
  <Stat.Trend direction="up">{delta}</Stat.Trend>
</Stat>

API Reference

Stat

Extends the div element.

Stat.Label

Extends the div element.

Stat.Value

Extends the div element.

Stat.Description

Extends the div element.

Stat.Trend

Extends the div element.

Prop	Default	Type
`direction`	`"flat"`	`"up""down""flat"`

Examples

Default

Active users

12,480

+8.2%

Revenue

$48.2k

vs $44.1k last month

Churn

1.4%

−0.3%

import { TrendUp01 } from '@untitledui-pro/icons/solid';

import { Stat } from '@/components/stat';
import { Surface } from '@/components/surface';

export default function StatPreview() {
  return (
    <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
      <Surface>
        <Stat>
          <Stat.Label>Active users</Stat.Label>
          <Stat.Value>12,480</Stat.Value>
          <Stat.Trend direction="up">
            <TrendUp01 /> +8.2%
          </Stat.Trend>
        </Stat>
      </Surface>
      <Surface>
        <Stat>
          <Stat.Label>Revenue</Stat.Label>
          <Stat.Value>$48.2k</Stat.Value>
          <Stat.Description>vs $44.1k last month</Stat.Description>
        </Stat>
      </Surface>
      <Surface>
        <Stat>
          <Stat.Label>Churn</Stat.Label>
          <Stat.Value>1.4%</Stat.Value>
          <Stat.Trend direction="down">−0.3%</Stat.Trend>
        </Stat>
      </Surface>
    </div>
  );
}

Split

Surface