@molecule/app-achievement-card-react

Badge / achievement unlock card.

Exports <AchievementCard>.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { AchievementCard } from '@molecule/app-achievement-card-react'

;<AchievementCard
  icon={<span>🏆</span>}
  name="First Login"
  description="Signed in for the first time."
  earned
  earnedAt="Jan 3, 2025"
  tier="Common"
/>

Type

feature

Installation

npm install @molecule/app-achievement-card-react @molecule/app-i18n @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
npm install -D @types/react

API

Interfaces

`AchievementCardProps`

Props for AchievementCard.

interface AchievementCardProps {
  /** Achievement name. */
  name: ReactNode
  /** Description / what it took to earn. */
  description?: ReactNode
  /** Icon / illustration slot. */
  icon: ReactNode
  /** Whether the user has earned this achievement. */
  earned?: boolean
  /** Earned-at display. */
  earnedAt?: ReactNode
  /**
   * Label shown before `earnedAt` on earned achievements. Overrides the
   * translated / `defaultValue` `'Earned'` (prop > `t()` > default).
   */
  earnedLabel?: string
  /**
   * Label shown on locked achievements (not earned, no progress). Overrides
   * the translated / `defaultValue` `'Locked'` (prop > `t()` > default).
   */
  lockedLabel?: string
  /** Optional progress data (for in-progress achievements). */
  progress?: { value: number; max: number }
  /** Optional rarity / tier label ("Legendary", "Common"). */
  tier?: ReactNode
  /** Extra classes. */
  className?: string
}

Functions

`AchievementCard(props)`

Badge / achievement unlock card — icon + name + description + earned state. Locked achievements render greyed-out.

function AchievementCard({
  name,
  description,
  icon,
  earned,
  earnedAt,
  earnedLabel,
  lockedLabel,
  progress,
  tier,
  className,
}: AchievementCardProps): ReactElement<unknown, string | JSXElementConstructor<any>>

props — Component props (see AchievementCardProps).

Injection Notes

Requirements

Peer dependencies:

@molecule/app-i18n ^1.0.1
@molecule/app-react ^1.0.1
@molecule/app-ui ^1.0.1
@molecule/app-ui-react ^1.0.1
react ^18.0.0 || ^19.0.0

Runtime Dependencies

@molecule/app-i18n
@molecule/app-react
@molecule/app-ui
@molecule/app-ui-react
react

The "Earned"/"Locked" state labels flow through t() with English defaultValue fallbacks under the achievementCard.* keys, so a wired locale bond (or the host app's own locale) can translate them. Each is also overridable per-instance via the earnedLabel / lockedLabel props (prop > t() > default).

`@molecule/app-achievement-card-react`

How it works

Reference