compadcn
A powerful CLI tool for installing and managing ShadCN UI components with preset functionality.
Features
- Easy component installation - Add ShadCN components with a single command
- Smart linting - Find and remove unused components from your project
- Import cleanup - Automatically removes imports when components are deleted
- Dependency removal - Optionally remove unused dependencies when components are deleted
- Custom presets - Create and save your own component collections
Installation
npm install -g compadcn # or pnpm add -g compadcn # or yarn global add compadcn
Commands
compadcn add [components...]
Add ShadCN components to your project.
# Interactive mode - select components from a non installed components list compadcn add # Add specific components compadcn add button card dialog
compadcn remove [components...]
Remove ShadCN components from your project.
# Interactive mode - select installed components to remove compadcn remove # Remove specific components compadcn remove button card
Features:
- Interactive removal with confirmation
- Dependency conflict detection
- Automatic import cleanup from your codebase
- Optional dependency removal
- Validates internal dependencies before removal
compadcn lint
Find and remove unused ShadCN components from your project.
Features:
- Scans your entire codebase for component usage
- Identifies unused components
- Option to automatically remove unused components
- Provides removal commands for manual cleanup
compadcn preset
Manage component presets - collections of commonly used components.
# Interactive preset manager
compadcn presetPreset Subcommands
# List all available presets compadcn preset list compadcn preset list --builtin # Show only builtin presets compadcn preset list --custom # Show only custom presets # Show components in a preset compadcn preset show core compadcn preset show "My Custom Preset" # Install all components from a preset compadcn preset install dashboard compadcn preset install mobile # Create a custom preset compadcn preset create "my-preset" button card input compadcn preset create "my-preset" --description "My custom components" compadcn preset create "my-preset" --base core,form # Extend multiple existing presets compadcn preset create "dashboard-mobile" --base dashboard,mobile --description "Mobile dashboard components" # Delete a custom preset compadcn preset delete "my-preset"
Requirements
- Node.js 18.0.0 or higher
- A ShadCN project with
components.jsonfile - Package manager: npm, pnpm, yarn, or bun
How It Works
- Component Detection: Reads your
components.jsonfile to understand your project structure - Package Manager Detection: Automatically detects your package manager from lock files
- Smart Installation: Uses the appropriate package manager to install components
- Usage Scanning: Analyzes your codebase to find component usage patterns
- Dependency Management: Handles both external and internal component dependencies
File Structure
compadcn works with the standard ShadCN project structure:
your-project/
├── components.json # ShadCN configuration
├── src/
│ └── components/
│ └── ui/ # Components directory
│ ├── button.tsx
│ ├── card.tsx
│ └── ...
└── package.json
Custom Presets
Custom presets are stored in ~/.compadcn/custom-presets.json and can be:
- Created from scratch
- Based on existing presets
- Shared across projects
Contributing
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request