Scroll Area

A scrollable container with custom styled scrollbars, providing a consistent cross-browser experience.

How to Import

Add this import to your component file

app/page.tsx

1import { ScrollArea, ScrollBar } from '@/components/lightswind/scroll-area';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

maxHeight	string \| number	-	Maximum height of the scroll area.	Optional
showScrollbars	boolean	-	Whether to show scrollbars.	Optional
scrollable	boolean	-	Whether to allow scrolling.	Optional
orientation	"vertical" \| "horizontal" \| "both"	-	The orientation of the scroll area.	Optional
smooth	boolean	-	Whether to smooth scroll.	Optional
viewportRef	React.RefObject<HTMLDivElement>	-	Reference to the viewport element.	Optional

Basic Usage

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

app/page.tsx

1import { ScrollArea } from '@/components/lightswind/scroll-area';
2
3export function ScrollAreaDemo() {
4  return (
5    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
6      <div className="space-y-4">
7        <h4 className="text-sm font-medium leading-none">Scrollable Content</h4>
8        <p className="text-sm">
9          This is a scrollable area with custom scrollbars. The content will scroll when it exceeds the height.
10        </p>
11        {/* Add more content here to make it scroll */}
12        {Array.from({ length: 15 }).map((_, i) => (
13          <div key={i} className="py-1">
14            Row {i + 1}
15          </div>
16        ))}
17      </div>
18    </ScrollArea>
19  );
20}

Previousresizable

Nextseparator

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

Scroll Area

A scrollable container with custom styled scrollbars, providing a consistent cross-browser experience.

...

How to Import

Add this import to your component file

app/page.tsx

1import { ScrollArea, ScrollBar } from '@/components/lightswind/scroll-area';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

maxHeight	string \| number	-	Maximum height of the scroll area.	Optional
showScrollbars	boolean	-	Whether to show scrollbars.	Optional
scrollable	boolean	-	Whether to allow scrolling.	Optional
orientation	"vertical" \| "horizontal" \| "both"	-	The orientation of the scroll area.	Optional
smooth	boolean	-	Whether to smooth scroll.	Optional
viewportRef	React.RefObject<HTMLDivElement>	-	Reference to the viewport element.	Optional

Basic Usage

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

app/page.tsx

1import { ScrollArea } from '@/components/lightswind/scroll-area';
2
3export function ScrollAreaDemo() {
4  return (
5    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
6      <div className="space-y-4">
7        <h4 className="text-sm font-medium leading-none">Scrollable Content</h4>
8        <p className="text-sm">
9          This is a scrollable area with custom scrollbars. The content will scroll when it exceeds the height.
10        </p>
11        {/* Add more content here to make it scroll */}
12        {Array.from({ length: 15 }).map((_, i) => (
13          <div key={i} className="py-1">
14            Row {i + 1}
15          </div>
16        ))}
17      </div>
18    </ScrollArea>
19  );
20}

Previousresizable

Nextseparator

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

Scroll Area

How to Import

Props

Basic Usage

On This Page

Contribute

Scroll Area

How to Import

Props

Basic Usage

On This Page

Contribute

React Scroll Area Component - Lightswind UI

Key Details of React Scroll Area

Scroll Area

How to Import

Props

Basic Usage

On This Page

Contribute

Scroll Area

How to Import

Props

Basic Usage

On This Page

Contribute