docscn

Language select

Switch between the languages of your docs.

Installation

npx shadcn@latest add @docscn/language-select

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 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:

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

Prop

Type

Theme switch

Switch between light, dark and system themes.

MDX components

The components for Fumadocs MDX content: code blocks, headings, images, tables, cards and callouts.

On this page

InstallationUsageProps