Reviews Carousel

A carousel component that displays reviews with animated transitions. It shows one review at a time, with smooth sliding effects and navigation controls. Use it to highlight user feedback in a visually engaging way.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/reviews-carousel

npx layro-cli add @educlopez/reviews-carousel

npx layro-cli add @educlopez/reviews-carousel

bunx layro-cli add @educlopez/reviews-carousel

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import { cn } from "@/lib/utils";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import { useEffect, useMemo, useState } from "react";

const FRAME_OFFSET = -30;
const FRAMES_VISIBLE_LENGTH = 3;

function clamp(val: number, [min, max]: [number, number]): number {
  return Math.min(Math.max(val, min), max);
}