Scroll List

An animated vertical list that highlights the centered item using Framer Motion.

How to Import

Add this import to your component file

app/page.tsx

1import ScrollList from '@/components/lightswind/scroll-list';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

data	T[]	-	An array of items to be rendered in the scrollable list. Each item can be of any type and is passed into the `renderItem` function.	Required
renderItem	(item: T, index: number) => React.ReactNode	-	Function to render each individual list item. Receives the current item and index as arguments.	Required
itemHeight	number	-	Fixed height in pixels for each item in the scroll list. Defaults to `155` if not specified.	Optional

Basic Usage

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

app/page.tsx

1import ScrollList from '@/components/lightswind/scroll-list';
2
3<ScrollList
4  data={yourDataArray}
5  renderItem={(item, index) => (
6    <div className="p-4 bg-white rounded-xl shadow-md">
7      <h3 className="text-lg font-semibold">{item.title}</h3>
8      <p className="text-sm text-gray-600">{item.description}</p>
9    </div>
10  )}
11  itemHeight={160}
12/>

Previousscroll-paragraph

Nextscroll-timeline

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

Scroll List

An animated vertical list that highlights the centered item using Framer Motion.

...

How to Import

Add this import to your component file

app/page.tsx

1import ScrollList from '@/components/lightswind/scroll-list';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

data	T[]	-	An array of items to be rendered in the scrollable list. Each item can be of any type and is passed into the `renderItem` function.	Required
renderItem	(item: T, index: number) => React.ReactNode	-	Function to render each individual list item. Receives the current item and index as arguments.	Required
itemHeight	number	-	Fixed height in pixels for each item in the scroll list. Defaults to `155` if not specified.	Optional

Basic Usage

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

app/page.tsx

1import ScrollList from '@/components/lightswind/scroll-list';
2
3<ScrollList
4  data={yourDataArray}
5  renderItem={(item, index) => (
6    <div className="p-4 bg-white rounded-xl shadow-md">
7      <h3 className="text-lg font-semibold">{item.title}</h3>
8      <p className="text-sm text-gray-600">{item.description}</p>
9    </div>
10  )}
11  itemHeight={160}
12/>

Previousscroll-paragraph

Nextscroll-timeline

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

Scroll List

How to Import

Props

Basic Usage

On This Page

Contribute

Scroll List

How to Import

Props

Basic Usage

On This Page

Contribute

React Scroll List Component - Lightswind UI

Key Details of React Scroll List

Scroll List

How to Import

Props

Basic Usage

On This Page

Contribute

Scroll List

How to Import

Props

Basic Usage

On This Page

Contribute