1

Language

A footer with a utility column: wordmark, icon links, a language select, cookie settings and copyright on the start side, four link columns on the end side.

Dependencies

@radix-ui/react-slot@hugeicons/react@hugeicons/core-free-icons

Interaction Type

A footer landmark with a native language select, so keyboard, screen reader and mobile pickers all work as the platform expects. The select has a hidden label, a 44px height and the accent focus ring. Icon links and the cookie link follow the shared footer link styles.

Props

Options you can pass to customize this component.

Prop
Type
Description
languages
{ value: string; label: string }[]

Options in the select. Write each label in its own language.

language
string

Controlled language value.

defaultLanguage
string

Initial language when uncontrolled. Defaults to "en".

onLanguageChange
(value: string) => void

Called when a language is picked.

languageLabel
string

Hidden label of the select. Defaults to "Language".

socials
{ label: string; href: string; icon: ReactNode }[]

Icon links with 44px targets. The label becomes the aria-label. Defaults to GitHub and X.

columns
{ title: string; links: { label: string; href: string }[] }[]

Titled link columns.

cookieLabel
string

Cookie settings link text. Empty hides it.

cookieHref
string

Where the cookie link points.

brand
ReactNode

Wordmark or logo. Defaults to the "Nexvyn UI" wordmark.

copyright
ReactNode

Small print line. Defaults to "© 2026 Nexvyn". Pass null to hide it.

className
string

Merged onto the footer with cn().

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-language.json

How to use

<FooterLanguage
  language={locale}
  onLanguageChange={setLocale}
  languages={[
    { value: 'en', label: 'English' },
    { value: 'fr', label: 'Français' },
  ]}
/>

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
acme.app
npx shadcn@latest addhttps://ui.nexvyn.dev/r/footer-language.json