Language Selector

A presentational language switcher built on shadcn Select. You pass the list of languages, the current value, and a change handler—connect it to Paraglide, react-i18next, URL prefixes, or any store.

Language Selector

Installation

pnpm dlx shadcn@latest add https://ui.isaacfei.com/r/language-selector.json

npx shadcn@latest add https://ui.isaacfei.com/r/language-selector.json

yarn dlx shadcn@latest add https://ui.isaacfei.com/r/language-selector.json

bun x shadcn@latest add https://ui.isaacfei.com/r/language-selector.json

With a namespace:

npx shadcn@latest add @f-ui/language-selector

Declares lucide-react and pulls select from the default registry if needed. The CLI writes components/f-ui/language-selector.tsx (see the registry manifest).

Usage

import { LanguageSelector } from '@/components/f-ui/language-selector';

const languages = [
  { value: 'en', label: 'English' },
  { value: 'zh', label: '中文' },
];

<LanguageSelector
  languages={languages}
  value={currentLocale}
  onValueChange={setLocale}
  ariaLabel="Language"
/>

In this app, value / onValueChange are wired to Paraglide (getLocale, setLocale, locales). Any string identifier works as long as it matches one of your languages entries.

Composition

Select → trigger (globe icon + SelectValue, label hidden on very small screens) → SelectContent → SelectItem per language.

Example

Controlled locale with English and 中文 labels.

"use client";

import { useState } from "react";

import { LanguageSelector } from "@/components/f-ui/language-selector";

const languages = [
  { value: "en", label: "English" },
  { value: "zh", label: "中文" },
];

export function LanguageSelectorDemo() {
  const [value, setValue] = useState("en");

  return (
    <div className="max-w-sm space-y-3">
      <LanguageSelector
        languages={languages}
        value={value}
        onValueChange={setValue}
        ariaLabel="Language"
      />
      <p className="text-muted-foreground text-xs">
        Selected locale:{" "}
        <span className="text-foreground font-medium tabular-nums">{value}</span>
      </p>
    </div>
  );
}

API Reference

LanguageOption: { value: string; label: string }.