LangSwitcher Component

Overview

The LangSwitcher component gives your users a simple way to change your site's display language. Once installed, you can drop it anywhere in your app.

Installation Options

There are two ways to add the LangSwitcher to your project:

Option 1: Use the CLI (Recommended)

The easiest approach—Stringer will generate a component tailored to your project's setup (Tailwind vs. vanilla CSS, TypeScript vs. JavaScript, etc.):

1. Run stringer
2. Select Add LangSwitcher Component
3. The component is injected into your /components folder automatically

Option 2: Copy & Paste

If you prefer to grab the code manually:

1. Visit stringer-cli.com/components
2. Preview the available variants
3. Copy your preferred version into your project

Usage

Once installed, use the component anywhere in your templates:

<LangSwitcher />

Suggested Placement

We recommend placing the LangSwitcher in your site header, typically on the right side before any existing items (like user menu or login button):

<header>
  <nav>
    <!-- Your logo and nav links -->
  </nav>
  <div class="header-right">
    <LangSwitcher />
    <!-- Other items like user menu -->
  </div>
</header>

Customization

The generated component comes with sensible defaults, but you can customize:

• Styling — Adjust colors, spacing, and sizing to match your design
• Dropdown behavior — Modify open/close animations
• Flag icons — Add or remove country flags for each language

Next Steps

• Commands Reference — View all CLI commands
• Frameworks — Framework-specific setup guides
• Configuration — Manage your project settings