@jpisnice/shadcn-ui-mcp-server

# Block Examples Learn how to work with complete shadcn/ui blocks using the MCP Server. ## 🏗️ What are Blocks? Blocks are complete, ready-to-use implementations that combine multiple components to create functional UI sections like: - Dashboards - Login forms - Calendars - Product listings - Navigation menus ## 🎯 Getting Complete Blocks ### Basic Block Request ``` "Get the dashboard-01 block implementation" ``` This will return: - Complete block implementation - All required component files - Dependencies and imports - Usage instructions ### Available Block Categories #### Dashboards ``` "Get the dashboard-01 block" "Show me the dashboard-02 block" "Get the analytics dashboard block" ``` #### Calendars ``` "Get the calendar-01 block" "Show me the calendar-02 block" "Get the event calendar block" ``` #### Forms ``` "Get the login-01 block" "Show me the login-02 block" "Get the contact form block" ``` #### Products ``` "Get the products-01 block" "Show me the product listing block" "Get the e-commerce block" ``` ## 📋 Listing Available Blocks ### All Blocks ``` "List all available shadcn/ui blocks" "Show me all blocks in the library" "What blocks are available?" ``` ### Category-Specific Lists ``` "Show me all dashboard blocks" "List all calendar blocks" "Show me all form blocks" "List all product blocks" ``` ## 🔧 Getting Blocks with Components ### Include All Component Files ``` "Get the dashboard-01 block with all its component files" "Show me the calendar-01 block with components" "Get the login-02 block with all dependencies" ``` ### Framework-Specific Blocks #### React (Default) ``` "Get the React dashboard-01 block" "Show me the React calendar-01 block" "Get the React login-02 block" ``` #### Svelte ``` "Get the Svelte dashboard-01 block" "Show me the Svelte calendar-01 block" "Get the Svelte login-02 block" ``` #### Vue ``` "Get the Vue dashboard-01 block" "Show me the Vue calendar-01 block" "Get the Vue login-02 block" ``` #### React Native ``` "List blocks for React Native" ``` Note: Blocks are currently not available for React Native. The tools return an informative message instead of failing. ## 💡 Practical Block Examples ### Building a Dashboard ``` "Help me build a dashboard using shadcn/ui blocks" "Get the dashboard-01 block as a starting point" "Show me how to customize the dashboard block" ``` ### Creating a Login System ``` "Help me build a login system using shadcn/ui blocks" "Get the login-01 block implementation" "Show me how to customize the login form" ``` ### Building a Calendar ``` "Help me build a calendar using shadcn/ui blocks" "Get the calendar-01 block implementation" "Show me how to customize the calendar" ``` ### Creating an E-commerce Site ``` "Help me build an e-commerce site using shadcn/ui blocks" "Get the products-01 block implementation" "Show me how to customize the product listing" ``` ## 🔍 Block Customization ### Understanding Block Structure ``` "Show me the structure of the dashboard-01 block" "Explain how the calendar-01 block works" "Show me the components used in the login-02 block" ``` ### Customizing Blocks ``` "Show me how to customize the dashboard-01 block" "Get examples of calendar-01 block customization" "Show me how to modify the login-02 block" ``` ### Block Dependencies ``` "What are the dependencies for the dashboard-01 block?" "Show me what the calendar-01 block needs" "Get the requirements for the login-02 block" ``` ## 🎨 Framework Comparison ### Cross-Framework Blocks ``` "Compare the dashboard-01 block between React and Svelte" "Show me the differences between React and Vue calendar blocks" "Compare login block implementations across frameworks" ``` ### Framework-Specific Features ``` "Show me React-specific features in the dashboard block" "Get Svelte-specific optimizations in the calendar block" "Show me Vue-specific patterns in the login block" ``` ## 🔗 Next Steps - [Component Examples](components.md) - Working with individual components - [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