frameworks

Frameworks

Framework-specific documentation for React, Svelte, Vue, and React Native implementations.

🎨 Supported Frameworks

📋 Framework Comparison

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

🚀 Quick Framework Selection

React (Default)

npx @jpisnice/shadcn-ui-mcp-server

Svelte

npx @jpisnice/shadcn-ui-mcp-server --framework svelte

Vue

npx @jpisnice/shadcn-ui-mcp-server --framework vue

React Native

npx @jpisnice/shadcn-ui-mcp-server --framework react-native

🔄 Switching Between Frameworks

Command Line

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

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

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

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

Environment Variable

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

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

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

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

🎯 Framework-Specific Use Cases

React

• 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-first component development
• Using react-native-reusables components

🔍 Framework Detection

The server logs 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

🔗 Next Steps

• Configuration - Framework configuration options
• Usage Examples - Framework-specific examples
• Integration - Editor and tool integrations