Installation
Install @babelize/elements in your project with your preferred package manager.
Babelize Elements drops into any React + Tailwind CSS project — Next.js, Vite, Remix,
or anything else that bundles React. The package ships TypeScript types and both ESM and
CJS builds. Runtime dependencies are small and standard in the shadcn ecosystem:
motion for animation and lucide-react for icons.
Package Manager
Install the full library with your preferred package manager:
npm install @babelize/elementsTell 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:
Add a @source line to the CSS file that imports Tailwind, with the path relative
to that file:
@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.
Theme tokens
Components are styled with shadcn/ui semantic
tokens — bg-popover, text-muted-foreground, ring-ring, and so on — so they
pick up your app's theme, radius, and dark mode automatically.
Already using shadcn/ui? Nothing to do: shadcn init defined the tokens.
Not using shadcn/ui? Add the tokens once to the CSS file that imports Tailwind. This is the shadcn neutral theme; change any value to match your brand.
/* Make `dark:` follow the `.dark` class, as the tokens below do. */
@custom-variant dark (&:is(.dark *));
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
}
@theme inline {
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
}On Tailwind v3, map the same variables under theme.extend.colors in
tailwind.config.js, as in the
shadcn v3 guide. Components are designed for
Tailwind v4; on v3 they work, but some v4-only utilities (such as shadow-xs) fall
back to no effect.
Every component also takes a classNames prop for per-part overrides, so you can
restyle any slot without forking the source.
Install individual components
Prefer installing components one at a time, straight into your codebase? Use the shadcn CLI:
npx shadcn@latest add @babelize/language-switcherOr use the CLI that ships inside the package:
npx @babelize/elements add language-switcherEither 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
| Dependency | Minimum Version |
|---|---|
| React | >=18 |
| React DOM | >=18 |
| Tailwind CSS | >=3 |
| Node.js | >=20 |
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.