A LITTLE SPACE TO EXPERIMENT

Make a moment your own.

Pick a starting point. Change a few things. Take the working code with you.

A first unlock in four small steps.

Make it yours

A few details. A little personality.

Achievement name

Choose a symbol

Unlock after 3 lessons

120

Preview style

Changes restart the preview so you can try your new rule from the beginning.

LIVE PREVIEWIn progress

Curious mind

Keep learning, one lesson at a time.

Learning0 / 3

3 lessons to your next small win.

Your achievements

0 / 1

Curious mindKeep learning, one lesson at a time.Locked

'use client';

import { AchievementBuilder, AchievementProvider, AchievementsWidget, useSimpleAchievements } from 'react-achievements';

const achievements = AchievementBuilder.create()
  .withMetric("lessonsCompleted")
  .withCondition((metrics) => Number(metrics["lessonsCompleted"] ?? 0) >= 3)
  .withAward({
    title: "Curious mind",
    description: "Keep learning, one lesson at a time.",
    icon: "✦",
  })
  .build();

function Demo() {
  const { track, increment, unlockedCount } = useSimpleAchievements();
  return (
    <main>
      <h1>{"Curious mind"}</h1>
      <button onClick={() => increment("lessonsCompleted")}>Complete a lesson</button>
      <p aria-live="polite">{unlockedCount} achievement unlocked</p>
      <AchievementsWidget placement="inline" theme="minimal" label="View all achievements" />
    </main>
  );
}

export default function App() {
  return (
    <AchievementProvider achievements={achievements} ui={{ enableConfetti: true, enableNotifications: true }}>
      <Demo />
    </AchievementProvider>
  );
}

Want to skip the setup?

Open the minimal example in your browser, or clone the full authenticated starter.

Open runnable example