Achievement Toast

achievement-toast

FeedbackBetacomponent

A game achievement notification with rarity, points, and optional progress.

npx shadcn@latest add @gamecn/achievement-toast

Live Preview

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

Frame

Scale100%

Examples

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

Install Achievement Toast and render it with the default GameCN treatment.

npx shadcn@latest add @gamecn/achievement-toast

import { AchievementToast } from '@/components/ui/achievement-toast'

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

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

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

<AchievementToast
  iconSrc="/game-assets/achievement-toast.png"
/>