Shadcn: lo que muchos usan pero casi nadie explora

Saben que shadcn/ui es probablemente la librería de componentes más usada en React ahora mismo. Pero aunque muchos la usamos todos los días para copiar-pegar un botón, un input o una card, la realidad es que muy pocos saben todo lo que hay alrededor del ecosistema: bloques completos, un constructor de dashboards con IA, temas creados por terceros que se instalan con un solo comando, registries oficiales de empresas como ElevenLabs, componentes de mapas, design kits para Figma… y la lista sigue.

En este artículo vamos a ver todo lo que shadcn puede hacer más allá del típico npx shadcn add button.

Blocks: mucho más que componentes sueltos

Lo primero que muchos se pierden son los Blocks. Si entras a ui.shadcn.com/blocks, vas a ver que no son componentes individuales, sino secciones completas ya armadas y listas para instalar: dashboards con sidebar, login pages, signup pages, layouts con gráficas, tablas de datos, todo con el estilo consistente de shadcn.

Lo interesante es que cada bloque se instala igual que un componente normal:

npx shadcn add dashboard-01

Y con ese solo comando te copia toda la estructura al proyecto: el sidebar, el header, las cards de métricas, las gráficas interactivas y hasta un data table funcional con datos de ejemplo. Literalmente pasas de cero a tener un dashboard completo en segundos.

Es ideal para arrancar un MVP, una dashboard de cliente, o cuando simplemente no queremos perder tiempo armando otra vez el esqueleto desde cero.

Shadcn Create: el constructor visual

Ahora, si quieren ir un paso más allá, pueden entrar a ui.shadcn.com/create. Aquí es donde la cosa se pone interesante, porque ya no estamos eligiendo bloques preexistentes, sino construyendo nuestro propio layout visualmente.

Es un constructor tipo drag-and-drop donde armamos nuestro dashboard o nuestra página combinando bloques, y al final nos entrega el código listo para copiar o instalar vía CLI. Es algo parecido a lo que hace v0.dev, pero enfocado en aprovechar directamente los bloques y componentes oficiales de shadcn.

Si estás acostumbrado a diseñar primero y codear después, este flujo te va a ahorrar bastantes horas.

Temas y variaciones: el ecosistema de terceros

Aquí es donde muchos desarrolladores se sorprenden. Shadcn al ser open code (no una librería de npm, sino código que copias a tu proyecto), permite que cualquiera pueda crear su propio registry compatible con el CLI de shadcn. Esto ha abierto la puerta a que la comunidad cree temas completos y variaciones muy distintas al estilo original.

Les muestro algunos que me han parecido brutales:

TheGridcn: estética Tron para tu dashboard

thegridcn.com es un tema inspirado directamente en la película Tron: Ares. Más de 50 componentes con estética neón, glows, scanlines, efectos 3D con Three.js, seis paletas de colores basadas en dioses griegos (Ares, Athena, Poseidon, etc.) y hasta templates completos para dashboards y landing pages.

Si están haciendo algo cyberpunk, un dashboard para un SaaS "techy", o simplemente quieren romper con lo minimalista, este tema se ve increíble. Y lo mejor: es MIT, completamente gratis.

Glitchcn: aesthetics de hacker / terminal

glitchcn-ui.vercel.app va en otra dirección: componentes con estética retro-futurista tipo terminal de hackers. Es ideal para portfolios de desarrolladores, landing pages de herramientas técnicas, o cualquier proyecto donde queramos transmitir esa vibra de "hacker de los 80".

Se agrega como registry a tu components.json y listo, puedes mezclar sus componentes con los clásicos de shadcn sin problema.

ElevenLabs UI: componentes para apps de IA y audio

Este es probablemente el más impresionante de la lista. ElevenLabs, la empresa de generación de voz con IA, liberó su propia librería de componentes basada en shadcn: ui.elevenlabs.io.

Incluye cosas muy específicas para apps multimodales:

• Orbs 3D animados que reaccionan al audio (hechos con Three.js)
• Componentes de conversación con agentes de voz
• Waveforms en vivo para grabación
• Transcriptores con streaming
• Mensajes estilo chat para apps tipo ChatGPT

La instalación es idéntica a cualquier componente de shadcn:

npx shadcn@latest add https://ui.elevenlabs.io/r/orb.json

Si están construyendo algo con IA, agentes, asistentes de voz o cualquier experiencia de audio, este registry les va a ahorrar muchísimo tiempo.

UI TripleD: shadcn + Framer Motion

ui.tripled.work mezcla la base accesible de shadcn con animaciones de Framer Motion ya integradas. Cards que se mueven con hover elegante, gráficas animadas, bloques de ecommerce con transiciones suaves, todo "copy-ready".

Si siempre sentiste que shadcn por defecto es demasiado "estático" y quieres animaciones más vivas sin perder la coherencia, aquí encuentras buenas ideas.

Mapcn: mapas hechos para shadcn

Durante mucho tiempo si querías agregar un mapa a tu app tenías que lidiar con Mapbox (y sus costos), Google Maps o Leaflet, y pelearte para que el estilo no se viera feo al lado de tus componentes de shadcn.

mapcn.dev resuelve esto: componentes de mapa basados en MapLibre GL (totalmente open source, sin API keys, sin límites de uso), que se adaptan automáticamente al tema de tu proyecto.

npx shadcn@latest add https://mapcn.dev/maps/map.json

Y ya tienes un <Map /> que respeta tu dark mode, tus variables CSS, y soporta markers, controles, fly-to, rutas, todo lo que necesitas. Ideal para dashboards de logística, apps de delivery, real estate, o cualquier cosa que necesite mostrar ubicación.

Shadcn Design: el kit de Figma oficial-compatible

Para los que diseñan antes de programar (o trabajan con diseñadores), shadcndesign.com tiene un kit de Figma que literalmente refleja 1 a 1 los componentes de shadcn: mismos nombres, mismas variantes, mismos tokens de Tailwind.

Lo interesante es que incluye un plugin de Figma que convierte tus diseños en código de shadcn directamente. Seleccionas un frame, y te genera el componente React listo para pegar. Ideal para equipos donde el handoff entre diseño y desarrollo siempre es un dolor de cabeza.

Además ofrecen skill files para Claude, Cursor y Codex que le enseñan a la IA cómo interpretar Figma y generar shadcn limpio. Básicamente están cerrando el loop completo de diseño → IA → código.

Conclusión

Shadcn dejó de ser "una librería de componentes de React" hace ya bastante tiempo. Hoy es más bien una plataforma donde cualquiera puede publicar su propio registry, sus propios temas y sus propios componentes especializados, y todo se instala con el mismo CLI.

Esto significa que cuando arrancamos un proyecto nuevo, ya no dependemos solo de lo que Shadcn trae por defecto: podemos combinar el core con mapas de mapcn, agentes de IA de ElevenLabs, animaciones de TripleD, y temas visuales de TheGridcn o Glitchcn, todo conviviendo en el mismo proyecto sin conflictos.

Y lo mejor: seguimos siendo dueños del código. Nada de dependencias ocultas, nada de versiones bloqueadas, nada de esperar a que el mantenedor acepte tu PR. El código vive en tu repo y lo modificas como quieras.

Si todavía estaban usando shadcn solo para copiar botones, les toca explorar. El ecosistema es muchísimo más grande de lo que parece.