wally-ui 1.11.0 → 1.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +89 -93
  2. package/package.json +1 -1
  3. package/playground/showcase/src/app/components/carousel/carousel.html +33 -1
  4. package/playground/showcase/src/app/components/carousel/carousel.ts +251 -199
  5. package/playground/showcase/src/app/pages/documentation/components/breadcrumb-docs/breadcrumb-docs.html +186 -114
  6. package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts +114 -0
  7. package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.html +516 -248
  8. package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.ts +11 -0
  9. package/playground/showcase/src/app/pages/documentation/components/carousel-docs/carousel-docs.html +326 -253
  10. package/playground/showcase/src/app/pages/documentation/components/components.html +136 -74
  11. package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.html +370 -292
  12. package/playground/showcase/src/app/pages/documentation/documentation.html +204 -153
  13. package/playground/showcase/src/app/pages/home/home.html +153 -50
  14. package/playground/showcase/src/app/pages/home/home.ts +2 -1
  15. package/playground/showcase/src/app/pages/mcp/mcp.html +235 -179
package/playground/showcase/src/app/pages/mcp/mcp.html CHANGED
@@ -1,196 +1,252 @@
1
- <div class="max-w-4xl mx-auto p-6 font-mono">
2
- <div class="mb-4">
3
- <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
4
- </div>
5
-
6
- <!-- Header -->
7
- <div class="mb-8">
8
- <h1 class="text-4xl font-bold text-[#0a0a0a] dark:text-white mb-2">
9
- Wally UI MCP Server
10
- </h1>
11
- <p class="text-lg text-gray-700 dark:text-gray-400">
12
- Model Context Protocol server for intelligent AI-powered component installation with Claude Desktop.
13
- </p>
14
- </div>
15
-
16
- <!-- Installation Section -->
17
- <section class="mb-8">
18
- <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
19
- Installation
20
- </h2>
21
-
22
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 mb-4">
23
- <code class="text-[#0a0a0a] dark:text-white">
24
- <pre class="m-0">npm install -g wally-ui-mcp</pre>
25
- </code>
26
- </div>
27
- </section>
28
-
29
- <!-- Configuration Section -->
30
- <section class="mb-8">
31
- <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
32
- Configuration
33
- </h2>
34
-
35
- <p class="text-gray-700 dark:text-gray-400 mb-4">
36
- Add to your Claude Desktop configuration file:
37
- </p>
38
-
39
- <div class="mb-4">
40
- <p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
41
- <strong>Mac:</strong> <code
42
- class="bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">~/Library/Application Support/Claude/claude_desktop_config.json</code>
1
+ <main class="min-h-dvh bg-white dark:bg-[#0a0a0a] font-mono" role="main">
2
+ <div class="max-w-4xl mx-auto px-4 py-8 sm:px-6 md:px-8">
3
+
4
+ <!-- Breadcrumb Navigation -->
5
+ <nav class="mb-8" aria-label="Breadcrumb navigation">
6
+ <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
7
+ </nav>
8
+
9
+ <!-- Header -->
10
+ <header class="mb-12" role="banner">
11
+ <h1 id="page-title" class="text-3xl sm:text-4xl font-bold text-[#0a0a0a] dark:text-white mb-4 uppercase">
12
+ <span aria-hidden="true">&gt;_ </span>MCP Server
13
+ </h1>
14
+ <p class="text-sm sm:text-base text-neutral-700 dark:text-neutral-300 border-l-2 border-neutral-300 dark:border-neutral-700 pl-4">
15
+ Model Context Protocol server for intelligent AI-powered component installation with Claude Desktop and other AI coding assistants.
43
16
  </p>
44
- <p class="text-sm text-gray-700 dark:text-gray-400 mb-4">
45
- <strong>Windows:</strong> <code
46
- class="bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">%APPDATA%\Claude\claude_desktop_config.json</code>
17
+ </header>
18
+
19
+ <!-- Installation Section -->
20
+ <section id="installation" class="mb-12" aria-labelledby="installation-heading">
21
+ <h2 id="installation-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
22
+ [ Installation ]
23
+ </h2>
24
+
25
+ <code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
26
+ aria-label="Installation command for Wally UI MCP Server">
27
+ <pre class="m-0">$ npm install -g wally-ui-mcp</pre>
28
+ </code>
29
+ </section>
30
+
31
+ <!-- Configuration Section -->
32
+ <section id="configuration" class="mb-12" aria-labelledby="configuration-heading">
33
+ <h2 id="configuration-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
34
+ [ Configuration ]
35
+ </h2>
36
+
37
+ <p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 mb-4 leading-relaxed">
38
+ Add to your Claude Desktop configuration file:
47
39
  </p>
48
- </div>
49
-
50
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 mb-4">
51
- <code class="text-sm text-[#0a0a0a] dark:text-white">
52
- {{ '{' }}<br>
53
- &nbsp;&nbsp;"mcpServers": {{ '{' }}<br>
54
- &nbsp;&nbsp;&nbsp;&nbsp;"wally-ui": {{ '{' }}<br>
55
- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"command": "npx",<br>
56
- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"args": ["wally-ui-mcp"],<br>
57
- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"env": {{ '{' }}{{ '}' }}<br>
58
- &nbsp;&nbsp;&nbsp;&nbsp;{{ '}' }}<br>
59
- &nbsp;&nbsp;{{ '}' }}<br>
60
- {{ '}' }}
61
- </code>
62
- </div>
63
- </section>
64
-
65
- <!-- Features Section -->
66
- <section class="mb-8">
67
- <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
68
- Available Tools
69
- </h2>
70
-
71
- <div class="grid gap-4 md:grid-cols-2">
72
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
73
- <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
74
- install-component
75
- </h3>
76
- <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
77
- Installs Wally UI components directly into your Angular project.
78
- </p>
79
- <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
80
- componentName: string
40
+
41
+ <div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700 mb-4" role="list" aria-label="Configuration file paths by operating system">
42
+ <div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
43
+ <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2">
44
+ <span aria-hidden="true">&gt; </span>Mac
45
+ </h3>
46
+ <code class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 block">
47
+ ~/Library/Application Support/Claude/claude_desktop_config.json
81
48
  </code>
82
- </div>
49
+ </div>
83
50
 
84
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
85
- <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
86
- list-components
87
- </h3>
88
- <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
89
- Lists all available components in the Wally UI library.
90
- </p>
91
- <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
92
- No parameters
51
+ <div class="p-4 bg-white dark:bg-[#0a0a0a]" role="listitem">
52
+ <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2">
53
+ <span aria-hidden="true">&gt; </span>Windows
54
+ </h3>
55
+ <code class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 block">
56
+ %APPDATA%\Claude\claude_desktop_config.json
93
57
  </code>
58
+ </div>
94
59
  </div>
95
60
 
96
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
97
- <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
98
- validate-component
99
- </h3>
100
- <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
101
- Validates component structure and integrity.
102
- </p>
103
- <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
61
+ <p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300 mb-3 leading-relaxed">
62
+ Add the following configuration to your file:
63
+ </p>
64
+
65
+ <pre class="font-mono text-xs sm:text-sm text-[#0a0a0a] dark:text-white leading-tight bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3 overflow-x-auto"
66
+ role="img"
67
+ aria-label="JSON configuration example for Claude Desktop MCP server integration">{{ '{' }}
68
+ "mcpServers": {{ '{' }}
69
+ "wally-ui": {{ '{' }}
70
+ "command": "npx",
71
+ "args": ["wally-ui-mcp"],
72
+ "env": {{ '{' }}{{ '}' }}
73
+ {{ '}' }}
74
+ {{ '}' }}
75
+ {{ '}' }}</pre>
76
+ </section>
77
+
78
+ <!-- Available Tools Section -->
79
+ <section id="available-tools" class="mb-12" aria-labelledby="tools-heading">
80
+ <h2 id="tools-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
81
+ [ Available Tools ]
82
+ </h2>
83
+
84
+ <div class="grid gap-0 md:grid-cols-2 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="MCP server tools and their descriptions">
85
+ <article class="p-4 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
86
+ <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
87
+ <span aria-hidden="true">[ </span>install-component<span aria-hidden="true"> ]</span>
88
+ </h3>
89
+ <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
90
+ Installs Wally UI components directly into your Angular project.
91
+ </p>
92
+ <code class="text-xs text-neutral-500 dark:text-neutral-500">
104
93
  componentName: string
105
94
  </code>
106
- </div>
107
-
108
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
109
- <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
110
- generate-docs
111
- </h3>
112
- <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
113
- Generates documentation for components.
114
- </p>
115
- <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
95
+ </article>
96
+
97
+ <article class="p-4 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
98
+ <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
99
+ <span aria-hidden="true">[ </span>list-components<span aria-hidden="true"> ]</span>
100
+ </h3>
101
+ <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
102
+ Lists all available components in the Wally UI library.
103
+ </p>
104
+ <code class="text-xs text-neutral-500 dark:text-neutral-500">
105
+ No parameters
106
+ </code>
107
+ </article>
108
+
109
+ <article class="p-4 border-b-2 md:border-b-0 md:border-r-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
110
+ <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
111
+ <span aria-hidden="true">[ </span>validate-component<span aria-hidden="true"> ]</span>
112
+ </h3>
113
+ <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
114
+ Validates component structure and integrity.
115
+ </p>
116
+ <code class="text-xs text-neutral-500 dark:text-neutral-500">
117
+ componentName: string
118
+ </code>
119
+ </article>
120
+
121
+ <article class="p-4 border-b-2 md:border-b-0 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
122
+ <h3 class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-2 uppercase">
123
+ <span aria-hidden="true">[ </span>generate-docs<span aria-hidden="true"> ]</span>
124
+ </h3>
125
+ <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-2">
126
+ Generates documentation for components.
127
+ </p>
128
+ <code class="text-xs text-neutral-500 dark:text-neutral-500">
116
129
  componentName: string
117
130
  </code>
131
+ </article>
118
132
  </div>
119
- </div>
120
- </section>
121
-
122
- <!-- Usage Examples -->
123
- <section class="mb-8">
124
- <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
125
- Usage Examples
126
- </h2>
127
-
128
- <div class="space-y-4">
129
- <div>
130
- <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
131
- List Available Components
132
- </h3>
133
- <p class="text-gray-700 dark:text-gray-400 mb-2">
134
- Ask Claude to show you what components are available:
135
- </p>
136
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
137
- <code class="text-[#0a0a0a] dark:text-white">
138
- <pre class="m-0">"Show me the available Wally UI components"</pre>
139
- </code>
133
+ </section>
134
+
135
+ <!-- Usage Examples -->
136
+ <section id="usage-examples" class="mb-12" aria-labelledby="examples-heading">
137
+ <h2 id="examples-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
138
+ [ Usage Examples ]
139
+ </h2>
140
+
141
+ <div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700">
142
+ <div id="example-list" class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" aria-labelledby="example-list-heading">
143
+ <h3 id="example-list-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
144
+ <span aria-hidden="true">&gt; </span>List Available Components
145
+ </h3>
146
+ <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3">
147
+ Ask Claude to show you what components are available:
148
+ </p>
149
+ <code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
150
+ aria-label="Example prompt for listing components">
151
+ <pre class="m-0">"Show me the available Wally UI components"</pre>
152
+ </code>
153
+ </div>
154
+
155
+ <div id="example-install" class="p-4 bg-white dark:bg-[#0a0a0a]" aria-labelledby="example-install-heading">
156
+ <h3 id="example-install-heading" class="text-sm sm:text-base font-bold text-[#0a0a0a] dark:text-white mb-3 uppercase">
157
+ <span aria-hidden="true">&gt; </span>Install a Component
158
+ </h3>
159
+ <p class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 mb-3">
160
+ Ask Claude to install a specific component in your project:
161
+ </p>
162
+ <code class="text-xs sm:text-sm text-[#0a0a0a] dark:text-white block bg-neutral-100 dark:bg-[#121212] border border-neutral-300 dark:border-neutral-700 p-3"
163
+ aria-label="Example prompt for installing button component">
164
+ <pre class="m-0">"Install the button component from Wally UI in my Angular project"</pre>
165
+ </code>
140
166
  </div>
141
167
  </div>
168
+ </section>
169
+
170
+ <!-- Requirements -->
171
+ <section id="requirements" class="mb-12" aria-labelledby="requirements-heading">
172
+ <h2 id="requirements-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
173
+ [ Requirements ]
174
+ </h2>
175
+
176
+ <div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="System requirements for MCP server">
177
+ <div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
178
+ <p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
179
+ <span aria-hidden="true">&gt; </span>Node.js 18+
180
+ </p>
181
+ </div>
142
182
 
143
- <div>
144
- <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
145
- Install a Component
146
- </h3>
147
- <p class="text-gray-700 dark:text-gray-400 mb-2">
148
- Ask Claude to install a specific component in your project:
149
- </p>
150
- <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
151
- <code class="text-[#0a0a0a] dark:text-white">
152
- <pre class="m-0">"Install the button component from Wally UI in my Angular project"</pre>
153
- </code>
183
+ <div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
184
+ <p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
185
+ <span aria-hidden="true">&gt; </span>Claude Desktop with MCP support
186
+ </p>
187
+ </div>
188
+
189
+ <div class="p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a]" role="listitem">
190
+ <p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
191
+ <span aria-hidden="true">&gt; </span>Angular project (for component installation)
192
+ </p>
193
+ </div>
194
+
195
+ <div class="p-4 bg-white dark:bg-[#0a0a0a]" role="listitem">
196
+ <p class="text-xs sm:text-sm text-neutral-700 dark:text-neutral-300">
197
+ <span aria-hidden="true">&gt; </span>Tailwind CSS configured in your project
198
+ </p>
154
199
  </div>
155
200
  </div>
156
- </div>
157
- </section>
158
-
159
- <!-- Requirements -->
160
- <section class="mb-8">
161
- <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
162
- Requirements
163
- </h2>
164
-
165
- <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 space-y-2">
166
- <li>Node.js 18+</li>
167
- <li>Claude Desktop with MCP support</li>
168
- <li>Angular project (for component installation)</li>
169
- <li>Tailwind CSS configured in your project</li>
170
- </ul>
171
- </section>
172
-
173
- <!-- Links -->
174
- <section class="mb-8">
175
- <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
176
- Links
177
- </h2>
178
-
179
- <div class="flex flex-wrap gap-4">
180
- <a href="https://www.npmjs.com/package/wally-ui-mcp" target="_blank"
181
- class="text-blue-500 underline hover:text-blue-700">
182
- NPM Package
183
- </a>
184
- <a href="https://github.com/WalissonCF/wally-ui" target="_blank"
185
- class="text-blue-500 underline hover:text-blue-700">
186
- GitHub Repository
187
- </a>
188
- <a href="https://modelcontextprotocol.io/" target="_blank" class="text-blue-500 underline hover:text-blue-700">
189
- Model Context Protocol
190
- </a>
191
- <a href="/documentation/components" class="text-blue-500 underline hover:text-blue-700">
192
- Browse Components
193
- </a>
194
- </div>
195
- </section>
196
- </div>
201
+ </section>
202
+
203
+ <!-- Links -->
204
+ <section id="links" class="mb-12" aria-labelledby="links-heading">
205
+ <h2 id="links-heading" class="text-[10px] sm:text-xs text-neutral-500 dark:text-neutral-500 uppercase tracking-wider mb-4">
206
+ [ Links ]
207
+ </h2>
208
+
209
+ <div class="space-y-0 border-2 border-neutral-300 dark:border-neutral-700" role="list" aria-label="External resources and documentation links">
210
+ <a href="https://www.npmjs.com/package/wally-ui-mcp" target="_blank"
211
+ class="block p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
212
+ rel="noopener noreferrer"
213
+ role="listitem"
214
+ aria-label="View Wally UI MCP Server package on NPM (opens in new tab)">
215
+ <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
216
+ NPM Package
217
+ </span>
218
+ </a>
219
+
220
+ <a href="https://github.com/WalissonCF/wally-ui" target="_blank"
221
+ class="block p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
222
+ rel="noopener noreferrer"
223
+ role="listitem"
224
+ aria-label="View Wally UI source code on GitHub (opens in new tab)">
225
+ <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
226
+ GitHub Repository
227
+ </span>
228
+ </a>
229
+
230
+ <a href="https://modelcontextprotocol.io/" target="_blank"
231
+ class="block p-4 border-b-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
232
+ rel="noopener noreferrer"
233
+ role="listitem"
234
+ aria-label="Learn about Model Context Protocol specification (opens in new tab)">
235
+ <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
236
+ Model Context Protocol
237
+ </span>
238
+ </a>
239
+
240
+ <a href="/documentation/components"
241
+ class="block p-4 bg-white dark:bg-[#0a0a0a] hover:bg-[#0a0a0a] dark:hover:bg-white transition-all duration-150 cursor-pointer"
242
+ role="listitem"
243
+ aria-label="Browse all available Wally UI components with examples and documentation">
244
+ <span class="text-xs sm:text-sm text-neutral-600 dark:text-neutral-400 hover:text-white dark:hover:text-[#0a0a0a] underline underline-offset-4 transition-colors duration-150">
245
+ Browse Components
246
+ </span>
247
+ </a>
248
+ </div>
249
+ </section>
250
+
251
+ </div>
252
+ </main>