Language Switcher Pill

Component 2

About

Segmented pill locale picker with a spring-animated indicator. Accessible radio group with RTL-aware arrow keys, optional flags, two variants, three sizes.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Language Switcher Pill to your project and fits it to your theme.

Code

How Language Switcher Pill is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { LanguageSwitcherPill, type Locale } from "@/components/ui/language-switcher-pill";

const locales: Locale[] = [
  { code: "en", label: "EN" },
  { code: "fr", label: "FR" },
  { code: "de", label: "DE" },
  { code: "ja", label: "日本" },
  { code: "ar", label: "عربي" },
];

const greetings: Record<string, string> = {
  en: "Welcome back, Sarah",
  fr: "Bon retour, Sarah",
  de: "Willkommen zurück, Sarah",
  ja: "おかえりなさい、Sarahさん",
  ar: "مرحبًا بعودتك يا سارة",
};

export default function LanguageSwitcherPillDemo() {
  const [locale, setLocale] = React.useState("en");

  return (
    <div className="flex min-h-[320px] w-full flex-col items-center justify-center gap-10 bg-background p-6">
      <div className="flex flex-col items-center gap-4">
        <LanguageSwitcherPill locales={locales} locale={locale} onLocaleChange={setLocale} />
        <p
          lang={locale}
          dir={locale === "ar" ? "rtl" : "ltr"}
          className="text-lg font-medium text-foreground"
        >
          {greetings[locale]}
        </p>
      </div>

      <div className="flex flex-wrap items-center justify-center gap-4">
        <LanguageSwitcherPill
          aria-label="Select language (outline, with flags)"
          locales={locales}
          defaultLocale="fr"
          variant="outline"
          size="sm"
          showFlags
        />
        <LanguageSwitcherPill
          aria-label="Select language (large)"
          locales={locales.slice(0, 3)}
          defaultLocale="de"
          size="lg"
        />
      </div>
    </div>
  );
}