Brand components

Language bar

a non-modal bottom bar that offers the other language once, written in that language.

The preview does not store an answer (persist={false}); the button brings the bar back.

Install

bash

npx shadcn add @eloquent/language-bar

Usage

tsx

import { LanguageBar } from "@/components/ui/language-bar";

// Last child of the page, so it sticks to the bottom.
<LanguageBar
  locale="en"
  otherLocale="vi"
  switchHref="/vi/about"
  message="Bạn muốn đọc trang này bằng tiếng Việt?"
  switchLabel="Đọc bằng tiếng Việt"
  keepLabel="Giữ tiếng Anh"
  closeLabel="Đóng"
/>

The answer is saved to localStorage["eloquent-lang"] and to a NEXT_LOCALE cookie that lasts a year, and the bar is not shown again. Every prop is a string or boolean, so a Server Component can render it.

States

State	Treatment
Shown	1px ink top rule, slides up in 150ms; no motion under `prefers-reduced-motion`
Mobile	Full width, buttons stacked, ✕ top right
Answered	Removed; not shown again on later visits
Storage blocked	Still shows and hides; may return next visit

Keyboard

Key	Action
Tab	Primary, secondary, ✕ in turn; the bar never takes focus by itself
Enter / Space	Activates the focused control
Esc	Keeps the current language and hides the bar; focus returns to where it was

Vietnamese

Ink adaptation

Brand item with no upstream. A paper ground with one hairline ink rule on top, no shadow and no radius; the primary and secondary buttons are the Button item's ink fill and outline.