Companion examples for the post "Shadcn UI: conoce tu hipoteca" on the Lemoncode blog: a guide to what shadcn/ui really is, what happens when you run add, and what you are signing up for in the long run.
The point of these demos is not to show that shadcn/ui is pretty. It is. The point is to make the trade-off tangible: the code lands in your repository, and from that moment on it is yours to maintain.
Every folder is a standalone project (React 19 + Vite + Tailwind CSS v4 + shadcn/ui on Base UI, the default since July 2026), with its own README.
| Demo | What it shows |
|---|---|
| 01-que-copia-el-add | What a single add actually leaves in your repo: files, tokens and dependencies |
| 02-el-conflicto | You edit button.tsx, months later a component arrives expecting the old contract. This one fails to build on purpose |
| 03-wrapper-propio | The maintainable answer: your own wrapper with your own API — and the moment you realise you are building a component library |
| 04-tabla-tanstack | shadcn Table + TanStack Table v9: what you get for free, and the long list of what you do not |
To run any of them:
cd 01-que-copia-el-add
npm install
npm run dev
⚠️ 02-el-conflictois meant to fail when you runnpm run build. That failure is the demo.npm run devstill starts, which is a lesson in itself.
All four demos were scaffolded with:
npx shadcn@latest init -b base -p nova-b base selects Base UI, which became the default base in July 2026. Radix is still fully supported (-b radix), and React Aria is also available (-b aria).
That choice is recorded in components.json as "style": "base-nova". It is not a cosmetic setting — it decides which primitive library your components are built on, and every component you add later will follow it. Which is precisely the argument the post makes.
One visible consequence: Base UI uses a render prop where Radix used asChild. Same idea, different contract. You will see it throughout the demos.