Componentes UI

Los componentes son las piezas con las que se arma cualquier interfaz: botones, tarjetas, formularios, modales, secciones de una landing, footers… Aquí tienes más de 30 componentes listos para copiar, pensados para los proyectos que más vas a hacer para clientes: landings, tiendas, portafolios y paneles.

Cada uno es un archivo HTML autocontenido, responsive y accesible, con colores definidos en variables CSS y JavaScript vanilla mínimo y comentado. Combínalos para montar una página completa en una tarde.

Qué vas a encontrar

• Botones, interruptores, modo oscuro y botón "volver arriba".
• Tarjetas de producto, perfil y precio.
• Formularios de login/registro, contacto con validación y labels flotantes.
• Modales, toasts, alertas, banner de cookies y tooltips.
• Secciones de landing: heros, tabla de precios, testimonios, características y estadísticas.
• Footers en tres estilos.
• Acordeón/FAQ, carrusel, galería con lightbox, timeline, barras de progreso, skeleton loading y chips/badges.

Requisitos previos

Para usarlos solo necesitas copiar y pegar. Para modificarlos con soltura conviene conocer HTML, CSS (Flexbox y Grid) y lo básico de JavaScript (seleccionar elementos y escuchar eventos).

Temario

1. Botones y controles — colección de botones, botones con icono y carga, toggle switch, dark mode toggle y volver arriba.
2. Tarjetas — tarjeta de producto, de perfil y de precio.
3. Formularios — login/registro, contacto con validación e inputs con label flotante.
4. Modales y alertas — modal, toasts, alertas, banner de cookies y tooltips.
5. Secciones de landing — tres heros, tabla de precios, testimonios, características y contador de estadísticas.
6. Footers — footer simple, de columnas y con newsletter.
7. Otros componentes — acordeón/FAQ, carrusel, galería con lightbox, timeline, barras de progreso, skeleton, chips y badges.

Arma una landing completa

Prueba a combinar un menú de la galería de menús, un hero, la sección de características, testimonios, la tabla de precios y un footer. Unifica las variables de color en un solo :root y tendrás una landing profesional lista para personalizar.