# Achievement toast

Achievement toast is a neobrutalist React component from Cruise UI. A game toast: trophy chip, "Achievement unlocked", the title, a line and an XP reward.

Install (with the @cruiseui registry in components.json, see Installation):

```bash
npx shadcn@latest add @cruiseui/achievement-toast
```

Import: `import { CruiseAchievementToast } from "@/components/cruise/achievement-toast";`

## When to use

Celebrating a milestone in a game or a gamified app.

## When not to

Errors or anything people must act on (use a Toast or an Alert).

## Example (React)

```tsx
"use client";

import { CruiseAchievementToast } from "@/components/cruise/achievement-toast";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseToaster, useCruiseToast } from "@/components/cruise/toaster";

function Unlock() {
  const { toast } = useCruiseToast();
  return (
    <CruiseButton
      className="self-start"
      onClick={() =>
        toast({
          duration: 4000,
          render: (dismiss) => (
            <CruiseAchievementToast title="Road warrior" xp={250} duration={0} onDismiss={dismiss}>
              10 trips in a week.
            </CruiseAchievementToast>
          ),
        })
      }
    >
      Unlock an achievement
    </CruiseButton>
  );
}

export default function AchievementToastExample() {
  return (
    <CruiseToaster position="top-center">
      <div className="flex flex-col gap-6">
        <CruiseAchievementToast title="First ride" xp={100} duration={0}>
          You booked your first trip.
        </CruiseAchievementToast>
        <Unlock />
      </div>
    </CruiseToaster>
  );
}
```

## HTML

Needs theme.css (https://cruiseui.dev/theme.css).

```html
<div class="achievement" role="status">
  <span class="achievement-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M8 21h8M12 17v4M7 4h10v5a5 5 0 0 1-10 0Z"/><path d="M17 5h3v2a3 3 0 0 1-3 3M7 5H4v2a3 3 0 0 0 3 3"/></svg></span>
  <div class="achievement-body">
    <span class="achievement-eyebrow">Achievement unlocked</span>
    <p class="achievement-title">First ride</p>
    <p class="achievement-text">You booked your first trip.</p>
    <span class="achievement-xp">+100 XP</span>
  </div>
</div>
```

## Props: CruiseAchievementToast

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | — | — |
| `children?` | `ReactNode` | — | — |
| `xp?` | `number` | — | Reward, shown as "+100 XP". |
| `icon?` | `ReactNode` | — | Default: Lucide trophy. |
| `eyebrow?` | `string` | `"Achievement unlocked"` | — |
| `duration?` | `number` | `4000` | Milliseconds before onDismiss is called; 0 keeps it open. |
| `onDismiss?` | `(() => void)` | — | — |
| `className?` | `string` | — | — |

## Accessibility

- role="status": announced politely, never interrupts.
- Closes itself after about 4 seconds; it has a Dismiss button too.
- No pop-in movement under reduced motion.