Expanding Flex Card

A stunning, fully responsive flex-based card system. On desktop and tablet, cards expand on hover/click to reveal content. On mobile, it automatically transforms into a smooth, draggable carousel with pagination indicators.

Live Interactive Preview
🚶
🚶
Forest
Majestic trees
❄️
❄️
Winter
Delicate fall
🌊
🌊
Ocean
Deep blue
☀️
☀️
Desert
Golden sands
Source
npx futureuikit add expanding-card
Details

Dynamic flex-grow animations for desktop/tablet layouts.Automatic transformation to a draggable carousel on mobile devices.Glassmorphism content overlays with blur effects.Customizable icons, background images, and text content.Built-in pagination indicators for the mobile carousel view.Smooth spring physics using Framer Motion.

How to Use?
  • Import ExpandingFlexCard and provide an array of card options.
  • The component automatically handles the responsive transition between flex and carousel layouts.
  • On mobile, users can drag the carousel to browse cards.
  • On larger screens, clicking a card expands it while others collapse.
  • Customize the 'className' to adjust the overall container spacing.