GrowShrinkTag

Pro

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

12.5%-8.3%0%

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add GrowShrinkTag

pnpm dlx @nateui/cli@latest add GrowShrinkTag

yarn dlx @nateui/cli@latest add GrowShrinkTag

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`	—