Gran actualización: 32 componentes nuevos, UI de borde a borde y más de 225 bloques Astro gratuitos

La siguiente evolución de AstroComponents.dev

¡Nos alegra anunciar una de las actualizaciones más importantes de AstroComponents.dev desde su lanzamiento!

Con esta versión ampliamos la librería con 32 componentes Astro nuevos y listos para producción, repartidos por todas las categorías. Además, hemos rediseñado la documentación con una interfaz fluida de borde a borde: la barra lateral queda pegada al borde izquierdo de la pantalla y el lienzo gana espacio para probar los componentes en vivo.

Tanto si creas landing pages SaaS, dashboards de analítica, documentación interactiva o portfolios, estos componentes funcionan sin dependencias en tiempo de ejecución, cumplen una accesibilidad estricta (WCAG AA) y mantienen nuestra estética característica de modo oscuro y glassmorphism.

---

¿Qué hay de nuevo en esta versión?

Esta es la lista completa de los 32 componentes nuevos, agrupados por categoría y con enlace a su documentación interactiva y su código:

🔘 Botones

Botones interactivos pensados para microinteracciones, conversión y respuesta táctil:

• Ripple Button: efecto de clic estilo Material con ondas que se expanden desde el punto exacto del cursor.
• Neon Border Button: CTA de inspiración cyberpunk con bordes de neón en degradado cónico giratorio y un brillo sutil.
• Slide Reveal Button: botón de doble estado que desliza la etiqueta al pasar el ratón para revelar iconos o textos de confirmación.

📝 Formularios y campos

Campos y controles orientados a la conversión, con estilos de validación incluidos:

• Password Strength Input: evaluador de seguridad en tiempo real con barra segmentada de colores y botón para mostrar la contraseña.
• Tags Autocomplete Input: editor de etiquetas con creación por teclado, eliminación de chips y desplegable de autocompletado.
• Glass Inline Toggle Group: control segmentado estilo macOS con indicador de cristal animado y navegación por teclado.
• Phone Country Input: campo de teléfono internacional con selector de prefijo y atributos de accesibilidad.

🃏 Tarjetas

Contenedores optimizados para precios SaaS, repositorios open source y KPIs:

• Pricing Compare Mini Card: tarjeta de plan de precios con brillo destacado, lista de características y botones de acción.
• GitHub Repo Card: tarjeta para mostrar repositorios de GitHub con lenguaje, estrellas, forks y estadísticas.
• Stats Trend Card: tarjeta de KPI con valor numérico, indicador de tendencia positiva o negativa y mini barras.

🔔 Feedback y notificaciones

Indicadores de estado y elementos de respuesta pulidos:

• Progress Ring Counter: indicador circular SVG con transición animada del trazo y porcentaje centrado.
• Toast Notification Group: contenedor apilado de avisos de éxito, advertencia, error e información con acciones.

🧭 Navegación

Atajos tipo dock, indicadores de flujo y sub-navegación de dashboards:

• Sub Navbar Pills: navegación secundaria en píldoras con brillo activo y contadores para vistas de dashboard.
• Quick Jump Dock: dock flotante inspirado en macOS que se amplía al pasar el ratón, con iconos y atajos de teclado.
• Step Breadcrumb Bar: indicador de asistente por pasos con etapas completadas, activas y pendientes.

📐 Layout y estructura

Bases de CSS Grid y transiciones estéticas:

• Holy Grail Grid: layout CSS Grid de 5 zonas con cabecera fija, barras laterales plegables, contenido y pie.
• Diagonal Section Divider: separador SVG inclinado para transiciones no rectangulares entre secciones.

🪟 Overlays y diálogos

Paneles de consentimiento, comparadores y microencuestas:

• Cookie Preferences Drawer: panel inferior compatible con RGPD/CCPA con interruptores por categoría (esenciales, analítica y marketing).
• Image Compare Slider: comparador interactivo de antes y después con separador arrastrable y soporte táctil y de ratón.
• Floating Feedback Widget: botón fijo en la esquina con valoración por emojis y campo para enviar comentarios.

📊 Visualización de datos

Registros de auditoría, líneas de tiempo estilo GitHub y filas de rendimiento:

• Metric Comparison Row: comparación horizontal de valores reales frente a objetivos con barras de progreso.
• Activity Heatmap Grid: cuadrícula de actividad estilo GitHub que muestra la frecuencia por semanas y meses.
• Status Timeline Feed: registro de incidencias y auditoría con píldoras de estado, avatares y marcas de tiempo.

✍️ Tipografía y efectos de texto

Titulares dinámicos, tickers y tipografía cyber:

• Animated Counter Text: contador que sube suavemente desde cero al entrar en pantalla.
• Gradient Text Marquee: cinta horizontal en bucle continuo con tipografía en degradado metálico.
• Curved Path Heading: titular SVG circular sobre una ruta, para insignias, sellos y heroes artísticos.
• Hacker Decode Text: animación de glifos estilo Matrix que se descifra en el texto final al hacer scroll o pasar el ratón.

📈 Gráficos y visualización

Gráficos SVG sin dependencias para analítica:

• Radar Metric Chart: gráfico radial multieje que muestra puntuaciones de auditoría (velocidad, SEO, accesibilidad, seguridad).
• Linear Progress Gauge: medidor de cuota multisegmento con umbrales de color y lectura de capacidad.

🚀 Secciones completas de landing

Plantillas de sección a todo el ancho, pensadas para convertir y listas para cualquier página:

• Testimonial Grid Section: sección de prueba social estilo bento con insignias verificadas, citas con avatar y estrellas.
• Logo Cloud Section: franja de logos de partners y clientes con iluminación al pasar el ratón y desplazamiento infinito.
• Hero Showcase Split: hero a dos columnas con titular luminoso, CTAs principal y secundario y tarjetas de vista previa en vivo.

---

Rediseño completo de la UI: layout de borde a borde

Además de los componentes nuevos, hemos renovado toda la interfaz de la documentación:

1. Barra lateral pegada al borde: la navegación queda fijada al borde izquierdo de la pantalla (x = 0) y desaparecen los huecos negros artificiales en monitores anchos (1440p, 4K, ultrapanorámicos).
2. Lienzo de contenido fluido: las páginas de documentación escalan hasta 1440px y las secciones hasta 1600px, con vistas previas realistas para layouts, cuadrículas y dashboards complejos.
3. Índice lateral inteligente: el índice “En esta página” queda en el margen derecho y cede todo el ancho al lienzo principal en pantallas de menos de 1200px.

---

Ejemplo rápido: usar los componentes nuevos

Integrar cualquiera de estos componentes en tu proyecto Astro lleva segundos:

---
import { PasswordStrengthInput } from 'astro-component-kit/forms';
import { StatsTrendCard } from 'astro-component-kit/cards';
import { QuickJumpDock } from 'astro-component-kit/navigation';
---

<!-- Tarjeta de métrica de analítica -->
<StatsTrendCard 
  label="Usuarios activos mensuales" 
  value="48.290" 
  change="+18,4%" 
  trend="up" 
/>

<!-- Campo de formulario seguro -->
<PasswordStrengthInput 
  id="signup-password" 
  label="Elige una contraseña" 
  required 
/>

<!-- Dock de navegación flotante -->
<QuickJumpDock />

---

¿Qué viene después?

Estamos trabajando en:

• Secciones interactivas de calculadora de ROI y precios.
• Más fondos con shaders de Three.js.
• Más presets de temas de color y tokens para Figma.

Dale una estrella a nuestro repositorio de GitHub para seguir el proyecto, reportar errores o aportar componentes nuevos.

Hecho con Astro 5 • Cero dependencias en tiempo de ejecución • CSS puro