---
title: "Language select"
description: "Switch between the languages of your docs."
url: https://docscn.dev/docs/components/language-select
lastModified: 2026-10-08T17:19:39.000Z
---

# Language select (/docs/components/language-select)

> Switch between the languages of your docs.

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @docscn/language-select
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @docscn/language-select
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @docscn/language-select
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @docscn/language-select
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

When `RootProvider`'s `i18n` prop lists more than one language, the docs, notebook and home layouts show a language switcher: in the docs layout's sidebar, and in the navbar of the notebook and home layouts. See [Internationalization](/docs/internationalization) to set up the languages.

`LanguageSelect` is a button that opens a popover with the languages. Its children are the button's content, and `LanguageSelectText` shows the current language's name:

```tsx
import { Languages } from "lucide-react";
import {
  LanguageSelect,
  LanguageSelectText,
} from "@/components/docs/layouts/shared/slots/language-select";

<LanguageSelect>
  <Languages />
  <LanguageSelectText />
</LanguageSelect>;
```

Choosing a language calls `i18n.onLocaleChange` if you passed one to `RootProvider`. Otherwise it swaps the locale at the start of the URL, following your i18n config's `hideLocale` option.

## Props [#props]

<TypeTable
  type="{
  variant: {
    description: <>The shadcn/ui button variant.</>,
    type: &#x22;ButtonVariant&#x22;,
    default: '&#x22;ghost&#x22;',
  },
}"
/>