Carousel
Image, card, hero, product, testimonial, logo, and content carousels.
Base Carousel
Slide 1 content
2. Card Carousel — Product lists, blog posts, feature highlights
Multiple items per view, scroll snap, navigation arrows.
Blog post 1
Short excerpt for the first card.
Feature A
Highlight feature with a brief description.
Blog post 3
Another card for the carousel.
Feature B
Multiple items per view with scroll snap.
Feature C
Fifth card for scroll snap.
3. Full-Width Hero Carousel — Landing hero, campaign banners
Background image/video, CTA button, overlay text.
Landing page hero
Campaign message with a clear call to action below.
4. Product Carousel — Featured products, related items, best sellers
Price + rating, Add to cart, Quick view.
Featured product one
Best seller item
Related product
Another product
Another product
5. Testimonial Carousel — Customer reviews, case studies
Avatar, quote text, name & role.
“This product exceeded our expectations. The team delivered on time and the quality is outstanding.”
Jane Doe
CTO, Acme Inc.
6. Logo / Brand Carousel — “Trusted by” section
Continuous auto scroll, minimal controls.
7. Content Carousel — Tutorials, feature walkthrough
Text + image, progress indicator.
Step 1: Setup
How to use
Carousel, CardCarousel, FullWidthHeroCarousel, ProductCarousel, TestimonialCarousel, LogoCarousel, ContentCarousel. Copy the examples below.
1. Import
import {
Carousel,
CardCarousel,
FullWidthHeroCarousel,
ProductCarousel,
TestimonialCarousel,
LogoCarousel,
ContentCarousel,
Card,
} from "@/app/components/ui";2. Carousel (base)
<Carousel
children={[
<p key="1">Slide 1 content</p>,
<p key="2">Slide 2 content</p>,
<p key="3">Slide 3 content</p>,
]}
autoPlay
autoPlayIntervalMs={4000}
/>3. CardCarousel
const cardItems = [
<Card key="1"><h3>Blog post 1</h3><p className="text-sm mt-1">Excerpt.</p></Card>,
<Card key="2"><h3>Feature A</h3><p className="text-sm mt-1">Description.</p></Card>,
];
<CardCarousel itemsPerView={3}>{cardItems}</CardCarousel>4. FullWidthHeroCarousel
const heroSlides = [
{
background: <div className="w-full h-full bg-gradient-to-r from-indigo-600 to-purple-700" />,
title: "Landing page hero",
subtitle: "Campaign message with CTA below.",
cta: { label: "Get started" },
},
{
background: <div className="w-full h-full bg-gradient-to-r from-rose-500 to-pink-600" />,
title: "Campaign banner",
subtitle: "Second slide.",
cta: { label: "Learn more" },
},
];
<FullWidthHeroCarousel slides={heroSlides} autoPlay />5. ProductCarousel
const productItems = [
{
image: <div className="w-full h-full bg-gray-200 flex items-center justify-center">Product 1</div>,
title: "Featured product",
price: "$24.99",
compareAtPrice: "$29.99",
rating: 4.5,
reviewCount: 12,
onAddToCart: () => {},
onQuickView: () => {},
badge: <span className="rounded bg-red-500 px-2 py-0.5 text-xs text-white">Sale</span>,
},
];
<ProductCarousel items={productItems} itemsPerView={4} />6. TestimonialCarousel
const testimonialSlides = [
{ quote: "Exceeded our expectations.", name: "Jane Doe", role: "CTO, Acme Inc.", initials: "JD" },
{ quote: "Simple, fast, reliable.", name: "Alex Smith", role: "Product Lead", initials: "AS" },
];
<TestimonialCarousel slides={testimonialSlides} autoPlay />7. LogoCarousel
const logoItems = [
<div key="1" className="text-lg font-bold text-gray-400">ACME</div>,
<div key="2" className="text-lg font-bold text-gray-400">BRAND</div>,
];
<LogoCarousel speed={30}>{logoItems}</LogoCarousel>8. ContentCarousel
const contentSlides = [
{
title: "Step 1: Setup",
media: <div className="w-full h-full bg-gray-200 flex items-center justify-center">Image</div>,
content: "Install the package and configure your environment.",
},
{
title: "Step 2: Deploy",
content: "Deploy to your preferred platform.",
},
];
<ContentCarousel slides={contentSlides} />