Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commite29645c

Browse files
committed
Add React Native support: Update documentation and examples for React Native integration
1 parent3c73d99 commite29645c

File tree

17 files changed

+262
-26
lines changed

17 files changed

+262
-26
lines changed

‎docs/api/README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,15 +72,16 @@ Complete reference for the shadcn/ui MCP Server tools and capabilities.
7272

7373
##🎨 Framework Support
7474

75-
All tools supportthree frameworks:
75+
All tools supportfour frameworks:
7676
-**React** (default) - shadcn/ui v4
7777
-**Svelte** - shadcn-svelte
7878
-**Vue** - shadcn-vue
79+
-**React Native** - react-native-reusables
7980

8081
##🔗 Next Steps
8182

8283
-[get_component](get-component.md) - Component source code tool
8384
-[get_component_demo](get-component-demo.md) - Component demo tool
8485
-[list_components](list-components.md) - Component listing tool
8586
-[get_block](get-block.md) - Block implementation tool
86-
-[list_blocks](list-blocks.md) - Block listing tool
87+
-[list_blocks](list-blocks.md) - Block listing tool

‎docs/configuration/README.md‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Detailed configuration options for the shadcn/ui MCP Server.
44

55
##⚙️ Configuration Options
66

7-
-[Framework Selection](framework-selection.md) - Choosing between React, Svelte, andVue
7+
-[Framework Selection](framework-selection.md) - Choosing between React, Svelte,Vue,andReact Native
88
-[GitHub Token Setup](github-token-setup.md) - Setting up GitHub API access
99
-[Environment Variables](environment-variables.md) - Using environment variables
1010
-[Command Line Options](command-line-options.md) - All available CLI options
@@ -23,6 +23,9 @@ npx @jpisnice/shadcn-ui-mcp-server --framework svelte
2323

2424
# Vue
2525
npx @jpisnice/shadcn-ui-mcp-server --framework vue
26+
27+
# React Native
28+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
2629
```
2730

2831
###With GitHub Token
@@ -46,6 +49,7 @@ shadcn-ui-mcp-server [options]
4649
Options:
4750
--github-api-key, -g<token> GitHub Personal Access Token
4851
--framework, -f<framework> Framework to use:'react','svelte' or'vue' (default: react)
52+
Also supports'react-native'
4953
--help, -h Showhelp message
5054
--version, -v Show version information
5155
```
@@ -61,6 +65,10 @@ export FRAMEWORK=svelte
6165

6266
# Run server
6367
npx @jpisnice/shadcn-ui-mcp-server
68+
69+
# React Native via env var
70+
export FRAMEWORK=react-native
71+
npx @jpisnice/shadcn-ui-mcp-server
6472
```
6573

6674
##🎨 Framework Configuration
@@ -85,10 +93,16 @@ npx @jpisnice/shadcn-ui-mcp-server --framework svelte
8593
npx @jpisnice/shadcn-ui-mcp-server --framework vue
8694
```
8795

96+
###React Native
97+
98+
```bash
99+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
100+
```
101+
88102
##🔗 Next Steps
89103

90104
-[Framework Selection](framework-selection.md) - Detailed framework configuration
91105
-[GitHub Token Setup](github-token-setup.md) - Setting up optimal performance
92106
-[Environment Variables](environment-variables.md) - Using environment variables
93107
-[Command Line Options](command-line-options.md) - Complete CLI reference
94-
-[Advanced Configuration](advanced-configuration.md) - Advanced setup options
108+
-[Advanced Configuration](advanced-configuration.md) - Advanced setup options

‎docs/frameworks/README.md‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#Frameworks
22

3-
Framework-specific documentation for React, Svelte, andVue implementations.
3+
Framework-specific documentation for React, Svelte,Vue,andReact Native implementations.
44

55
##🎨 Supported Frameworks
66

@@ -11,6 +11,7 @@ Framework-specific documentation for React, Svelte, and Vue implementations.
1111
|**React** (default)|[shadcn/ui](https://ui.shadcn.com/)|[shadcn](https://github.com/shadcn)|`.tsx`| React components from shadcn/ui v4|
1212
|**Svelte**|[shadcn-svelte](https://www.shadcn-svelte.com/)|[huntabyte](https://github.com/huntabyte)|`.svelte`| Svelte components from shadcn-svelte|
1313
|**Vue**|[shadcn-vue](https://www.shadcn-vue.com/)|[unovue](https://github.com/unovue)|`.vue`| Vue components from shadcn-vue|
14+
|**React Native**|[react-native-reusables](https://github.com/founded-labs/react-native-reusables)|[Founded Labs](https://github.com/founded-labs)|`.tsx`| React Native components from react-native-reusables|
1415

1516
##🚀 Quick Framework Selection
1617

@@ -32,6 +33,12 @@ npx @jpisnice/shadcn-ui-mcp-server --framework svelte
3233
npx @jpisnice/shadcn-ui-mcp-server --framework vue
3334
```
3435

36+
###React Native
37+
38+
```bash
39+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
40+
```
41+
3542
##🔄 Switching Between Frameworks
3643

3744
###Command Line
@@ -45,6 +52,9 @@ npx @jpisnice/shadcn-ui-mcp-server --framework vue
4552

4653
# Switch back to React
4754
npx @jpisnice/shadcn-ui-mcp-server --framework react
55+
56+
# Switch to React Native
57+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
4858
```
4959

5060
###Environment Variable
@@ -61,6 +71,10 @@ npx @jpisnice/shadcn-ui-mcp-server
6171
# Use React
6272
export FRAMEWORK=react
6373
npx @jpisnice/shadcn-ui-mcp-server
74+
75+
# Use React Native
76+
export FRAMEWORK=react-native
77+
npx @jpisnice/shadcn-ui-mcp-server
6478
```
6579

6680
##🎯 Framework-Specific Use Cases
@@ -81,6 +95,11 @@ npx @jpisnice/shadcn-ui-mcp-server
8195
-**Vue component development**
8296
-**Learning Vue with shadcn patterns**
8397

98+
###React Native
99+
-**React Native/Expo applications**
100+
-**Mobile-first component development**
101+
-**Using react-native-reusables components**
102+
84103
##🔍 Framework Detection
85104

86105
The server logs which framework is being used:
@@ -96,4 +115,4 @@ INFO: File extension: .svelte
96115

97116
-[Configuration](../configuration/) - Framework configuration options
98117
-[Usage Examples](../usage/) - Framework-specific examples
99-
-[Integration](../integration/) - Editor and tool integrations
118+
-[Integration](../integration/) - Editor and tool integrations

‎docs/getting-started/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ Welcome to the shadcn/ui MCP Server! This section will help you get up and runni
77
-[Installation](installation.md) - How to install and run the server
88
-[GitHub Token Setup](github-token.md) - Setting up GitHub API access
99
-[First Steps](first-steps.md) - Your first component request
10-
-[Framework Selection](framework-selection.md) - Choosing between React, Svelte, andVue
10+
-[Framework Selection](framework-selection.md) - Choosing between React, Svelte,Vue,andReact Native
1111

1212
##🚀 Quick Start (5 minutes)
1313

@@ -29,4 +29,4 @@ After getting started, explore:
2929
-[Configuration](../configuration/) - Detailed configuration options
3030
-[Integration](../integration/) - Editor and tool integrations
3131
-[Usage](../usage/) - Examples and tutorials
32-
-[Frameworks](../frameworks/) - Framework-specific documentation
32+
-[Frameworks](../frameworks/) - Framework-specific documentation

‎docs/getting-started/first-steps.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
1515

1616
# Different framework
1717
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --github-api-key ghp_your_token_here
18+
npx @jpisnice/shadcn-ui-mcp-server --framework vue --github-api-key ghp_your_token_here
19+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native --github-api-key ghp_your_token_here
1820
```
1921

2022
###2. Verify Server is Running
@@ -157,6 +159,14 @@ Once the server is running, you can ask your AI assistant to:
157159
"List all Vue components available"
158160
```
159161

162+
###React Native
163+
164+
```
165+
"Show me the React Native button component"
166+
"List all React Native components available"
167+
"Get the React Native input component metadata"
168+
```
169+
160170
##🔗 Next Steps
161171

162172
-[Integration](../integration/) - Connect to your preferred editor or tool
@@ -201,4 +211,4 @@ npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
201211
```bash
202212
# Verify framework selection
203213
npx @jpisnice/shadcn-ui-mcp-server --framework svelte --help
204-
```
214+
```

‎docs/getting-started/framework-selection.md‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#Framework Selection
22

3-
The shadcn/ui MCP Server supportsthree popular framework implementations. Choose the one that matches your project needs.
3+
The shadcn/ui MCP Server supportsfour popular framework implementations. Choose the one that matches your project needs.
44

55
##🎨 Available Frameworks
66

@@ -9,6 +9,7 @@ The shadcn/ui MCP Server supports three popular framework implementations. Choos
99
|**React** (default)|[shadcn/ui](https://ui.shadcn.com/)|[shadcn](https://github.com/shadcn)|`.tsx`| React components from shadcn/ui v4|
1010
|**Svelte**|[shadcn-svelte](https://www.shadcn-svelte.com/)|[huntabyte](https://github.com/huntabyte)|`.svelte`| Svelte components from shadcn-svelte|
1111
|**Vue**|[shadcn-vue](https://www.shadcn-vue.com/)|[unovue](https://github.com/unovue)|`.vue`| Vue components from shadcn-vue|
12+
|**React Native**|[react-native-reusables](https://github.com/founded-labs/react-native-reusables)|[Founded Labs](https://github.com/founded-labs)|`.tsx`| React Native components from react-native-reusables|
1213

1314
##🚀 How to Switch Frameworks
1415

@@ -29,6 +30,10 @@ npx @jpisnice/shadcn-ui-mcp-server -f vue
2930
# Switch back to React
3031
npx @jpisnice/shadcn-ui-mcp-server --framework react
3132
npx @jpisnice/shadcn-ui-mcp-server -f react
33+
34+
# React Native
35+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
36+
npx @jpisnice/shadcn-ui-mcp-server -f react-native
3237
```
3338

3439
###Method 2: Environment Variable
@@ -49,6 +54,7 @@ npx @jpisnice/shadcn-ui-mcp-server
4954
# Or set for single command
5055
FRAMEWORK=svelte npx @jpisnice/shadcn-ui-mcp-server
5156
FRAMEWORK=vue npx @jpisnice/shadcn-ui-mcp-server
57+
FRAMEWORK=react-native npx @jpisnice/shadcn-ui-mcp-server
5258
```
5359

5460
###Method 3: Combined with GitHub Token
@@ -82,6 +88,13 @@ INFO: Repository: unovue/shadcn-vue
8288
INFO: File extension: .vue
8389
```
8490

91+
```bash
92+
INFO: Frameworkset to'react-native' viacommand line argument
93+
INFO: MCP Server configuredfor REACT NATIVE framework
94+
INFO: Repository: founded-labs/react-native-reusables
95+
INFO: File extension: .tsx
96+
```
97+
8598
##💡 Use Cases by Framework
8699

87100
###React (Default)
@@ -100,6 +113,11 @@ INFO: File extension: .vue
100113
-**Vue component development**
101114
-**Learning Vue with shadcn patterns**
102115

116+
###React Native
117+
-**React Native/Expo applications**
118+
-**Mobile-focused UI development**
119+
-**Using react-native-reusables components**
120+
103121
##🔄 Multi-Framework Development
104122

105123
You can easily switch between frameworks to compare implementations:
@@ -114,6 +132,9 @@ npx @jpisnice/shadcn-ui-mcp-server --framework svelte
114132

115133
npx @jpisnice/shadcn-ui-mcp-server --framework vue
116134
# Get Vue button component
135+
136+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
137+
# Get React Native button component
117138
```
118139

119140
##⚠️ Important Notes
@@ -139,4 +160,4 @@ Each framework may have slightly different:
139160
-[First Steps](first-steps.md) - Make your first component request
140161
-[Framework Documentation](../frameworks/) - Detailed framework guides
141162
-[Usage Examples](../usage/) - See framework-specific examples
142-
-[Integration](../integration/) - Connect to your editor or tool
163+
-[Integration](../integration/) - Connect to your editor or tool

‎docs/getting-started/installation.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,13 @@ shadcn-ui-mcp-server [options]
3838

3939
Options:
4040
--github-api-key, -g<token> GitHub Personal Access Token
41-
--framework, -f<framework> Framework to use:'react','svelte'or'vue' (default: react)
41+
--framework, -f<framework> Framework to use:'react','svelte','vue',or'react-native' (default: react)
4242
--help, -h Showhelp message
4343
--version, -v Show version information
4444

4545
Environment Variables:
4646
GITHUB_PERSONAL_ACCESS_TOKEN Alternative way to provide GitHub token
47-
FRAMEWORK Framework to use:'react','svelte'or'vue' (default: react)
47+
FRAMEWORK Framework to use:'react','svelte','vue',or'react-native' (default: react)
4848

4949
Examples:
5050
npx @jpisnice/shadcn-ui-mcp-server --help
@@ -58,7 +58,7 @@ Examples:
5858

5959
##🎯 Framework Selection
6060

61-
The server supportsthree frameworks. See[Framework Selection](framework-selection.md) for details:
61+
The server supportsfour frameworks. See[Framework Selection](framework-selection.md) for details:
6262

6363
```bash
6464
# React (default)
@@ -69,6 +69,9 @@ npx @jpisnice/shadcn-ui-mcp-server --framework svelte
6969

7070
# Vue
7171
npx @jpisnice/shadcn-ui-mcp-server --framework vue
72+
73+
# React Native
74+
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
7275
```
7376

7477
##🔑 GitHub Token Setup
@@ -106,4 +109,4 @@ npx @jpisnice/shadcn-ui-mcp-server
106109
-[GitHub Token Setup](github-token.md) - Set up optimal performance
107110
-[Framework Selection](framework-selection.md) - Choose your framework
108111
-[First Steps](first-steps.md) - Make your first component request
109-
-[Integration](../integration/) - Connect to your editor or tool
112+
-[Integration](../integration/) - Connect to your editor or tool

‎docs/integration/README.md‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ See [Claude Desktop Integration](claude-desktop.md) for details.
3636
-**Get component demos** and usage examples
3737
-**Retrieve complete blocks** (dashboards, forms, etc.)
3838
-**Explore repository structure** without leaving your tool
39-
-**Compare framework implementations** (React, Svelte, Vue)
39+
-**Compare framework implementations** (React, Svelte, Vue, React Native)
4040

4141
##🔧 Common Configuration
4242

@@ -68,6 +68,19 @@ For different frameworks:
6868
}
6969
```
7070

71+
```json
72+
{
73+
"command":"npx",
74+
"args": [
75+
"@jpisnice/shadcn-ui-mcp-server",
76+
"--framework",
77+
"react-native",
78+
"--github-api-key",
79+
"ghp_your_token_here"
80+
]
81+
}
82+
```
83+
7184
##🐛 Troubleshooting
7285

7386
###Integration Not Working
@@ -95,4 +108,4 @@ For different frameworks:
95108
-[Getting Started](../getting-started/) - Installation and setup
96109
-[Usage Examples](../usage/) - How to use after integration
97110
-[Troubleshooting](../troubleshooting/) - Common issues and solutions
98-
-[API Reference](../api/) - Complete tool reference
111+
-[API Reference](../api/) - Complete tool reference

‎docs/integration/claude-code.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,12 @@ claude mcp add shadcn-svelte -- bunx -y @jpisnice/shadcn-ui-mcp-server --framewo
5252
claude mcp add shadcn-vue -- bunx -y @jpisnice/shadcn-ui-mcp-server --framework vue --github-api-key YOUR_API_KEY
5353
```
5454

55+
###React Native
56+
57+
```bash
58+
claude mcp add shadcn-react-native -- bunx -y @jpisnice/shadcn-ui-mcp-server --framework react-native --github-api-key YOUR_API_KEY
59+
```
60+
5561
##🎯 Usage Examples
5662

5763
###Component Requests
@@ -130,4 +136,4 @@ npx --version
130136
-[Usage Examples](../usage/) - How to use after integration
131137
-[Troubleshooting](../troubleshooting/) - Common issues and solutions
132138
-[API Reference](../api/) - Complete tool reference
133-
-[Other Integrations](README.md) - Connect to other tools
139+
-[Other Integrations](README.md) - Connect to other tools

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp