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:

opencode run "test shadcn connection"

2. Initialize a New Project

If you don't have shadcn yet:

opencode run "initialize shadcn in my project"

3. Add Components

Add components to your project:

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:

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

# 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

# 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

# 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:

{
  "$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.