AstroAnimate Docs — Installation, Components & API

A clean, high-converting newsletter subscription card with semantic HTML and a built-in submission handler.

Preview/Playground

Created by

Prashanth

Astro

---
import NewsletterPopupCard from "@astroanimate/core/NewsletterPopupCard";
---

<NewsletterPopupCard
  title="Join the Club"
  description="Get the latest AstroAnimate components delivered straight to your inbox."
  submitLabel="Subscribe Now"
  actionUrl="/api/newsletter"
/>

Installation

bash

npm install @astroanimate/core

Usage

---
import NewsletterPopupCard from "@astroanimate/core/NewsletterPopupCard";
---

<NewsletterPopupCard />

Renders the NewsletterPopupCard component with AstroAnimate defaults.

Props

Prop	Type	Default	Description
`title`	`string`	`"Subscribe for updates"`	The headline text
`description`	`string`	`"Subscribe to this..."`	The descriptive body text
`submitLabel`	`string`	`"Subscribe"`	Text for the submit button
`actionUrl`	`string`	`"/api/subscribe"`	Endpoint URL for form submission
`class`	`string`	`""`	Additional CSS classes for the root container

Use When

Building exit-intent modal popups or sticky sidebars to capture leads
Integrating a standalone newsletter section at the bottom of blog articles
Needing a pre-styled, high-converting form with semantic validation

Avoid When

Building complex, multi-step registration forms (this card is explicitly optimized for a single email input)

Accessibility

Includes a visually hidden (sr-only) <label> tied to the email <input> for screen readers
Uses semantic HTML attributes (type="email", autocomplete="email", required)
Implements explicit focus-visible outlines for robust keyboard navigation
Fully respects prefers-reduced-motion: reduce by neutralizing button scaling and color transitions

Performance

Built-in Handling: Includes a lightweight, vanilla JS inline script that automatically intercepts the submit event (preventing page reloads) and prepares the FormData for an API call
CSS Robustness: Includes critical workarounds for WebKit's notoriously aggressive autofill styling, ensuring the input maintains its design integrity even when browsers auto-populate data

Credits

Credit to @Prashanth

NewsletterPopupCard NEW