> ## Documentation Index
> Fetch the complete documentation index at: https://anylang.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# shadcn Selector

> Build an anylang language selector with the shadcn/ui Select component.

Use shadcn/ui's `Select` component when your app already uses shadcn and you want the language selector to match the rest of your interface.

## Install Select

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npx shadcn@latest add select
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm dlx shadcn@latest add select
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn dlx shadcn@latest add select
    ```
  </Tab>

  <Tab title="bun">
    ```bash theme={null}
    bunx shadcn@latest add select
    ```
  </Tab>
</Tabs>

## Create the selector

Connect shadcn's controlled `Select` to anylang with `value` and `onValueChange`.

```tsx theme={null}
import { useLanguage, type LanguageCode } from "@/anylang";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

export function LanguageSelector() {
  const { language, languages, setLanguage } = useLanguage();

  return (
    <Select
      value={language}
      onValueChange={(value) => setLanguage(value as LanguageCode)}
    >
      <SelectTrigger className="w-[180px]" aria-label="Select language">
        <SelectValue placeholder="Language" />
      </SelectTrigger>
      <SelectContent>
        {languages.map((language) => (
          <SelectItem key={language.code} value={language.code}>
            {language.nativeLabel}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}
```

## Use it anywhere

Render the selector anywhere inside `AnyLangProvider`.

```tsx theme={null}
import { LanguageSelector } from "@/components/language-selector";

export function Header() {
  return (
    <header>
      <LanguageSelector />
    </header>
  );
}
```

<Info>
  The selector reads available languages from the generated anylang runtime, so it updates when you change `targetLocales` and run `anylang scan` again.
</Info>