Skip to content

blocks.md

Latest commit

 

History

History
208 lines (151 loc) · 4.17 KB

blocks.md

File metadata and controls

208 lines (151 loc) · 4.17 KB

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