FeaturesTranslations

Language Selector

Allow users to switch between languages.

This component is accessible with the @kit/i18n/ui package.

import {
    LanguageSelector,
    LanguageSelectorContent,
    LanguageSelectorItems,
    LanguageSelectorTrigger,
} from '@kit/i18n/ui';

export function LanguageSelectorDemo() {
    return (
        <LanguageSelector reload>
            <LanguageSelectorTrigger className='max-w-3xs' />
            <LanguageSelectorContent>
                <LanguageSelectorItems />
            </LanguageSelectorContent>
        </LanguageSelector>
    );
}

Features

Multiple display modes: Choose between dropdown and square flag-only variants
Automatic language detection: Uses the current i18n instance from react-i18next
Flag icons: Displays country flags for each language
Customizable rendering: Support for custom item and trigger rendering
Accessible: Built on top of Radix UI primitives for full accessibility

Anatomy

import { LanguageSelector, LanguageSelectorBase } from '@kit/i18n/language-selector';

<LanguageSelector>
    <LanguageSelectorTrigger />
    <LanguageSelectorContent>
        <LanguageSelectorItems />
    </LanguageSelectorContent>
</LanguageSelector>

Base component

If you don't need heavy customization, you can use the LanguageSelectorBase component.

import { LanguageSelectorBase } from '@kit/i18n/ui';

export function LanguageSelectorDemo() {
    return (
        <div className="flex w-full max-w-3xs flex-col items-center gap-8">
            <LanguageSelectorBase />
            <LanguageSelectorBase square />
        </div>
    );
}

<LanguageSelectorBase />

API Reference

Root

LanguageSelectorRootProps

Prop	Type	Default
`square`	`boolean`
`reload`	`boolean`	`true`
`onChange`	`function`
`children*`	`React.ReactNode`

Flag

LanguageSelectorFlagProps

Prop	Type	Default
`locale*`	`string`
`className`	`string`

Trigger

LanguageSelectorTriggerProps

Prop	Type	Default
`className`	`string`
`renderValue`	`function`

Items

LanguageSelectorItemsProps

Prop	Type	Default
`renderItem`	`function`

Base

LanguageSelectorBaseProps

Prop	Type	Default
`reload`	`boolean`	`true`
`square`	`boolean`
`renderItem`	`function`
`className`	`string`
`onChange`	`function`

Translation Usage

Learn how to use the translations in your application.

CMS

Integrate your content management system with your application.

How is this guide?

Last updated on 10/17/2025