name: mcp-shadcn description: Use the shadcn MCP server to add, update, and manage shadcn/ui components. Use this skill when working with UI components in lexico-components or adding new shadcn components. license: MIT

shadcn MCP Server

This skill covers using the shadcn MCP server to manage shadcn/ui components in the monorepo, specifically for the lexico-components package.

When to Use

Use shadcn MCP tools when:

Adding new shadcn/ui components to lexico-components
Updating existing shadcn components
Checking available component versions
Installing component dependencies
Troubleshooting component integration issues

Available MCP Tools

The shadcn MCP server provides these tools (prefix: mcp_shadcn_):

Component Management

mcp_shadcn_add_component - Add a new shadcn/ui component

Parameters:

component_name (required): Name of the component to add (e.g., 'button', 'dialog', 'dropdown-menu')
project_path (optional): Path to project directory (defaults to current directory)
overwrite (optional): Overwrite existing component files (default: false)

Example usage:

// Add a new button component
mcp_shadcn_add_component({
  component_name: "button",
  project_path: "packages/lexico-components",
});

// Add dialog and overwrite if exists
mcp_shadcn_add_component({
  component_name: "dialog",
  project_path: "packages/lexico-components",
  overwrite: true,
});

mcp_shadcn_list_components - List available shadcn/ui components

Parameters:

project_path (optional): Path to project directory

Example usage:

// List all available components
mcp_shadcn_list_components({
  project_path: "packages/lexico-components",
});

mcp_shadcn_update_component - Update an existing component

Parameters:

component_name (required): Name of the component to update
project_path (optional): Path to project directory

Example usage:

// Update button component to latest version
mcp_shadcn_update_component({
  component_name: "button",
  project_path: "packages/lexico-components",
});

Workflow Patterns

Adding a New Component

Check available components:

mcp_shadcn_list_components({
  project_path: "packages/lexico-components",
});

Add the component:

mcp_shadcn_add_component({
  component_name: "card",
  project_path: "packages/lexico-components",
});

Verify installation:
- Check packages/lexico-components/src/components/ui/card.tsx exists
- Verify dependencies added to package.json
- Ensure imports work in your code

Export the component: Add to packages/lexico-components/src/index.ts:

export {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
} from "./components/ui/card";

Updating Existing Components

Identify outdated components:
- Check shadcn changelog for updates
- Review component issues

Update the component:

mcp_shadcn_update_component({
  component_name: "button",
  project_path: "packages/lexico-components",
});

Test changes:
- Run type checking: nx run lexico-components:typecheck
- Test in consuming apps: nx run lexico:develop
- Verify visual changes in Storybook (if available)

Adding Multiple Components

// Add multiple related components
const components = ["dialog", "alert-dialog", "sheet"];

for (const component of components) {
  mcp_shadcn_add_component({
    component_name: component,
    project_path: "packages/lexico-components",
  });
}

Project-Specific Configuration

lexico-components Setup

The lexico-components package is configured for shadcn/ui with:

components.json:

{
  "style": "new-york",
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/styles/globals.css",
    "baseColor": "gray"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

Key settings:

Style: New York (modern, minimal design)
Base color: Gray (neutral palette)
Path aliases: @/components, @/lib/utils

File Locations

Components are added to:

packages/lexico-components/
  src/
    components/
      ui/                    # shadcn components (DO NOT MANUALLY EDIT)
        button.tsx
        dialog.tsx
        ...
      custom/                # Custom components (safe to edit)
        MyComponent.tsx
    lib/
      utils.ts              # shadcn utilities
    styles/
      globals.css           # Tailwind directives

Important Rules

⚠️ Never Manually Edit UI Components

DO NOT modify files in packages/lexico-components/src/components/ui/

These files are managed by shadcn CLI and will be overwritten on updates.

Instead:

Extend components by wrapping them:

// packages/lexico-components/src/components/custom/MyButton.tsx
import { Button } from "../ui/button";

export function MyButton(props) {
  return (
    <Button
      className="custom-styles"
      {...props}
    />
  );
}

Use composition to create variants:

// packages/lexico-components/src/components/custom/PrimaryButton.tsx
import { Button } from "../ui/button";
import { cn } from "@/lib/utils";

export function PrimaryButton({ className, ...props }) {
  return (
    <Button
      className={cn("bg-primary text-primary-foreground", className)}
      {...props}
    />
  );
}

Add to custom directory:

packages/lexico-components/src/components/custom/

Post-Installation Steps

After adding components:

Export in index.ts:

// packages/lexico-components/src/index.ts
export * from "./components/ui/button";
export * from "./components/ui/dialog";

Update package.json if needed: Some components require additional dependencies (e.g., @radix-ui/react-dialog)
Run type checking:
```
nx run lexico-components:typecheck
```
Test in consuming applications:
```
nx run lexico:develop
```

Common Components

Form Components

button - Button element with variants
input - Text input field
textarea - Multi-line text input
select - Dropdown select menu
checkbox - Checkbox input
radio-group - Radio button group
switch - Toggle switch
slider - Range slider
label - Form label

Layout Components

card - Content container with header/footer
separator - Visual divider
accordion - Expandable content sections
tabs - Tabbed interface
sheet - Slide-out panel
dialog - Modal dialog
alert-dialog - Confirmation dialog

Feedback Components

alert - Alert message
toast - Notification popup
badge - Status indicator
progress - Progress bar
skeleton - Loading placeholder

Navigation Components

dropdown-menu - Dropdown menu
navigation-menu - Navigation bar
menubar - Menu bar
breadcrumb - Breadcrumb navigation
pagination - Page navigation

Data Display

table - Data table
avatar - User avatar
tooltip - Hover tooltip
popover - Popup content
calendar - Date picker calendar

Troubleshooting

Component Not Found

Error: Component 'xyz' not found

Solution:

List available components:

mcp_shadcn_list_components({
  project_path: "packages/lexico-components",
});

Check component name spelling
Verify shadcn/ui version supports the component

Import Errors

Error: Cannot find module '@/components/ui/button'

Solution:

Verify component was added successfully

Check TypeScript path mappings in tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Restart TypeScript server in VS Code

Dependency Conflicts

Error: Conflicting peer dependencies

Solution:

Check component dependencies:

cat packages/lexico-components/package.json

Update Radix UI packages:

pnpm update @radix-ui/react-* --filter lexico-components

Resolve conflicts manually

Style Issues

Problem: Component styles not applying

Solution:

Verify Tailwind CSS is configured:

cat packages/lexico-components/tailwind.config.ts

Check globals.css imports Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Ensure CSS is imported in entry point

Overwrite Existing Components

Problem: Component exists but needs updating

Solution: Use overwrite: true:

mcp_shadcn_add_component({
  component_name: "button",
  project_path: "packages/lexico-components",
  overwrite: true,
});

Best Practices

Always use MCP tools instead of manual npx shadcn commands
Check available components before adding
Never edit UI directory - extend components instead
Export new components in index.ts immediately
Test after adding components in consuming apps
Update regularly to get bug fixes and improvements
Use consistent style (New York for this monorepo)
Document custom components that wrap shadcn components
Follow naming conventions (PascalCase for components)
Group related components when adding multiple

Integration with lexico

When adding components used by lexico:

Add to lexico-components:

mcp_shadcn_add_component({
  component_name: "dialog",
  project_path: "packages/lexico-components",
});

Export component:

// packages/lexico-components/src/index.ts
export * from "./components/ui/dialog";

Use in lexico:

// applications/lexico/app/components/MyDialog.tsx
import {
  Dialog,
  DialogContent,
  DialogHeader,
} from "@monorepo/lexico-components";

export function MyDialog() {
  return (
    <Dialog>
      <DialogContent>
        <DialogHeader>Title</DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Test integration:
```
nx run lexico:develop
```

mcp-shadcn

SKILL.md

name: mcp-shadcn description: Use the shadcn MCP server to add, update, and manage shadcn/ui components. Use this skill when working with UI components in lexico-components or adding new shadcn components. license: MIT

shadcn MCP Server

When to Use

Available MCP Tools

Component Management

Workflow Patterns

Adding a New Component

Updating Existing Components

Adding Multiple Components

Project-Specific Configuration

lexico-components Setup

File Locations

Important Rules

⚠️ Never Manually Edit UI Components

Post-Installation Steps

Common Components

Form Components

Layout Components

Feedback Components

Navigation Components

Data Display

Troubleshooting

Component Not Found

Import Errors

Dependency Conflicts

Style Issues

Overwrite Existing Components

Best Practices

Integration with lexico

Related Documentation

See Also

Name	mcp-shadcn
Description	Use the shadcn MCP server to add, update, and manage shadcn/ui components. Use this skill when working with UI components in lexico-components or adding new shadcn components.