Stack List

A responsive animated stack view component that displays a vertical list of items with expandable functionality, built with Tailwind CSS and Framer Motion.

...

How to Import

Add this import to your component file

app/page.tsx

1import StackList from '@/components/lightswind/stack-list';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

items	{ icon: React.ReactNode; title: string; subtitle: string; date: string; }[]	-	Array of stack items to display. Each item should contain an icon, title, subtitle, and date.	Required
initialVisible	number	-	Number of items visible before expanding. Defaults to `1`.	Optional
className	string	-	Tailwind utility class string for custom width and layout control of the container.	Optional

Basic Usage

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

app/page.tsx

1import StackList from '@/components/lightswind/stack-list';
2import { Flame, FileText, MapPin } from 'lucide-react';
3
4const activities = [
5  {
6    icon: <FileText className="w-5 h-5" />,
7    title: "Camping",
8    subtitle: "Yosemite Park",
9    date: "5 August",
10  },
11  {
12    icon: <MapPin className="w-5 h-5" />,
13    title: "Boating",
14    subtitle: "Lake Tahoe",
15    date: "2 August",
16  },
17  {
18    icon: <Flame className="w-5 h-5" />,
19    title: "Barbecue",
20    subtitle: "Greenfield Shores",
21    date: "28 July",
22  },
23];
24
25<StackList
26  items={activities}
27  initialVisible={1}
28  className="w-full sm:max-w-md md:max-w-lg"
29/>;

Previousspectrum-loader

Nextteam-carousel

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

Stack List

A responsive animated stack view component that displays a vertical list of items with expandable functionality, built with Tailwind CSS and Framer Motion.

...

How to Import

Add this import to your component file

app/page.tsx

1import StackList from '@/components/lightswind/stack-list';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

items	{ icon: React.ReactNode; title: string; subtitle: string; date: string; }[]	-	Array of stack items to display. Each item should contain an icon, title, subtitle, and date.	Required
initialVisible	number	-	Number of items visible before expanding. Defaults to `1`.	Optional
className	string	-	Tailwind utility class string for custom width and layout control of the container.	Optional

Basic Usage

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

app/page.tsx

1import StackList from '@/components/lightswind/stack-list';
2import { Flame, FileText, MapPin } from 'lucide-react';
3
4const activities = [
5  {
6    icon: <FileText className="w-5 h-5" />,
7    title: "Camping",
8    subtitle: "Yosemite Park",
9    date: "5 August",
10  },
11  {
12    icon: <MapPin className="w-5 h-5" />,
13    title: "Boating",
14    subtitle: "Lake Tahoe",
15    date: "2 August",
16  },
17  {
18    icon: <Flame className="w-5 h-5" />,
19    title: "Barbecue",
20    subtitle: "Greenfield Shores",
21    date: "28 July",
22  },
23];
24
25<StackList
26  items={activities}
27  initialVisible={1}
28  className="w-full sm:max-w-md md:max-w-lg"
29/>;

Previousspectrum-loader

Nextteam-carousel

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

Stack List

How to Import

Props

Basic Usage

On This Page

Contribute

Stack List

How to Import

Props

Basic Usage

On This Page

Contribute

React Stack List Component - Lightswind UI

Key Details of React Stack List

Stack List

How to Import

Props

Basic Usage

On This Page

Contribute

Stack List

How to Import

Props

Basic Usage

On This Page

Contribute