shadcn/ui
Componentes de interfaz gratis (botones, menús, formularios) que copias a tu proyecto y cambias a tu gusto.
- Nivel: Intermedio
- Precio: Gratis
Qué incluye
- Decenas de componentes: botones, campos, formularios, menús, diálogos, tablas, pestañas, avisos, gráficas y más.
- Bloques armados: pantallas de inicio de sesión, paneles y barras laterales para copiar completos.
- Una línea de comandos que copia el código a tu proyecto, no lo instala como dependencia.
- Temas con variables CSS, modo claro y oscuro.
- Un MCP para que Claude busque e instale componentes por ti.
Para quién es
Para quien construye apps en React con Tailwind y quiere una base de componentes bonita y accesible sin depender de una librería cerrada.
La mayoría de librerías de componentes te dan cajas cerradas: se ven bien hasta que quieres cambiar algo. shadcn/ui hace al revés. Copia el código de cada componente dentro de tu proyecto, así que el botón, el menú o el formulario son tuyos desde el primer día. Lo usas como base y lo vuelves tu propia librería.
Cómo la uso yo
- Los botones, formularios y menús de esta web salen de aquí.
- Con el MCP, Claude busca el componente que necesito y lo instala solo.
Cómo instalarlo
- Abre la terminal en la carpeta de tu proyecto.
- Prepara el proyecto: npx shadcn@latest init y responde las preguntas de estilo y colores.
- Agrega los componentes que necesites, por ejemplo: npx shadcn@latest add button dialog
- Impórtalos desde @/components/ui y cámbialos a tu gusto: el código ya es tuyo.
- Para que Claude los instale solo, conecta el MCP con el comando de abajo.
Conéctala a Claude
No pide cuenta ni llave. Corre ese comando dentro de tu proyecto.
npx shadcn@latest mcp init --client claudeCómo funciona
initprepara tu proyecto. Crea la configuración, las variables de color y la carpetacomponents/ui.addcopia el componente. El archivo queda en tu código, listo para usar y para cambiar.- Tú decides el resto. Colores, radios, tamaños y comportamiento se editan como cualquier otro archivo tuyo.
npx shadcn@latest init
npx shadcn@latest add buttonimport { Button } from "@/components/ui/button"
export function Guardar() {
return <Button>Guardar cambios</Button>
}Con Claude es todavía más rápido
Con el MCP conectado, Claude ve el catálogo completo y agrega lo que hace falta sin que busques nombres:
Necesito un formulario de contacto con nombre, correo y mensaje,
validación y un aviso de éxito. Usa los componentes de shadcn.Agrega una barra lateral con navegación y modo oscuro a este panel.
Instala los componentes que falten.Un consejo
Define tus colores y radios en las variables del tema antes de agregar muchos componentes. Así todos heredan tu estilo y no terminas cambiando archivo por archivo.
Preguntas frecuentes
¿Es una librería de componentes?
No como las demás. No la instalas desde npm: copias el código de cada componente a tu proyecto. Por eso puedes cambiar lo que quieras sin esperar a nadie.
¿Cuánto cuesta?
Nada. Es de código abierto con licencia MIT.
¿Qué pasa cuando sale una versión nueva?
Tu código no cambia solo. Si quieres la versión nueva de un componente, la vuelves a agregar con la línea de comandos y revisas las diferencias.
¿Son accesibles?
Sí. Están construidos sobre Radix UI, que maneja teclado, foco y lectores de pantalla. Si los modificas, prueba que sigan funcionando con teclado.
- componentes
- react
- tailwind
- diseño
Mira también
Créditos
Probado por mí
- Quién la hizo
- shadcn-ui
- Dónde está
- https://github.com/shadcn-ui/ui
- Licencia
- MIT
- Verificación
- Lo verifiqué el
¿Eres autor o autora y algo no está bien?
Corregir un crédito