shadcn/ui es una de las mejores cosas que le han pasado al desarrollo en React en años. Te da primitivos accesibles y sin estilos, un modelo copy-paste sensato y la propiedad total del código. Donde se detiene, eso sí, es en el nivel de componente: botones, diálogos, inputs de formularios, dropdowns. Si necesitas un hero completo con texto animado, un scroll de historia de cliente o un bloque de estadísticas con contadores, te toca resolverlo solo. Ese vacío es justo donde las alternativas a shadcn/ui cobran sentido.
Este artículo repasa qué hace bien shadcn/ui, dónde se queda corto y qué herramientas cubren ese espacio, con honestidad.
Lo que shadcn/ui hace bien
El modelo copy-paste es realmente inteligente. Eres dueño de cada línea. Sin deriva de versiones, sin dependencias que actualizar, sin un design system imponiendo sus opiniones sobre tu marca. Los componentes son accesibles por defecto porque se apoyan en los primitivos de Radix UI. El soporte de TypeScript es de primera categoría.
Para construir interfaces de aplicación, formularios, paneles de administración, dashboards y tablas de datos, shadcn/ui es difícil de superar. Los componentes son componibles, predecibles y están bien documentados.
El vacío aparece cuando pasas de construir una app a construir un sitio de marketing. Páginas de precios, secciones hero, carruseles de testimonios, grids de características con animaciones de scroll: nada de eso entra en el alcance de shadcn/ui. Requieren layouts de sección completos, coreografía de movimiento y patrones específicos de marketing. Puedes montarlos a partir de los primitivos de shadcn, pero eso es un lienzo en blanco, no una ventaja de salida.
Las principales alternativas a shadcn/ui
Aquí va una mirada honesta a las herramientas que cubren el vacío de las secciones de marketing:
| Herramienta | Qué ofrece | Precio | Propiedad | |------|-----------------|---------|-----------| | Tailwind UI | Plantillas pulidas de secciones HTML/React/Vue | $299 pago único | Eres dueño del código | | Aceternity UI | Componentes animados llamativos, enfocados en dark | Gratis + Pro | Eres dueño del código | | Framer | Constructor completo de landing, editor visual | Suscripción | Atado a Framer | | Incubator | 449 variantes de sección, con temas, copy-paste | Gratis + Pro | Eres dueño del código |
Ninguna reemplaza a shadcn/ui. La complementan. La configuración típica es: shadcn/ui para los primitivos de UI de la app y una de las anteriores para las secciones de marketing.
Tailwind UI
Tailwind UI es el estándar de oro en calidad. Cada plantilla está hecha a mano, es responsive y usa HTML semántico con criterio. La pega es el coste: $299 como pago único, razonable para un equipo pero alto para un proyecto paralelo en solitario. La selección se inclina hacia estéticas de SaaS empresarial, lo que no encaja con todas las marcas.
Consulta la comparativa Incubator vs Tailwind UI para un análisis detallado.
Aceternity UI
Aceternity se ha vuelto popular por sus animaciones impactantes: fondos de partículas, efectos spotlight, formas que se transforman. Está basada en React y Tailwind, es gratuita en la mayoría de componentes y tiene un nivel Pro. La estética es muy de dark-mode-and-glow, algo que funciona para cripto, IA y herramientas para desarrolladores. Para un SaaS B2B que vende a responsables de RR. HH., puede resultar demasiado agresiva. La calidad del código es sólida; algunos componentes son complejos y pueden costar de personalizar más allá de su estilo predefinido.
Lee más en la comparativa Incubator vs Aceternity UI.
Incubator
Incubator es una biblioteca de secciones con 449 variantes de React repartidas en 66 tipos de sección: heroes, precios, testimonios, características, estadísticas, changelogs, sliders de antes/después y más. Cada sección está construida con Tailwind v4 y Framer Motion, usa CSS custom properties para los temas y está diseñada para copiarse directamente en un proyecto Next.js.
El diferencial está en la amplitud de estéticas. Mientras Aceternity tira por defecto a dark/neón y Tailwind UI a claro/empresarial, Incubator incluye siete presets visuales: un estilo dark minimal, un estilo light editorial, un estilo bold noir y otros. Puedes explorar las variantes en modo oscuro o las variantes minimalistas para encontrar algo que encaje con tu marca antes de copiar nada de código.
Las animaciones son una característica de primer nivel. Hay colecciones dedicadas a animaciones activadas por scroll y efectos hover, todas usando las APIs whileInView y whileHover de Framer Motion. El hero con máscara de cursor es un buen ejemplo: rastrea la posición del ratón y revela el contenido a través de un efecto de lente enmascarada, ese tipo de detalle que lleva mucho tiempo construir desde cero.
Para los precios, consulta la página de precios de Incubator.
Mira también la comparativa Incubator vs shadcn/ui para ver un análisis lado a lado de ambas herramientas.
Cómo usar shadcn/ui y una biblioteca de secciones juntas
La configuración práctica para un sitio de marketing en Next.js:
- Instala shadcn/ui para tus primitivos de app:
Button,Input,Dialog,Select,Table. - Elige tu biblioteca de secciones para las páginas de marketing. Copia las secciones que necesites y pégalas en
src/components/sections/. - Conecta las secciones a tus datos. Las secciones usan datos de ejemplo por defecto; reemplaza el mock con tu texto real.
- Aplica el tema una sola vez. Si la biblioteca de secciones usa CSS custom properties, define los colores de tu marca en la raíz y cada sección los hereda.
Las dos herramientas no entran en conflicto. Los componentes de shadcn/ui viven en components/ui/, las secciones de marketing viven en components/sections/. Sin solapamiento, sin peleas.
Qué mirar al elegir
Algunas preguntas que ayudan a acotar la decisión:
- ¿Necesitas modo oscuro? Aceternity e Incubator tienen variantes dark muy buenas. Tailwind UI requiere más trabajo para adaptarse.
- ¿Cuánta animación quieres? Las bibliotecas cargadas de Framer Motion (Aceternity, Incubator) ofrecen más movimiento de serie. Tailwind UI es en su mayoría estática.
- ¿Cuánto tiempo de personalización tienes? Las secciones de Tailwind UI son limpias pero llevan tiempo de re-estilizar. El sistema de temas de Incubator te deja cambiar el estilo visual de forma global con un solo bloque de variables CSS.
- ¿Cuál es tu presupuesto? Aceternity e Incubator tienen ambas niveles gratuitos. Tailwind UI requiere un pago por adelantado. Framer te ata a una suscripción.
La conclusión
Aquí no se reemplaza a shadcn/ui. Sigue siendo la herramienta correcta para la UI de aplicación. El punto honesto es que nunca se diseñó para secciones de marketing completas, y usarla así significa construir desde cero.
Para equipos que quieren secciones completas, con tema y animadas sin partir de un archivo de Tailwind en blanco, las opciones prácticas son Tailwind UI (alta calidad, de pago, ligera en animación), Aceternity UI (estética impactante, nivel gratuito, cargada de movimiento) e Incubator (cobertura amplia de secciones, múltiples estéticas, sistema de temas, nivel gratuito). Las tres te dejan ser dueño del código, que es el modelo correcto sin importar cuál elijas.
Explora el catálogo completo de secciones de Incubator para ver qué secciones hay disponibles antes de comprometerte con nada.