ComponentVault

CLI Reference

Complete reference for the shadcn CLI commands used with ComponentVault.

CLI Reference

ComponentVault uses the standard shadcn CLI for component installation. This guide covers all commands and options.

Commands

add

Install a component from the registry:

npx shadcn@latest add https://registry.example.com/[component]

Options:

OptionDescription
--tokenLicense key for premium components
--overwriteOverwrite existing files
--cwdWorking directory (default: current)
--pathCustom installation path

Examples:

# Install a free component
npx shadcn@latest add https://registry.example.com/animated-card

# Install a premium component with license
npx shadcn@latest add https://registry.example.com/data-table-pro \
  --token cv_abc123

# Overwrite existing component
npx shadcn@latest add https://registry.example.com/animated-card \
  --overwrite

init

Initialize shadcn in your project (required before using components):

npx shadcn@latest init

This sets up:

  • Tailwind CSS configuration
  • CSS variables for theming
  • Utility functions in lib/utils.ts
  • Component configuration in components.json

diff

Check for updates to installed components:

npx shadcn@latest diff

The diff command shows changes between your local components and the registry versions.

Configuration

components.json

The CLI uses a components.json file for configuration:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Environment Variables

For premium components, you can set your license key as an environment variable:

export SHADCN_TOKEN=cv_your_license_key

Then install without the --token flag:

npx shadcn@latest add https://registry.example.com/data-table-pro

Troubleshooting

Component not found

Make sure you're using the correct registry URL:

# Correct
npx shadcn@latest add https://registry.example.com/animated-card

# Wrong - missing https://
npx shadcn@latest add registry.example.com/animated-card

Permission denied

For premium components, ensure your license key is valid and has access to the component.

Dependency conflicts

If you encounter dependency conflicts, try installing the dependencies manually:

npm install framer-motion

Then run the add command again with --overwrite.

On this page