Ability Card

ability-card

CardsReadycomponent

A compact ability card with rarity, cost, cooldown, and range metadata.

npx shadcn@latest add @gamecn/ability-card

Live Preview

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

Frame

Scale100%

Legendary

Dash through the frontline and refund stamina on execute.

Examples

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

Install Ability Card and render it with the default GameCN treatment.

npx shadcn@latest add @gamecn/ability-card

import { AbilityCard } from '@/components/ui/ability-card'

Use Ability Card with richer game-state data such as variants, empty states, compact density, or critical states.

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

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

<AbilityCard
  iconSrc="/game-assets/ability-card.png"
/>