registry:component

Language Dropdown

v0.1.0alpha

Globe icon dropdown for selecting the active language.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/language-dropdown.json

npx shadcn@latest add https://registry.aavya.com/r/language-dropdown.json

Live Preview

Dependencies

buttondropdown-menu

Usage Snippet

import LanguageDropdown from '@/components/blocks/language-dropdown.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <LanguageDropdown />
    </div>
  )
}

Source Preview

'use client'

import { Check, Globe } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'

const languages = [
  { code: 'en', label: 'English', active: true },
  { code: 'fr', label: 'Français', active: false },
  { code: 'de', label: 'Deutsch', active: false },
  { code: 'es', label: 'Español', active: false },
]

export function LanguageDropdown() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" size="icon" aria-label="Language">
          <Globe className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuLabel>Language</DropdownMenuLabel>
        <DropdownMenuSeparator />
        {languages.map((lang) => (
          <DropdownMenuItem key={lang.code} className="gap-2">
            <span className="flex-1">{lang.label}</span>
            {lang.active && <Check className="h-3.5 w-3.5 text-primary" />}
          </DropdownMenuItem>
        ))}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}