Sliding Cards

An interactive stack of sliding cards with 3D depth and swipe gesture functionality. Each card can display an icon and customized background. Ideal for showcasing features, testimonials, or data cards in a visually appealing and animated format. Built with React, Tailwind CSS, and custom swipe logic.

...

How to Import

Add this import to your component file

app/page.tsx

1import SlidingCards from '@/components/lightswind/sliding-cards';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

cards	CardContent[]	-	An array of card objects containing `id`, optional `icon`, and optional `bgClass` to render each card in the stack.	Required
className	string	-	Additional Tailwind CSS classes to customize the outer container's layout or styling.	Optional
cardSize	string	"w-24 h-24"	Tailwind classes to define the size of the icons/cards. Defaults to `w-24 h-24`.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { FaStar, FaBolt, FaHeart } from 'react-icons/fa';
2import SlidingCards from '@/components/lightswind/sliding-cards';
3
4const cardItems = [
5  { id: 1, icon: <FaStar />, bgClass: 'bg-gradient-to-br from-yellow-400 to-red-400' },
6  { id: 2, icon: <FaBolt />, bgClass: 'bg-gradient-to-br from-purple-400 to-pink-400' },
7  { id: 3, icon: <FaHeart />, bgClass: 'bg-gradient-to-br from-teal-400 to-cyan-300' },
8];
9
10<SlidingCards cards={cardItems} cardSize="w-20 h-20" className="mx-auto" />;

Previousslide-to-confirm

Nextsliding-logo-marquee

A product byＭＵＨＩＬＡＮ and Team❤️.

Sliding Cards

An interactive stack of sliding cards with 3D depth and swipe gesture functionality. Each card can display an icon and customized background. Ideal for showcasing features, testimonials, or data cards in a visually appealing and animated format. Built with React, Tailwind CSS, and custom swipe logic.

...

How to Import

Add this import to your component file

app/page.tsx

1import SlidingCards from '@/components/lightswind/sliding-cards';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

cards	CardContent[]	-	An array of card objects containing `id`, optional `icon`, and optional `bgClass` to render each card in the stack.	Required
className	string	-	Additional Tailwind CSS classes to customize the outer container's layout or styling.	Optional
cardSize	string	"w-24 h-24"	Tailwind classes to define the size of the icons/cards. Defaults to `w-24 h-24`.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { FaStar, FaBolt, FaHeart } from 'react-icons/fa';
2import SlidingCards from '@/components/lightswind/sliding-cards';
3
4const cardItems = [
5  { id: 1, icon: <FaStar />, bgClass: 'bg-gradient-to-br from-yellow-400 to-red-400' },
6  { id: 2, icon: <FaBolt />, bgClass: 'bg-gradient-to-br from-purple-400 to-pink-400' },
7  { id: 3, icon: <FaHeart />, bgClass: 'bg-gradient-to-br from-teal-400 to-cyan-300' },
8];
9
10<SlidingCards cards={cardItems} cardSize="w-20 h-20" className="mx-auto" />;

Previousslide-to-confirm

Nextsliding-logo-marquee

A product byＭＵＨＩＬＡＮ and Team❤️.

Sliding Cards

How to Import

Props

Basic Usage

On This Page

Contribute

Sliding Cards

How to Import

Props

Basic Usage

On This Page

Contribute

React Sliding Cards Component - Lightswind UI

Key Details of React Sliding Cards

Sliding Cards

How to Import

Props

Basic Usage

On This Page

Contribute

Sliding Cards

How to Import

Props

Basic Usage

On This Page

Contribute