i18n Translation Guide

Purpose: Comprehensive guide for implementing internationalization (i18n) in Ballee using react-i18next

When to Use: When adding user-facing text, creating UI components, implementing toast messages, or translating existing hardcoded text

Overview

Ballee uses react-i18next with the Trans component from @kit/ui/trans for all internationalization. This skill provides battle-tested patterns from translating 100+ strings across marketing pages and admin dialogs.

Framework Stack

• Library: react-i18next + i18next
• Component: <Trans> from @kit/ui/trans
• Hook: useTranslation() from react-i18next
• Translation Files: apps/web/public/locales/en/*.json