Status Effect Stack

status-effect-stack

HUDReadycomponent

Buff and debuff icons with optional stacks and countdown timers.

npx shadcn@latest add @gamecn/status-effect-stack

Live Preview

Rendered with the component style selected in the top-right selector.

Frame

Scale100%

GuardArmor raised2

BurnDamage over time8s

RiftUnstable magic14s

Examples

Basic setup, game-state usage, and customization paths.

Install Status Effect Stack and render it with the default GameCN treatment.

npx shadcn@latest add @gamecn/status-effect-stack

import { StatusEffectStack } from '@/components/ui/status-effect-stack'

Use Status Effect Stack with richer game-state data such as variants, empty states, compact density, or critical states.

<StatusEffectStack
  className="max-w-md"
/>

Swap artwork, tune tokens, and wire the installed copy to your live game state.

<StatusEffectStack
  iconSrc="/game-assets/status-effect-stack.png"
/>