TrendChip

Import

import { TrendChip } from 'heroui-native-pro';

Anatomy

<TrendChip>
  <TrendChip.Indicator>...</TrendChip.Indicator>
  <TrendChip.Prefix>...</TrendChip.Prefix>
  <TrendChip.Value>...</TrendChip.Value>
  <TrendChip.Suffix>...</TrendChip.Suffix>
</TrendChip>

• TrendChip: Root container built on top of heroui-native's Chip. Derives the chip color from the trend prop (up -> success, neutral -> warning, down -> danger).
• TrendChip.Indicator: Renders the default trend arrow. Pass a custom SVG child to replace it; the child inherits size and color from the chip context.
• TrendChip.Value: Numeric content rendered as a Chip.Label with tabular figures so digits align vertically across chips.
• TrendChip.Prefix: Optional inline label rendered before the value (e.g. $, +).
• TrendChip.Suffix: Optional inline label rendered after the value, muted by default (e.g. %, vs last month).

Usage

Basic usage

Pass a string or number as children and the default indicator + value layout is applied automatically.

<TrendChip trend="up">+12.4%</TrendChip>

Trend direction

Choose the trend direction with the trend prop. This sets both the arrow icon and the chip color.

<TrendChip trend="up">+12.4%</TrendChip>
<TrendChip trend="neutral">0.0%</TrendChip>
<TrendChip trend="down">-3.2%</TrendChip>

Variants

Switch visual styles with the variant prop.

<TrendChip variant="primary" trend="up">+12.4%</TrendChip>
<TrendChip variant="secondary" trend="up">+12.4%</TrendChip>
<TrendChip variant="tertiary" trend="up">+12.4%</TrendChip>
<TrendChip variant="soft" trend="up">+12.4%</TrendChip>

Sizes

Control the chip size with the size prop.

<TrendChip size="sm" trend="up">+4.1%</TrendChip>
<TrendChip size="md" trend="up">+4.1%</TrendChip>
<TrendChip size="lg" trend="up">+4.1%</TrendChip>

Custom indicator

Pass a custom SVG child to TrendChip.Indicator to replace the default arrow. Size and color are inherited from the chip context.

<TrendChip trend="up">
  <TrendChip.Indicator>
    <SparkleIcon />
  </TrendChip.Indicator>
  <TrendChip.Value>+42.0%</TrendChip.Value>
</TrendChip>

Prefix and suffix

Compose the chip content with TrendChip.Prefix, TrendChip.Value, and TrendChip.Suffix. Use TrendChip.Indicator without children to keep the default arrow.

<TrendChip trend="up">
  <TrendChip.Indicator />
  <TrendChip.Prefix>+</TrendChip.Prefix>
  <TrendChip.Value>$1,248</TrendChip.Value>
</TrendChip>

<TrendChip trend="down">
  <TrendChip.Indicator />
  <TrendChip.Value>-5.9</TrendChip.Value>
  <TrendChip.Suffix>vs last month</TrendChip.Suffix>
</TrendChip>

Example

import { TrendChip } from 'heroui-native-pro';
import { Text, View } from 'react-native';

const ROWS = [
  { label: 'Revenue', value: '+112.4%', trend: 'up' },
  { label: 'Signups', value: '+8.00%', trend: 'up' },
  { label: 'Churn', value: '-3.20%', trend: 'down' },
  { label: 'Traffic', value: '+0.10%', trend: 'neutral' },
] as const;

export default function TrendChipExample() {
  return (
    <View className="gap-2 w-52">
      {ROWS.map((row) => (
        <View
          key={row.label}
          className="flex-row items-center justify-between gap-4"
        >
          <Text className="text-xs text-muted">{row.label}</Text>
          <TrendChip trend={row.trend}>{row.value}</TrendChip>
        </View>
      ))}
    </View>
  );
}

API Reference

TrendChip

Extends heroui-native Chip except for size, color, and variant.

TrendDirection

TrendChip.Indicator

TrendArrowIconProps

TrendChip.Value

Extends heroui-native Chip.Label. Renders with tabular figures so digits align vertically across chips.

TrendChip.Prefix

Extends heroui-native Chip.Label. Rendered inline before the value.

TrendChip.Suffix

Extends heroui-native Chip.Label. Rendered inline after the value with a muted color.

Hooks

useTrendChip

Hook to access the TrendChip context. Must be used within a TrendChip component.

import { useTrendChip } from 'heroui-native-pro';

const { size, trend, variant } = useTrendChip();

Returns