Ejemplos que acompañan al post "Shadcn UI: conoce tu hipoteca" del blog de Lemoncode: una guía para entender qué es shadcn/ui de verdad, qué ocurre cuando ejecutas add y qué estás firmando a largo plazo.
Estas demos no están para enseñar que shadcn/ui es bonito. Lo es. Están para hacer tangible el trato: el código aterriza en tu repositorio y, a partir de ese momento, es tuyo y lo mantienes tú.
Cada carpeta es un proyecto independiente (React 19 + Vite + Tailwind CSS v4 + shadcn/ui sobre Base UI, el defecto desde julio de 2026) con su propio README.
| Demo | Qué muestra |
|---|---|
| 01-que-copia-el-add | Qué deja de verdad un solo add en tu repo: ficheros, tokens y dependencias |
| 02-el-conflicto | Tocas button.tsx, y meses después llega un componente que esperaba el contrato original. Esta demo no compila, y es a propósito |
| 03-wrapper-propio | La salida mantenible: tu wrapper con tu API — y el momento en que te das cuenta de que estás construyendo una librería de componentes |
| 04-tabla-tanstack | Table de shadcn + TanStack Table v9: lo que te dan hecho y la lista larga de lo que no |
Para arrancar cualquiera:
cd 01-que-copia-el-add
npm install
npm run dev
⚠️ La demo02-el-conflictoestá pensada para fallar al ejecutarnpm run build. Ese fallo es la demo. Connpm run devsí arranca, lo cual ya es una lección en sí misma.
Las cuatro demos se han creado con:
npx shadcn@latest init -b base -p novaEl -b base elige Base UI, que pasó a ser la base por defecto en julio de 2026. Radix sigue soportado (-b radix) y React Aria también está disponible (-b aria).
Esa elección queda anotada en components.json como "style": "base-nova". No es un ajuste cosmético: decide sobre qué librería de primitivas se construyen tus componentes, y todos los que añadas después la seguirán. Que es exactamente el argumento del post.
Una consecuencia visible: Base UI usa una prop render donde Radix usaba asChild. Misma idea, contrato distinto. Lo verás por todas las demos.