Searchable language switcher with flags, native names, animated menu, keyboard navigation and RTL support. shadcn theme tokens, classNames slots.
"use client";
// Generated by scripts/build-21st.mjs from src/21st/demos/language-switcher.tsx. Edit the source, not this file.
import { LanguageSwitcher } from "@/components/ui/language-switcher";
const locales = [
{ code: "en" },
{ code: "fr" },
{ code: "es" },
{ code: "de" },
{ code: "hi" },
{ code: "ja" },
{ code: "ar" },
];
const settings = {
showFlags: true,
label: "native",
variant: "outline",
size: "default",
searchable: true,
showCode: false,
};
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props };
return (
<div className="flex min-h-[420px] w-full items-start justify-center p-10">
<LanguageSwitcher
locales={locales}
defaultValue="en"
showFlags={s.showFlags}
label={s.label as "native" | "english"}
variant={s.variant as "outline" | "ghost" | "secondary"}
size={s.size as "sm" | "default" | "lg"}
searchable={s.searchable}
showCode={s.showCode}
/>
</div>
);
}
Part of Babelize Elements — browse the full library on 21st.dev.