Installation
Configure the shadcn CLI to install Cadence UI components into your project.
Cadence UI components are distributed as source through the shadcn CLI. They work in any React 19 project that uses Tailwind CSS v4.
Set up shadcn
If your project does not have a components.json yet, initialize it:
npx shadcn@latest initAdd the Cadence registries
Add the @cadence namespace to components.json. Pro customers also add @cadence-pro:
{
"registries": {
"@cadence": "https://cadenceui.com/r/{name}.json",
"@cadence-pro": {
"url": "https://cadenceui.com/r/pro/{name}.json",
"headers": {
"Authorization": "Bearer ${CADENCE_TOKEN}"
}
}
}
}Add a component
npx shadcn@latest add @cadence/marqueeThe CLI copies the component into components/ui, installs its npm dependencies (usually
Motion) and any shared helpers it needs.
Pro components
Pro components are served from an authenticated registry. Create a token in your dashboard
and store it in .env.local (never commit it):
CADENCE_TOKEN=cdn_...The CLI expands ${CADENCE_TOKEN} from your environment when it requests a component:
npx shadcn@latest add @cadence-pro/auroraWithout a namespace
Free components can also be installed from their URL, without editing components.json:
npx shadcn@latest add https://cadenceui.com/r/marquee.json