Components
Loading preview...
Interactive 3D Testimonial Stack Component for React - A premium, drag-enabled testimonial carousel featuring stacked card animations, glass morphism effects, and smooth transitions. This React TypeScript component displays customer reviews in an engaging 3D stack layout with touch/mouse drag navigation, automatic pagination dots, and responsive design. Perfect for showcasing client feedback, user reviews, product testimonials, and social proof on modern web applications. Key Features: Interactive Drag Navigation - Users can swipe/drag cards for intuitive navigation 3D Stacked Animation - Cards stack behind the active testimonial with scaling and opacity effects Glass Morphism Design - Modern frosted glass aesthetic with backdrop blur effects Responsive Layout - Mobile-first design that adapts to all screen sizes TypeScript Support - Fully typed interfaces for better developer experience Customizable Styling - Avatar gradients, tags, stats, and color schemes Accessible Controls - ARIA labels and keyboard navigation support Performance Optimized - Efficient rendering with useCallback and ref management
@easemize
npx shadcn@latest add https://21st.dev/r/easemize/glass-testimonial-swiperimport React from 'react';
import { Users, Calendar, ThumbsUp, ShieldCheck, Clock, Share, Rocket, Zap, Gem } from 'lucide-react';
import { TestimonialStack, Testimonial } from "@/components/ui/glass-testimonial-swiper";
const testimonialsData: Testimonial[] = [
{
id: 1,
initials: 'SM',
name: 'Sarah Mitchell',
role: 'VP of Engineering at TechFlow',
quote: "This platform has completely transformed how our team collaborates. The AI-powered analytics provide insights we never had before, and the performance improvements are remarkable. Best investment we've made this year.",
tags: [{ text: 'FEATURED', type: 'featured' }, { text: 'Enterprise', type: 'default' }],
stats: [{ icon: Users, text: '200+ team' }, { icon: Calendar, text: '2 years customer' }],
avatarGradient: 'linear-gradient(135deg, #5e6ad2, #8b5cf6)',
},
{
id: 2,
initials: 'MC',
name: 'Marcus Chen',
role: 'Product Manager at DataSync',
quote: "The real-time collaboration features are game-changing. Our remote team feels more connected than ever, and the platform's reliability is outstanding. The mobile experience is seamless across all devices.",
tags: [{ text: 'Startup', type: 'default' }, { text: 'Mobile', type: 'default' }],
stats: [{ icon: ThumbsUp, text: 'Helpful' }, { icon: ShieldCheck, text: 'Verified' }],
avatarGradient: 'linear-gradient(135deg, #10b981, #059669)',
},
{
id: 3,
initials: 'AR',
name: 'Alex Rodriguez',
role: 'CTO at StartupFlow',
quote: "Incredible performance boost and the mobile apps are flawless. Support team is responsive and the feature roadmap aligns perfectly with our needs. The customization options are endless.",
tags: [{ text: 'Enterprise', type: 'default' }, { text: 'API User', type: 'default' }],
stats: [{ icon: Clock, text: '6 months ago' }, { icon: Share, text: 'Shared 8 times' }],
avatarGradient: 'linear-gradient(135deg, #f59e0b, #d97706)',
},
{
id: 4,
initials: 'EJ',
name: 'Emily Johnson',
role: 'Founder of Innovate Inc.',
quote: "As a new company, speed is everything. This tool allowed us to scale our operations twice as fast without doubling our headcount. A must-have for any ambitious startup.",
tags: [{ text: 'New', type: 'default' }, { text: 'Growth', type: 'featured' }],
stats: [{ icon: Rocket, text: 'Scaled 2x' }, { icon: Zap, text: 'Fast Setup' }],
avatarGradient: 'linear-gradient(135deg, #ec4899, #d946ef)',
},
{
id: 5,
initials: 'DW',
name: 'David Wong',
role: 'Lead Designer at Creative Co.',
quote: "The user interface is not just beautiful, it's intuitive. Our design team was able to adopt it instantly, streamlining our entire workflow and improving creative output.",
tags: [{ text: 'Design', type: 'default' }],
stats: [{ icon: Gem, text: 'Top UI/UX' }],
avatarGradient: 'linear-gradient(135deg, #3b82f6, #6366f1)',
}
];
const TestimonialStackDemo = () => {
return (
<div className="relative w-full min-h-screen flex items-center justify-center p-4 overflow-hidden">
{/* Background image layer */}
<div
className="absolute inset-0 bg-cover bg-bottom bg-no-repeat opacity-50 scale-[1.6]"
style={{ backgroundImage: 'url("https://res.cloudinary.com/drhx7imeb/image/upload/v1756215257/gradient-optimized_nfrakk.svg")' }}
/>
{/* Content layer */}
<div className="relative z-10 w-full h-full flex items-center justify-center">
<TestimonialStack testimonials={testimonialsData} />
</div>
</div>
);
};
export default TestimonialStackDemo;