Interactive Components

Language Selector Examples

Copy-paste these UI components for your i18n implementation. All selectors are synchronized - try clicking any one!

← Back to Home

Current Language

English

Choose Your Style

6 different ways to let users switch languages

📋 Simple Dropdown

Best for settings pages and minimal footprint.

🎌 Flag Buttons

Best for headers with 3-6 primary languages.

🔘 Icon Grid

Best for compact headers and mobile navigation.

🌍 Floating Globe

Best for fixed position with many languages.

💊 Pill Selector

Best for modern apps with 3-5 languages.

🎠 Carousel

🇺🇸 English

Best for interactive browsing of all languages.

Integration Code

Copy this code to add language switching to your project

                    // React + react-i18next example
                    import { useTranslation } from 'react-i18next';

                    const languages = [
                    { code: 'en', name: 'English', flag: '🇺🇸' },
                    { code: 'es', name: 'Español', flag: '🇪🇸' },
                    { code: 'fr', name: 'Français', flag: '🇫🇷' },
                    // Add more from your locales folder...
                    ];

                    export function LanguageSelector() {
                    const { i18n } = useTranslation();

                    return (
                    <select
                    value={i18n.language}
                    onChange={(e) => i18n.changeLanguage(e.target.value)}
                    >
                    {languages.map((lang) => (
                    <option key={lang.code} value={lang.code}>
                    {lang.flag} {lang.name}
                    </option>
                    ))}
                    </select>
                    );
                    }
                