Animated Review Card

Testimonials 9

About

Here is Animated Review Card components

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Review Card to your project and fits it to your theme.

Code

How Animated Review Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"
 
import { AnimatedReviewCards } from "@/components/ui/animated-review-card"
 
export const initialReviews = [
  {
    id: 1,
    name: "James Bryan",
    avatar:
      "https://cdn.21st.dev/assets/mirror/9b/9b0c322075c8ec42b85b3cdbe72b3969ebaff4e9977aeefc2ececf74308d5e9e.jpg",
    text: "Dorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.",
    rating: 5,
  },
  {
    id: 2,
    name: "Keith Johnson",
    avatar:
      "https://cdn.21st.dev/assets/mirror/5d/5d9ab9c432fb9269cc4dc2a1fe6916e38859edad8188a001ac6a6b07e2f31c80.jpg",
    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    rating: 3,
  },
  {
    id: 3,
    name: "Mark Sloan",
    avatar:
      "https://cdn.21st.dev/assets/mirror/55/55d752fe1a358b984c2a41a5a734bac7f4880da0aa51884607de9e1e742ee2b3.jpg",
    text: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    rating: 4,
  },
]
 
export default function AnimatedReviewCardsClickDemo() {
  return (
    <div className="not-prose my-auto flex w-full items-center justify-center space-y-8">
      <AnimatedReviewCards
        reviews={initialReviews}
        interactionType="click"
        theme="default"
        classNames={{
          container: "items-center justify-center",
        }}
      />
    </div>
  )
}