# Dashboard dropdown 01

> A language selection dropdown with flag icons and language options for internationalization and localization features.

A shadcn/ui block from the [@shadcn-studio](https://shadcnstudio.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcn-studio/dashboard-dropdown-01).

- Page, with a live preview: https://shadcn.exchange/r/shadcn-studio/dashboard-dropdown-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcn-studio/dashboard-dropdown-01-light-2550be757dd12935.png
- Registry item: https://shadcnstudio.com/r/new-york-v4/dashboard-dropdown-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnstudio.com/r/new-york-v4/dashboard-dropdown-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`, `dropdown-menu`

## Files

### `src/registry/new-york/blocks/dashboard-and-application/dashboard-dropdown/dashboard-dropdown-01/page.tsx`

```tsx
import { LanguagesIcon } from 'lucide-react'

import { Button } from '@/registry/new-york/ui/button'

import LanguageDropdown from '@/registry/new-york/components/blocks/dropdown-language'

const DropdownPage = () => {
  return (
    <div className='flex h-70 items-start justify-center p-8'>
      <LanguageDropdown
        defaultOpen
        align='center'
        trigger={
          <Button variant='outline' size='icon'>
            <LanguagesIcon />
          </Button>
        }
      />
    </div>
  )
}

export default DropdownPage
```

### `src/registry/new-york/components/blocks/dropdown-language.tsx`

```tsx
'use client'

import { useState } from 'react'
import type { ReactNode } from 'react'

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger
} from '@/registry/new-york/ui/dropdown-menu'

type Props = {
  trigger: ReactNode
  defaultOpen?: boolean
  align?: 'start' | 'center' | 'end'
}

const LanguageDropdown = ({ defaultOpen, align, trigger }: Props) => {
  const [language, setLanguage] = useState('english')

  return (
    <DropdownMenu defaultOpen={defaultOpen}>
      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
      <DropdownMenuContent className='w-50' align={align || 'end'}>
        <DropdownMenuRadioGroup value={language} onValueChange={setLanguage}>
          <DropdownMenuRadioItem
            value='english'
            className='data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground pl-2 text-base [&>span]:hidden'
          >
            English
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem
            value='german'
            className='data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground pl-2 text-base [&>span]:hidden'
          >
            Deutsch
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem
            value='spanish'
            className='data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground pl-2 text-base [&>span]:hidden'
          >
            Española
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem
            value='portuguese'
            className='data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground pl-2 text-base [&>span]:hidden'
          >
            Português
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem
            value='korean'
            className='data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground pl-2 text-base [&>span]:hidden'
          >
            한국인
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export default LanguageDropdown
```