A flat language switcher for screens with no Settings behind them.
Import it from rei-kit:
import { LocaleLinks } from 'rei-kit'
Open LocaleLinks in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { LocaleLinks } from 'rei-kit'
const locale = ref('system')
</script>
<template>
<LocaleLinks v-model="locale" :locales="['en', 'tr']" :labels="{ en: 'English', tr: 'Türkçe' }" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
locales | readonly L[] | yes | |
labels | Record<L, string> | yes | Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. |
label | string | '' | Accessible name for the group. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.