JJabKit
Theme preference

CarouselCards

1.0.0

Horizontally scrollable marketing rail of listing cards with image, rating, price, and a favorite control.

npx jabkit add carousel-cards

Component Data

ID
carousel-cards
Category
marketing
Version
1.0.0
Added
2026-09-07
Type
block
Keyboard nav
Yes
Reduced motion
Yes
carouselcardslistingsmarketinggalleryfavoritesecommerce

Dependencies

  • lucide-react
  • clsx
  • tailwind-merge

Examples

Default

<div className="bg-background text-foreground">
      <CarouselCards {...carouselCardsMocks.default} />
    </div>

Variants

<div className="bg-background text-foreground">
      <CarouselCards {...carouselCardsMocks.alternate} />
    </div>

NightlyRates

<div className="bg-background text-foreground">
      <CarouselCards {...carouselCardsMocks.nightly} />
    </div>