Componentes UI

¿Para qué diseñar desde cero un botón, un modal o una tabla si existen miles listos, accesibles y probados? Estas librerías y colecciones te permiten construir interfaces profesionales en una fracción del tiempo, algo clave cuando trabajas con presupuestos y fechas de clientes.

Antes de usar un componente en un proyecto comercial, revisa su licencia (la mayoría son MIT, pero algunas tienen versiones de pago) y que funcione con tu stack (HTML puro, Tailwind, React, Vue…).

Colecciones para copiar y pegar

UiverseMiles de botones, tarjetas, loaders e inputs en CSS y Tailwind.CodePenComunidad con millones de demos de HTML, CSS y JS.Free FrontendColecciones de ejemplos CSS y JS organizados por tipo.HyperUIComponentes gratuitos de Tailwind para copiar.Meraki UIComponentes Tailwind con soporte RTL y modo oscuro.CSS Scan ButtonsMás de 90 estilos de botones con un clic para copiar.

Librerías para Tailwind CSS

Tailwind PlusComponentes y plantillas oficiales de Tailwind (de pago, con ejemplos gratis).FlowbiteMás de 400 componentes de Tailwind con JavaScript incluido.daisyUIPlugin de Tailwind con clases como btn y card, y temas.Preline UIComponentes y bloques de Tailwind de código abierto.Headless UIComponentes accesibles sin estilos para React y Vue.Material TailwindComponentes con estilo Material Design sobre Tailwind.

React

shadcn/uiComponentes que copias a tu proyecto, con Radix y Tailwind.Radix UIPrimitivas accesibles sin estilos para construir tu sistema.MUIComponentes de React basados en Material Design.Chakra UIComponentes accesibles y fáciles de personalizar.MantineMás de 100 componentes y hooks para React.Ant DesignSistema de diseño empresarial para paneles y dashboards.HeroUIComponentes modernos con Tailwind (antes NextUI).Aceternity UIComponentes animados y llamativos con Tailwind y Motion.Magic UIComponentes animados para landing pages.React BootstrapComponentes de Bootstrap reescritos para React.

Vue

VuetifyLibrería completa de componentes Material para Vue.PrimeVueMás de 80 componentes para Vue, con tablas avanzadas.Element PlusComponentes para Vue 3, muy usados en paneles.QuasarFramework de Vue para web, móvil y escritorio.shadcn-vuePort de shadcn/ui para Vue.Nuxt UIComponentes oficiales del equipo de Nuxt con Tailwind.

Frameworks CSS clásicos y ligeros

BootstrapEl framework CSS más usado: grid, componentes y utilidades.BulmaFramework CSS moderno basado en Flexbox, sin JavaScript.Pico CSSEstilos elegantes para HTML semántico, casi sin clases.FoundationFramework responsive para sitios y correos.Open PropsVariables CSS listas: colores, sombras, tamaños y animaciones.ShoelaceWeb components que funcionan con cualquier framework.

Componentes específicos

SwiperEl carrusel/slider táctil más popular.SweetAlert2Alertas y modales bonitos en una línea.Chart.jsGráficas sencillas y responsivas con canvas.DataTablesTablas con búsqueda, orden y paginación.TanStack TableTablas potentes sin estilos para React, Vue y más.FullCalendarCalendarios y agendas interactivas.flatpickrSelector de fechas ligero y personalizable.LeafletMapas interactivos de código abierto.FancyboxGalerías y lightbox para imágenes y videos.SortableJSListas que se reordenan arrastrando.

No mezcles demasiadas librerías

Elige una librería principal de componentes por proyecto y complétala con piezas sueltas solo cuando haga falta. Mezclar Bootstrap, Tailwind y MUI en el mismo sitio produce estilos inconsistentes y páginas pesadas.