GrowShrinkTag

free

GrowShrinkTag displays a numeric value with directional arrows and color coding for growth (positive) or decline (negative).

react-icons

Preview

Dark

12.5%-8.3%0%

import GrowShrinkTag from '@/components/composites/GrowShrinkTag';

export default function UsageDemo() {
  return (
    <div className="flex items-center gap-4">
      <GrowShrinkTag value={12.5} suffix="%" />
      <GrowShrinkTag value={-8.3} suffix="%" />
      <GrowShrinkTag value={0} suffix="%" />
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add GrowShrinkTag

Examples

Without Icon

Preview

Dark

+25 units-15 units

import GrowShrinkTag from '@/components/composites/GrowShrinkTag';

export default function WithoutIconDemo() {
  return (
    <div className="flex items-center gap-4">
      <GrowShrinkTag
        value={25}
        showIcon={false}
        prefix="+"
        suffix=" units"
      />
      <GrowShrinkTag
        value={-15}
        showIcon={false}
        suffix=" units"
      />
    </div>
  );
}

Prefix and Suffix

Preview

Dark

+$320$-45

12.5%-3.2 pts

import GrowShrinkTag from '@/components/composites/GrowShrinkTag';

export default function PrefixSuffixDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-4">
        <GrowShrinkTag value={320} prefix="+$" suffix="" />
        <GrowShrinkTag value={-45} prefix="$" suffix="" />
      </div>
      <div className="flex items-center gap-4">
        <GrowShrinkTag value={12.5} suffix="%" />
        <GrowShrinkTag value={-3.2} suffix=" pts" />
      </div>
    </div>
  );
}

Custom Style

Preview

Dark

18.2%-5.7%

import GrowShrinkTag from '@/components/composites/GrowShrinkTag';

export default function CustomStyleDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-4">
        <GrowShrinkTag
          value={18.2}
          suffix="%"
          className="bg-transparent px-0 font-semibold"
        />
        <GrowShrinkTag
          value={-5.7}
          suffix="%"
          className="bg-transparent px-0 font-semibold"
        />
      </div>
      <div className="flex items-center gap-4">
        <GrowShrinkTag
          value={18.2}
          suffix="%"
          className="bg-card border"
        />
        <GrowShrinkTag
          value={-5.7}
          suffix="%"
          className="bg-card border"
        />
      </div>
    </div>
  );
}

API

Prop	Description	Type	Default
`value`	The numeric value to display. Positive values show green/success styling, negative values show red/destructive styling.	`number`	`0`
`showIcon`	Whether to show the directional arrow icon.	`boolean`	`true`
`prefix`	Content to display before the value.	`ReactNode \| string`	—
`suffix`	Content to display after the value.	`ReactNode \| string`	—
`className`	Additional CSS classes to apply to the tag.	`string`	—