@jpisnice/shadcn-ui-mcp-server

# Component Examples Learn how to work with individual shadcn/ui components using the MCP Server. ## 🎯 Getting Component Source Code ### Basic Component Request ``` "Show me the shadcn/ui button component" ``` This will return the complete TypeScript source code for the button component, including: - Component implementation - TypeScript interfaces - Import statements - Dependencies ### Framework-Specific Components #### React (Default) ``` "Show me the React button component with TypeScript" "Get the React card component source code" "Show me the React dialog component" ``` #### Svelte ``` "Show me the Svelte button component" "Get the Svelte card component source code" "Show me the Svelte dialog component" ``` #### Vue ``` "Show me the Vue button component" "Get the Vue card component source code" "Show me the Vue dialog component" ``` #### React Native ``` "Show me the React Native button component" "Get the React Native input component source code" "Show me the React Native dialog component" ``` ## 📋 Getting Component Demos ### Usage Examples ``` "Show me how to use the shadcn/ui card component" "Get the button component demo" "Show me examples of the dialog component" ``` ### Component Variants ``` "Show me all button variants" "Get card component with different styles" "Show me dialog component variations" ``` ## 🔍 Getting Component Metadata ### Dependencies and Requirements ``` "What are the dependencies for the shadcn/ui dialog component?" "Show me the requirements for the card component" "What does the button component need to work?" ``` ### Component Information ``` "Tell me about the shadcn/ui button component" "What is the card component used for?" "Describe the dialog component features" ``` ## 📝 Listing Available Components ### All Components ``` "List all available shadcn/ui components" "Show me all components in the library" "What components are available?" ``` ### Framework-Specific Lists ``` "List all React components" "Show me all Svelte components" "List all Vue components" "List all React Native components" ``` ## 🎨 Component Categories ### Form Components ``` "Show me all form-related components" "Get the input component" "Show me the select component" "Get the checkbox component" ``` ### Layout Components ``` "Show me all layout components" "Get the card component" "Show me the container component" "Get the grid component" ``` ### Navigation Components ``` "Show me all navigation components" "Get the breadcrumb component" "Show me the pagination component" "Get the tabs component" ``` ## 🔧 Advanced Component Requests ### Component with Dependencies ``` "Get the button component with all its dependencies" "Show me the card component and what it needs" "Get the dialog component with required imports" ``` ### Component Comparison ``` "Compare the button component between React and Svelte" "Show me the differences between React and Vue card components" "Compare dialog implementations across frameworks" "Compare React Native and React input components" ``` ### Customization Examples ``` "Show me how to customize the button component" "Get examples of card component customization" "Show me dialog component customization options" ``` ## 💡 Practical Examples ### Building a Form ``` "Help me build a login form using shadcn/ui components" "Show me the form components I need for a contact form" "Get the input and button components for a search form" ``` ### Creating a Dashboard ``` "Show me the card and button components for a dashboard" "Get the layout components I need for a dashboard" "Show me how to use card components in a dashboard" ``` ### Building Navigation ``` "Show me the navigation components for a website" "Get the breadcrumb and tabs components" "Show me how to build a navigation menu" ``` ## 🔗 Next Steps - [Block Examples](blocks.md) - Working with complete blocks - [Framework Comparison](framework-comparison.md) - Cross-framework examples - [Real-world Projects](real-world-projects.md) - Complete application examples - [Best Practices](best-practices.md) - Tips for optimal usage