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 it with npx shadcn@latest add @cruiseui/achievement-toast.
Install
Terminal
npx shadcn@latest add @cruiseui/achievement-toastFirst time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.
Example
Corners
Achievement unlocked
First ride
You booked your first trip.
+100 XP"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>
);
}
<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>Needs theme.css. Interactive parts (menus, tabs, drawers) also need the script in the spec for that component.
When to use it
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).
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.