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.
This skill covers using the shadcn MCP server to manage shadcn/ui components in the monorepo, specifically for the lexico-components package.
Use shadcn MCP tools when:
The shadcn MCP server provides these tools (prefix: mcp_shadcn_):
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_pathoverwrite (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 directoryExample 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 updateproject_path (optional): Path to project directoryExample usage:
// Update button component to latest version
mcp_shadcn_update_component({
component_name: "button",
project_path: "packages/lexico-components",
});
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:
packages/lexico-components/src/components/ui/card.tsx existspackage.jsonExport the component:
Add to packages/lexico-components/src/index.ts:
export {
Card,
CardHeader,
CardTitle,
CardContent,
} from "./components/ui/card";
Identify outdated components:
Update the component:
mcp_shadcn_update_component({
component_name: "button",
project_path: "packages/lexico-components",
});
Test changes:
nx run lexico-components:typechecknx run lexico:develop// 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",
});
}
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:
@/components, @/lib/utilsComponents 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
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/
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
button - Button element with variantsinput - Text input fieldtextarea - Multi-line text inputselect - Dropdown select menucheckbox - Checkbox inputradio-group - Radio button groupswitch - Toggle switchslider - Range sliderlabel - Form labelcard - Content container with header/footerseparator - Visual divideraccordion - Expandable content sectionstabs - Tabbed interfacesheet - Slide-out paneldialog - Modal dialogalert-dialog - Confirmation dialogalert - Alert messagetoast - Notification popupbadge - Status indicatorprogress - Progress barskeleton - Loading placeholderdropdown-menu - Dropdown menunavigation-menu - Navigation barmenubar - Menu barbreadcrumb - Breadcrumb navigationpagination - Page navigationtable - Data tableavatar - User avatartooltip - Hover tooltippopover - Popup contentcalendar - Date picker calendarError: 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
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
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
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
Problem: Component exists but needs updating
Solution:
Use overwrite: true:
mcp_shadcn_add_component({
component_name: "button",
project_path: "packages/lexico-components",
overwrite: true,
});
npx shadcn commandsWhen 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