Installation

Babelize Elements drops into any React + Tailwind CSS project — Next.js, Vite, Remix, or anything else that bundles React. The package ships TypeScript types, both ESM and CJS builds, and no runtime dependencies beyond React and Tailwind CSS.

Package Manager

Install the full library with your preferred package manager:

Tell Tailwind about the package

Tailwind only generates the classes it can find in your source files, and it does not scan node_modules. Without this step the components render unstyled.

Point Tailwind at the installed package once:

@import "tailwindcss";
@source "../node_modules/@babelize/elements/dist";

This step is only for the npm package. Components installed with the shadcn CLI live in your own source tree, which Tailwind already scans.

Install individual components

Prefer installing components one at a time, straight into your codebase? Use the shadcn CLI:

npx shadcn@latest registry add @elements=https://elements.babelize.co/r/{name}.json
npx shadcn@latest add @elements/language-switcher

Or use the CLI that ships inside the package:

npx @babelize/elements add language-switcher

Either way, the component (plus its cn utility and dependencies) is written into your components/ui/ directory, and you own the code from then on.

Prerequisites

Verify Installation

Import a component to confirm everything is wired up:

import { LanguageSwitcher } from "@babelize/elements";

export function App() {
  return (
    <LanguageSwitcher
      locales={[{ code: "en" }, { code: "fr" }, { code: "es" }]}
      defaultValue="en"
      onValueChange={(code) => console.log("changed to", code)}
    />
  );
}

Every component is TypeScript-first, exports its own props interface, and works with your existing next-intl, react-i18next, or custom i18n setup.

Next Steps