npm package: @openpets/shadcn
Description: A comprehensive plugin for managing shadcn/ui components - add, update, list, and configure components in your projects
Latest version: 1.0.0

# Shadcn UI Manager Plugin

A comprehensive OpenCode plugin for managing shadcn/ui components in your projects. Add, update, list, and configure components with ease.

## Features

- **Project Management**: Initialize new projects with shadcn/ui
- **Component Management**: Add, update, and list components
- **Configuration**: View and manage shadcn configuration
- **Component Diff**: Preview changes before updating components
- **Project Detection**: Automatically detect shadcn projects

## Available Tools

### Core Commands

- `shadcn-test-connection` - Test if current directory is a shadcn project
- `shadcn-init-project` - Initialize a new project with shadcn/ui
- `shadcn-list-components` - List available or installed components
- `shadcn-add-component` - Add a component to your project
- `shadcn-update-component` - Update an existing component
- `shadcn-get-config` - Get current shadcn configuration
- `shadcn-diff-component` - Show diff for component updates

## Quick Start

### 1. Test Your Project

Check if your current directory is already a shadcn project:

```bash
opencode run "test shadcn connection"
```

### 2. Initialize a New Project

If you don't have shadcn yet:

```bash
opencode run "initialize shadcn in my project"
```

### 3. Add Components

Add components to your project:

```bash
opencode run "add button component to my project"
opencode run "add card component"
opencode run "add input component"
```

### 4. List Components

See what's available or installed:

```bash
opencode run "list available shadcn components"
opencode run "list installed components"
```

## Available Components

The plugin supports all standard shadcn/ui components:

- **Form**: button, input, label, textarea, select, checkbox, radio-group, switch
- **Layout**: card, accordion, tabs, separator, scroll-area
- **Navigation**: navigation-menu, menubar, breadcrumb
- **Feedback**: alert, dialog, sheet, toast, sonner
- **Display**: avatar, badge, progress, skeleton, spinner
- **Data**: table, pagination, calendar, chart
- **Interaction**: dropdown-menu, popover, tooltip, hover-card
- **Advanced**: command, combobox, resizable, carousel

## Usage Examples

### Basic Workflow

```bash
# Check project status
opencode run "test shadcn connection"

# Initialize if needed
opencode run "initialize shadcn in my project with new-york style"

# Add essential components
opencode run "add button component"
opencode run "add card component"
opencode run "add input component"

# List what you have
opencode run "list installed components"
```

### Component Management

```bash
# Add multiple components
opencode run "add button, card, and input components"

# Update existing components
opencode run "update button component"

# Preview changes before updating
opencode run "show diff for button component"

# Check configuration
opencode run "show shadcn configuration"
```

### Project Setup Options

```bash
# Initialize with custom style
opencode run "initialize shadcn with zinc style and slate base color"

# Initialize without CSS variables
opencode run "initialize shadcn project without css variables"
```

## Configuration

The plugin reads from your project's `components.json` file. Typical configuration:

```json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/styles.css",
    "baseColor": "neutral",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}
```

## Requirements

- Node.js project with package.json
- shadcn/ui compatible setup (React + Tailwind CSS)
- Internet connection for component installation

## Error Handling

The plugin provides detailed error messages for common issues:

- Missing `components.json` configuration
- Invalid component names
- Network connectivity issues
- File system permissions
- Conflicts with existing components

## Tips

1. **Always test connection first** to verify your project setup
2. **Use diff before updating** to see what will change
3. **Check installed components** before adding new ones
4. **Initialize with the right style** for your project needs
5. **Use project path parameter** when working in different directories

## Troubleshooting

### "Not a shadcn project" error
Run `shadcn-init-project` first to set up your project.

### Component installation fails
Check your internet connection and ensure you have write permissions.

### Component not found
Use `shadcn-list-components` to see all available component names.

## Integration

This plugin works seamlessly with other OpenPets plugins and can be used in multi-step scenarios for complete project setup workflows.