ShadCN CLI Integration
Install Babelize Elements components with the shadcn CLI.
ShadCN CLI Integration
Install individual Babelize Elements components directly into your project with the shadcn CLI.
One-time setup
Register the Babelize Elements registry namespace:
npx shadcn@latest registry add @elements=https://elements.babelize.co/r/{name}.jsonAlternatively, add it manually to the registries field of your components.json:
{
"registries": {
"@elements": "https://elements.babelize.co/r/{name}.json"
}
}Install a component
Once the namespace is registered, install any component:
npx shadcn@latest add @elements/language-switcher
npx shadcn@latest add @elements/phone-input
npx shadcn@latest add @elements/navbarThe CLI resolves each component's dependencies (including the cn utility) and
writes each file to the alias its type selects — components to your ui alias,
the useControllableState hook 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.