Animated Review Card

A customizable, interactive review card with drag/click interactions, auto-rotation, and multiple themes.

Installation

npx shadcn@latest add "https://reusables.vercel.app/r/animated-review-cards"

Usage

import { AnimatedReviewCards } from "@/components/ui/animated-review-cards"
 
const reviews = [
  {
    id: 1,
    name: "John Doe",
    avatar: "https://example.com/avatar.jpg",
    text: "Great product! Highly recommended.",
    rating: 5,
  },
]
 
export default function ReviewSection() {
  return <AnimatedReviewCards reviews={reviews} />
}

James Bryan

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.

Keith Johnson

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.

Mark Sloan

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.

Click Interaction

Use click instead of drag to navigate through reviews.

Open in

James Bryan

Keith Johnson

Mark Sloan

Auto Rotation

Enable automatic rotation through reviews with customizable interval.

Open in

Interval:

James Bryan

Keith Johnson

Mark Sloan

Themes

Choose from multiple pre-built themes.

Open in

James Bryan

Keith Johnson

Mark Sloan

V0 Known Issue

Incase you want to open in V0, it doesn’t support cssVars or Tailwind properties. Please see shadcn/ui for more details.

To enable border-beam to function as expected, you need to instruct V0 to add the following animation config to tailwind.config.js file:

module.exports = {
  theme: {
    extend: {
      keyframes: {
        "border-beam": {
          "100%": {
            "offset-distance": "100%",
          },
        },
      },
      animation: {
        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
      },
    },
  },
}

API Reference