Saltar al contenido
8/10
S Diseño y Frontend

shadcn/ui MCP — Componentes Listos para tu Web

Le da a tu IA el código de los componentes de shadcn/ui (botones, formularios, tablas, dashboards...) en React, Vue, Svelte y React Native, para que los use correctamente. Un atajo enorme para montar interfaces bonitas y consistentes.

Revisada el 2026-09-21

Popularidad
3k
Licencia
MIT
Autor
Jpisnice
Categoría
Diseño y Frontend

Seguridad: revisada

El contenido es seguro; el instalador o el servicio externo no se auditan aquí.

¿Qué es?

Es un conector que le da a tu IA acceso al catálogo de componentes de shadcn/ui (una librería de piezas de interfaz muy popular y gratuita): botones, tarjetas, formularios, tablas, menús... y también bloques completos (dashboards, calendarios). Incluye el código real y ejemplos de uso.

Piénsalo como una caja de piezas de LEGO para tu web: en vez de que tu IA invente cada botón o formulario desde cero, usa piezas ya probadas y con buen aspecto.

Qué puede hacer:

  • Buscar componentes (botón, tabla, formulario...).
  • Ver el código y los ejemplos de uso.
  • Bloques completos (dashboards, calendarios...).
  • Para React, Vue, Svelte y React Native.

Detalle a favor: es de los más usados en desarrollo web moderno, gratis, y solo lee código público. Si usas shadcn/ui (muy común), esto acelera muchísimo.

¿Cuándo me sirve?

Cuando montas una interfaz web o app:

  • "Usa un componente de tabla de shadcn" → código correcto.
  • "Necesito un formulario con validación" → componentes + ejemplos.
  • "Monta un dashboard" → bloque completo.
  • "¿Cómo se usa este componente?" → ejemplos.
  • "Que funcione en React Native" → versión móvil.

¿Esto me sirve a mí?

Sí, para cualquier interfaz moderna (y encaja con las skills de Diseño/Programación que ya tienes).

Si un día piensas...Te da...
"La IA inventa componentes raros"Componentes reales
"No sé cómo montar esto"Piezas listas
"Quiero que se vea profesional"UI moderna y consistente
"Lo quiero para Vue/Svelte/móvil"Multi-framework

No te sirve si no haces frontend o no usas este estilo de componentes.

¿Es segura?

Veredicto: ✅ SÍ, es limpia (riesgo 0).

  • Qué hace: lee el código público de shadcn/ui (desde GitHub). Solo lectura.
  • Sin acceso a tu proyecto ni a tus claves (usa tu token de GitHub solo para más límite, si quieres).
  • **El matiz (limpia*): descarga el código desde GitHub** (servicio externo), de forma transparente.
  • Dependencias conocidas (axios, cheerio, express...). Los exec() son de expresiones regulares, no de comandos.
  • Licencia: MIT.

Cómo se instala

claude mcp add shadcn -- npx -y @jpisnice/shadcn-ui-mcp-server

O token opcional de GitHub para más límite: --github-api-key TU_TOKEN.

¿En qué asistentes funciona?

Asistente¿Funciona?Notas
OpenCode✅ SíConfiguración MCP
Claude Code✅ Síclaude mcp add
Cursor✅ SíConfiguración MCP
VS Code / Windsurf / Claude Desktop✅ SíCompatible con MCP

Enlaces

  • Repositorio: https://github.com/Jpisnice/shadcn-ui-mcp-server
  • shadcn/ui: https://ui.shadcn.com

Volver a MCPs