GrowShrinkTag

pro

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

Get the code
12.5%-8.3%0%

Installation

Add this component with the NateUI CLI.

npx nateui@latest add GrowShrinkTag

Examples

Without Icon

Get the code
+25 units-15 units

Prefix and Suffix

Get the code
+$320$-45
12.5%-3.2 pts

Custom Style

Get the code
18.2%-5.7%
18.2%-5.7%

API

PropDescriptionTypeDefault
valueThe numeric value to display. Positive values show green/success styling, negative values show red/destructive styling.number0
showIconWhether to show the directional arrow icon.booleantrue
prefixContent to display before the value.ReactNode | string—
suffixContent to display after the value.ReactNode | string—
classNameAdditional CSS classes to apply to the tag.string—