shadcn/ui

Qué es

shadcn/ui es una colección de componentes de interfaz para React creada por shadcn (en Vercel). Su lema lo resume: “no es una librería de componentes, es cómo construyes tu librería de componentes”. En lugar de instalar un paquete del que dependes, usas una CLI que copia el código de cada componente directamente a tu proyecto, y a partir de ahí es tuyo para editar. Se apoya en primitivas accesibles (Radix UI, y más recientemente Base UI) y en Tailwind CSS para los estilos. Es open source con licencia MIT y se mantiene de forma muy activa (más de 70 componentes y releases frecuentes).

Para qué sirve

• Añadir componentes accesibles y bien diseñados (botones, diálogos, formularios, tablas, menús, calendarios…) sin construirlos desde cero.
• Tener el control total del código: como vive en tu repo, adaptas estilos y comportamiento sin pelearte con la API de una librería externa.
• Mantener una base de diseño coherente con tokens de Tailwind, variables de tema y modo oscuro de serie.
• Servir como cimiento de un sistema de diseño propio, incluida la distribución de tus propios componentes mediante el sistema de registros (registry).

Cuándo usarlo

Es ideal cuando trabajas con React + Tailwind y quieres componentes de calidad que puedas personalizar a fondo. Frente a librerías “todo en uno” como Material UI o Mantine, que instalas y consumes como dependencia, shadcn/ui te entrega el código fuente para que sea tu propio sistema de diseño. Funciona en distintos entornos React (Next.js, Vite, Remix, Astro, React Router…). Si prefieres no gestionar el código de los componentes en tu repo o no usas Tailwind, una librería empaquetada tradicional puede encajar mejor.

Ejemplo

Inicializar shadcn/ui en un proyecto y añadir componentes con la CLI:

# Configura shadcn/ui en tu proyecto (Tailwind, alias, tema...)
npx shadcn@latest init

# Añade los componentes que necesites (copian su código a tu repo)
npx shadcn@latest add button dialog

import { Button } from '@/components/ui/button';

export function Ejemplo() {
  return <Button variant="outline">Aceptar</Button>;
}

Puntos clave

• Modelo “copia el código”: los componentes viven en tu proyecto, no en node_modules, así que ganas control total.
• Accesibilidad de serie gracias a primitivas como Radix UI y Base UI; estilos con Tailwind CSS, temas y modo oscuro.
• CLI (npx shadcn@latest) para inicializar el proyecto y añadir componentes uno a uno.
• Sistema de registros (registry) para distribuir componentes propios, y servidor MCP para integrarlo con asistentes de IA.
• Open source con licencia MIT, multiframework dentro del ecosistema React y muy popular (+117k estrellas).

Ten en cuenta

• Requiere Tailwind CSS; si tu proyecto no lo usa, no es la opción natural.
• Al copiar el código a tu repo, las mejoras posteriores del proyecto no llegan solas: actualizar un componente implica volver a traerlo con la CLI o aplicar los cambios a mano.
• No es una librería versionada de componentes: ganas control y personalización a cambio de mantener tú ese código.
• El paquete de la CLI pasó de llamarse shadcn-ui a shadcn; usa siempre npx shadcn@latest.