Skip to content

components.md

Latest commit

 

History

History
195 lines (143 loc) · 4.06 KB

components.md

File metadata and controls

195 lines (143 loc) · 4.06 KB

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