Major Update: 32 New Components, Edge-to-Edge UI & 225+ Free Astro Building Blocks

The Next Evolution of AstroComponents.dev

We are thrilled to announce one of the most substantial updates to AstroComponents.dev since our initial release!

With this update, we have expanded our library with 32 brand new production-ready Astro components distributed across every single category. In addition, we have redesigned our documentation layout to a fluid, edge-to-edge interface, docking the sidebar directly to the left screen border and maximizing canvas space for live component testing.

Whether you are crafting SaaS landing pages, high-density analytics dashboards, interactive documentation, or portfolio showcases, these new components are built with zero runtime dependencies, strict accessibility (WCAG AA), and our signature dark-mode glassmorphic aesthetic.

---

What’s New in This Release?

Here is the complete list of all 32 newly introduced components, grouped by category with direct links to their interactive documentation and source code:

🔘 Buttons

Interactive buttons designed for micro-interactions, conversions, and tactile user feedback:

• Ripple Button — Material-style click effect emitting smooth expanding ripple rings calculated at the exact cursor coordinate.
• Neon Border Button — Cyberpunk-inspired CTA with rotating conical neon laser gradient borders and subtle glow reflection.
• Slide Reveal Button — Dual-state action button that slides the primary label aside to reveal secondary confirmation icons or copy on hover.

📝 Forms & Inputs

High-conversion inputs and controls with built-in client validation styles:

• Password Strength Input — Real-time entropy evaluator with segmented color strength bar and eye visibility toggle.
• Tags Autocomplete Input — Multi-tag pill editor supporting keyboard tag creation, chip removal, and autocomplete candidate dropdowns.
• Glass Inline Toggle Group — macOS-style segmented toggle control with animated glass slider indicator and keyboard navigation.
• Phone Country Input — International telephone field featuring formatted dial code selectors and accessibility attributes.

🃏 Cards

Content containers optimized for SaaS pricing, open-source repositories, and KPIs:

• Pricing Compare Mini Card — High-impact pricing tier card featuring spotlight glows, feature checkmarks, and CTA buttons.
• GitHub Repo Card — Developer showcase card displaying GitHub repository language badges, star counts, fork counters, and repository stats.
• Stats Trend Card — KPI metric card displaying numeric values, positive/negative delta trend indicators, and mini sparkline bars.

🔔 Feedback & Notifications

Polished status indicators and user response elements:

• Progress Ring Counter — Circular SVG stroke gauge with animated dashoffset transitions and centered percentage readouts.
• Toast Notification Group — Stacked toast alert container supporting success, warning, error, and informational messages with action triggers.

🧭 Navigation

Dock shortcuts, workflow indicators, and dashboard sub-navs:

• Sub Navbar Pills — Secondary pill navigation bar with active glow background and badge counts for dashboard views.
• Quick Jump Dock — Floating macOS-inspired dock with interactive hover scale expansion, icons, and keyboard shortcuts.
• Step Breadcrumb Bar — Multi-step wizard indicator showing completed, active, and upcoming workflow stages.

📐 Layout & Structure

CSS Grid foundations and aesthetic transitions:

• Holy Grail Grid — Flexible 5-zone CSS Grid layout with sticky header, collapsible sidebars, dynamic content, and footer.
• Diagonal Section Divider — Slanted SVG section separator creating dynamic non-rectangular transitions between landing page sections.

🪟 Overlays & Dialogs

User consent drawers, comparative sliders, and micro-surveys:

• Cookie Preferences Drawer — GDPR/CCPA compliant bottom sheet with granular category toggles for essential, analytics, and marketing cookies.
• Image Compare Slider — Interactive before-and-after visual slider with draggable separator bar and touch/mouse event support.
• Floating Feedback Widget — Fixed corner trigger with emoji satisfaction ratings and feedback submission textarea.

📊 Data Display

Auditing logs, GitHub-style timelines, and performance rows:

• Metric Comparison Row — Horizontal benchmark comparison comparing actual vs target goals with progress bars.
• Activity Heatmap Grid — GitHub-style activity contribution grid visualizing frequencies across weeks and months.
• Status Timeline Feed — Operational incident log and audit trail feed with status pills, avatars, and timestamps.

✍️ Typography & Text Effects

Dynamic headlines, tickers, and cyber typography:

• Animated Counter Text — Number odometer that smoothly animates upward from zero when scrolled into view.
• Gradient Text Marquee — Continuous smooth looping horizontal marquee ribbon featuring metallic gradient typography.
• Curved Path Heading — Circular SVG text-on-path headline for badges, seals, and artistic landing hero sections.
• Hacker Decode Text — Scrambled Matrix glyph decode animation that resolves into target text on scroll or hover.

📈 Charts & Data Visualization

Zero-dependency SVG charts for analytics:

• Radar Metric Chart — Multi-axis spider polygon chart visualizing audit scores (Speed, SEO, Accessibility, Security).
• Linear Progress Gauge — Multi-segment quota meter with colored threshold indicators and capacity readouts.

🚀 Full Landing Page Sections

Full-width, high-conversion section templates ready to drop into any page:

• Testimonial Grid Section — Bento-style social proof section with verified badges, avatar quotes, and rating stars.
• Logo Cloud Section — Clean partner and client logo strip with hover illumination and infinite marquee scrolling.
• Hero Showcase Split — Split-column landing hero featuring glowing headline copy, primary/secondary CTAs, and live preview cards.

---

Complete UI Overhaul: Edge-to-Edge Layout

Alongside new components, we have revamped the entire documentation interface:

1. Edge-Pinned Sidebar: The navigation sidebar is now pinned directly to the left screen edge (x = 0), eliminating artificial black voids on wide monitors (1440p, 4K, Ultrawide).
2. Fluid Content Canvas: Doc pages now scale adaptively up to 1440px and Sections up to 1600px, providing realistic preview viewports for complex layouts, grids, and dashboards.
3. Smart Right TOC: The “On this page” scrollspy sidebar rests comfortably on the right margin, automatically yielding full width to the main canvas on screens below 1200px.

---

Quick Example: Using the New Components

Integrating any of these components into your Astro project takes seconds:

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

<!-- Analytics metric card -->
<StatsTrendCard 
  label="Monthly Active Users" 
  value="48,290" 
  change="+18.4%" 
  trend="up" 
/>

<!-- Secure form input -->
<PasswordStrengthInput 
  id="signup-password" 
  label="Choose a Password" 
  required 
/>

<!-- Floating navigation dock -->
<QuickJumpDock />

---

What’s Next?

We are actively working on:

• Interactive ROI and pricing calculator sections.
• Expanded Three.js shader backgrounds.
• More color theme presets and Figma tokens.

Star our GitHub Repository to follow along, report issues, or contribute new components!

Built with Astro 5 • Zero Runtime Dependencies • Pure CSS