Registry

CodedVisuals ships a private shadcn registry. Once you have a license and an account, you can install any visual into your project with the shadcn CLI, the same way you add any shadcn/ui component. It is a one time setup: issue a token, add the registry to your components.json, and expose the token to your environment.

The registry is private. Installs are tied to your account and active license, so the steps below require a logged in user. If you have not purchased yet, see Pricing.

1. Get your registry token

Sign in and open Settings, then Registry token. Issue a token and copy it. The token is shown once, is tied to your account and license, and can be revoked or regenerated at any time from the same page.

2. Add the registry to components.json

In your project's components.json, add CodedVisuals to the registries block, with the authorization header that sends your token:

"registries": {
  "@codedvisuals": {
    "url": "https://codedvisuals.com/r/{name}.json",
    "headers": { "Authorization": "Bearer ${CODEDVISUALS_TOKEN}" }
  }
}

3. Expose your token

Add the token to your environment so the header above can read it. In your .env (or your shell), set:

CODEDVISUALS_TOKEN=your-token-here

Keep the token private and out of version control, the same way you treat any secret.

4. Install a visual

Now install any visual by its registry name, which is {category}-{file}:

npx shadcn@latest add @codedvisuals/charts-line

The CLI drops the file into your components/codedvisuals directory and installs the composition's dependencies (for example Motion and lucide-react) the first time if needed. Every preview page also shows the exact install command for that visual via the Install button, so you can copy and run it directly.

Using a different package manager? pnpm dlx shadcn@latest add ..., yarn shadcn@latest add ..., or bunx --bun shadcn@latest add ... work the same way.

Prefer not to use the CLI?

Every preview page also lets logged in users copy the source or download a visual's file, and copy a ready to use import and usage snippet for any variation. See Usage for that path. With copy and paste you install Motion and lucide-react yourself (see Installation).

Keeping your token safe

Your token grants registry access tied to your account and license. If it is ever exposed, revoke it from Settings, then Registry token and issue a new one. Regenerating replaces the old token immediately, so update your environment afterward.