AstroAnimate Docs — Installation, Components & API

A clean, responsive, CSS-only product review card featuring a subtle ambient glow and hover scale effect.

Preview/Playground

Created by

Prashanth

Wireless Headphones

Incredible sound quality and battery life. Best purchase of the year.

4.9 (128 reviews)

Astro

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

<ProductReviewCard
  title="Wireless Headphones"
  description="Incredible sound quality and battery life. Best purchase of the year."
  rating={4.9}
  reviews={128}
/>

Installation

bash

npm install @astroanimate/core

Usage

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

<ProductReviewCard />

Renders the ProductReviewCard component with AstroAnimate defaults.

Props

Prop	Type	Default	Description
`title`	`string`	`Required`	The product name or review headline
`description`	`string`	`Required`	The review body or product summary
`rating`	`number`	`4.8`	Numerical rating score (typically out of 5)
`reviews`	`number`	`24`	Total number of reviews
`class`	`string`	`""`	Additional CSS classes for the root `<article>`

Use When

Building e-commerce product grids and category pages
Highlighting featured user reviews or top-rated items on a landing page
Needing a clean, visually appealing summary card without JavaScript overhead

Avoid When

Displaying long, multi-paragraph review essays (the card width is constrained for grid usage)
Building complex interactive cards that require internal scrolling or multiple distinct call-to-action buttons

Accessibility

Uses focus-within to trigger hover styles and outline rendering when a user tabs into the card via keyboard
Hides decorative elements (the background glow and the star icon) from screen readers using aria-hidden="true"
Respects prefers-reduced-motion: reduce by instantly rendering the final hover state and disabling scaling and glow opacity transitions

Performance

Zero Hydration: Operates completely independently of JavaScript frameworks
Hardware Accelerated: Uses transform: scale() and opacity for the hover interactions, preventing expensive layout repaints

Credits

Credit to @Prashanth

ProductReviewCard NEW