ShadCN CLI Integration
Install Babelize Elements with the shadcn CLI: add the @babelize registry, then pull language switchers, inputs and translation widgets into your project.
Install individual Babelize Elements components directly into your project with the shadcn CLI.
The @babelize registry
Babelize Elements is listed in the
shadcn registry directory as @babelize, so
the shadcn CLI resolves it with no setup.
On an older CLI, or to pin the registry explicitly, add it to the registries field of
your components.json:
{
"registries": {
"@babelize": "https://elements.babelize.co/r/{name}.json"
}
}Install a component
Install any component:
npx shadcn@latest add @babelize/language-switcher
npx shadcn@latest add @babelize/language-switcher-pill
npx shadcn@latest add @babelize/phone-input
npx shadcn@latest add @babelize/navbarThe CLI resolves each component's dependencies and writes each file to the alias its type selects — components to your ui alias,
shared hooks such as useControllableState and useListboxNavigation to lib.
If you have relocated ui in components.json, components follow it.
Your `cn` is left alone
Components import cn through your utils alias and expect it to already be
there — the same assumption shadcn's own components make, since shadcn init
creates it. Nothing is written over your version, however you have customised it.
The bundled @babelize/elements CLI additionally writes cn for you if the file
is genuinely missing, so it works in projects that never ran shadcn init.
You can also install by direct URL:
npx shadcn@latest add https://elements.babelize.co/r/language-switcher.jsonImport
import { LanguageSwitcher } from "@/components/ui/language-switcher";Using the Babelize Elements CLI
Prefer a purpose-built CLI? The @babelize/elements package ships one:
npx @babelize/elements add language-switcher
npx @babelize/elements listIt does the same job — resolve the registry item, write the component into components/ui/, and install its npm dependencies.