Skip to content

framework-selection.md

Latest commit

 

History

History
163 lines (120 loc) · 4.85 KB

framework-selection.md

File metadata and controls

163 lines (120 loc) · 4.85 KB

Framework Selection

The shadcn/ui MCP Server supports four popular framework implementations. Choose the one that matches your project needs.

🎨 Available Frameworks

Framework Repository Maintainer File Extension Description
React (default) shadcn/ui shadcn .tsx React components from shadcn/ui v4
Svelte shadcn-svelte huntabyte .svelte Svelte components from shadcn-svelte
Vue shadcn-vue unovue .vue Vue components from shadcn-vue
React Native react-native-reusables Founded Labs .tsx React Native components from react-native-reusables

🚀 How to Switch Frameworks

Method 1: Command Line Argument (Recommended)

# React (default)
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server -f svelte

# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server -f vue

# Switch back to React
npx @jpisnice/shadcn-ui-mcp-server --framework react
npx @jpisnice/shadcn-ui-mcp-server -f react

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
npx @jpisnice/shadcn-ui-mcp-server -f react-native

Method 2: Environment Variable

# Use Svelte
export FRAMEWORK=svelte
npx @jpisnice/shadcn-ui-mcp-server

# Use React
export FRAMEWORK=react
npx @jpisnice/shadcn-ui-mcp-server

# Use Vue
export FRAMEWORK=vue
npx @jpisnice/shadcn-ui-mcp-server

# Or set for single command
FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server
FRAMEWORK=vue npx @jpisnice/shadcn-ui-mcp-server
FRAMEWORK=react-native npx @jpisnice/shadcn-ui-mcp-server

Method 3: Combined with GitHub Token

# Svelte with GitHub token
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --github-api-key ghp_your_token_here

# React with GitHub token (default)
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Vue with GitHub token
npx @jpisnice/shadcn-ui-mcp-server --framework vue --github-api-key ghp_your_token_here

🔍 Framework Detection

The server will log which framework is being used:

INFO: Framework set to 'svelte' via command line argument
INFO: MCP Server configured for SVELTE framework
INFO: Repository: huntabyte/shadcn-svelte
INFO: File extension: .svelte
INFO: Framework set to 'vue' via command line argument
INFO: MCP Server configured for VUE framework
INFO: Repository: unovue/shadcn-vue
INFO: File extension: .vue
INFO: Framework set to 'react-native' via command line argument
INFO: MCP Server configured for REACT NATIVE framework
INFO: Repository: founded-labs/react-native-reusables
INFO: File extension: .tsx

💡 Use Cases by Framework

React (Default)

  • React/Next.js applications
  • TypeScript projects
  • Most common use case
  • Full shadcn/ui v4 compatibility

Svelte

  • Svelte/SvelteKit applications
  • Svelte component development
  • Learning Svelte with shadcn patterns

Vue

  • Vue/Nuxt applications
  • Vue component development
  • Learning Vue with shadcn patterns

React Native

  • React Native/Expo applications
  • Mobile-focused UI development
  • Using react-native-reusables components

🔄 Multi-Framework Development

You can easily switch between frameworks to compare implementations:

# Compare React and Svelte button components
npx @jpisnice/shadcn-ui-mcp-server --framework react
# Get React button component

npx @jpisnice/shadcn-ui-mcp-server --framework svelte
# Get Svelte button component

npx @jpisnice/shadcn-ui-mcp-server --framework vue
# Get Vue button component

npx @jpisnice/shadcn-ui-mcp-server --framework react-native
# Get React Native button component

⚠️ Important Notes

Environment Variable Syntax

When using environment variables, make sure to use the correct syntax:

  • ✅ Correct: export FRAMEWORK=svelte && npx @jpisnice/shadcn-ui-mcp-server
  • ✅ Correct: FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server
  • ❌ Incorrect: FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server (without proper spacing)

Framework-Specific Features

Each framework may have slightly different:

  • Component APIs
  • Styling approaches
  • Dependencies
  • File structures

🔗 Next Steps