Muchos usan shadcn/ui pero pocos saben todo lo que puedes hacer con él hoy.
Y es que no es solo "copy-paste de componentes", sino que ahora tienes IA, constructor visual de temas, temas completos creados por la comunidad, integraciones con servicios como ElevenLabs, MapLibre y hasta kits de Figma oficiales. Te dejo mis recursos favoritos del ecosistema 👇
🔹 The Gridcn — tema Tron
thegridcn.com
Un tema inspirado en Tron: Ares con 6 variantes (Tron, Ares, Clu, Athena, Aphrodite, Poseidon), efectos 3D con Three.js, glows neón y 50 componentes. Perfecto para proyectos con identidad fuerte.
🔹 Glitchcn/ui — estética cyberpunk/hacker
glitchcn-ui.vercel.app/
Componentes con scanlines animados, bordes que emiten luz cyan/emerald y tipografía monospace. Ideal para portfolios dev, dashboards técnicos o cualquier cosa que quiera verse como un terminal hackeado.
🔹 ElevenLabs UI — componentes para apps con IA y audio
ui.elevenlabs.io/
Si estás construyendo chats tipo ChatGPT, voice agents o interfaces de audio: acá tienes waveforms en tiempo real, agent orbs con estados (idle/listening/talking), voice fill, reproductores. Open source y basado en shadcn.
🔹 UI TripleD — shadcn Framer Motion
ui.tripled.work/
100 bloques y páginas completas con animaciones listas. Incluye un Builder drag-and-drop para armar landings visualmente antes de copiar el código. Muy útil para prototipar MVPs.
🔹 mapcn — mapas estilo shadcn
mapcn.dev/
Componentes de mapa para React construidos sobre MapLibre y estilizados con Tailwind. Se sienten parte del mismo design system. Si alguna vez peleaste con Google Maps en un dashboard, esto te va a gustar.
🔹 shadcn/ui kit de Figma (shadcndesign)
shadcndesign.com/
Kit de Figma pixel-perfect plugin que convierte diseños de Figma a código shadcn/ui real. Incluso tiene Agent Skills para que Claude, Cursor o Codex generen componentes desde un frame de Figma. El propio shadcn lo endorsó.
🔹 tweakcn — editor visual de temas
tweakcn.com/
El problema clásico: "todas las apps con shadcn se ven igual". tweakcn lo soluciona.
Es un editor no-code donde customizas colores, tipografía, border radius, sombras y transiciones con preview en tiempo real, y exporta las variables CSS listas para Tailwind v3 o v4. Viene con presets hermosos para arrancar rápido y son Open source.
shadcn dejó de ser una librería y se convirtió en una plataforma de distribución de código. Entre registries de terceros, MCP servers, builder visual y kits de diseño, hoy puedes armar una app completa sin salir del ecosistema.
¿Cuál me falta? Dejen sus favoritos 👇