Armá interfaces lindas sin diseñar desde cero (shadcn/ui)

Tu app funciona, pero se ve "de programador": botones toscos, formularios desalineados, todo gris medio triste. No sos diseñador, y armar cada pantalla linda desde cero es un dolor de cabeza que te come horas.

Acá entra shadcn/ui: un set de piezas visuales ya diseñadas que pegas dentro de tu propio proyecto y listísimo.

01 Qué es

shadcn/ui es un set de componentes ya diseñados —botones, ventanitas emergentes, menús, tarjetas— prolijos y pensados para que cualquiera los pueda usar. La gracia: no es una caja cerrada, el código de cada pieza queda dentro de tu proyecto, así que lo modificás todo lo que quieras. Y es gratis.

GratisLicencia MIT
TuyoEl código queda en tu proyecto
Listo1 comando para arrancar

🧪 La analogía
Imaginá que querés vestirte bien pero no sabés coser. Una opción es comprar la tela, el hilo y la aguja y armar cada prenda desde cero (eso es diseñar la interfaz a mano: lento y, si no sabés, queda torcido). La otra es ir a una buena tienda, agarrar prendas de calidad ya hechas y llevarlas al sastre para los retoques finales. shadcn/ui es la segunda: prendas de primera ya cortadas, vos solo las ajustás a tu medida.

02 En criollo, los términos

📟 En criollo
UI = "User Interface", la interfaz de usuario. Es todo lo que ves y tocás en una app: los botones, los menús, los formularios. La cara visible del programa.
Componente = una pieza suelta y reutilizable de esa cara. Un botón es un componente, un menú es otro. Son como los ladrillos de Lego con los que armás la pantalla.
React / Next.js = las dos herramientas más usadas hoy para construir apps web modernas. Pensálas como el "sistema constructivo" sobre el que se apoyan esos ladrillos. shadcn/ui está hecho para encajar ahí.
MIT = el tipo de licencia (el permiso legal de uso). MIT es de las más libres que existen: usás, modificás y hasta vendés lo que armes, gratis y sin pedir permiso.

03 Por qué va genial con Claude

Acá está la jugada que lo hace brillar. Como el código de los componentes vive dentro de tu proyecto (no escondido en una librería lejana), Claude Code lo puede leer, entenderlo y ponerse a trabajar con él: lo adapta a los colores de tu marca y arma pantallas nuevas combinando esos bloques. En vez de pedirle a Claude que dibuje todo desde la nada, le estás dando un cofre lleno de piezas de calidad para que construya. El resultado sale mejor y más rápido.

04 Cómo arrancás

✅ Cómo se hace
Abrí tu proyecto (necesitás uno ya armado en React o Next.js).
Corré este único comando, que prepara todo de una:

npx shadcn@latest init

Listo. A partir de ahí vas sumando los componentes que necesités, de a uno, a medida que los usás. No tens que bajarlos todos juntos.

⚠️ Ojo con esto
No es para cualquier proyecto: necesitás tener una base en React o Next.js (que es lo más común para apps web modernas). Si todavía no tenés un proyecto así, ese es el paso cero antes de pensar en shadcn/ui.

⚡ Tip del Tincho
No intentes sumar los 50 componentes el primer día. Agarrá solo el que necesitás para la pantalla en la que estás trabajando (un botón, un formulario) y dejale el resto a Claude cuando los vayas precisando. Menos lío, y entendés qué hace cada pieza.

05 Para qué te va a servir