ScrollArea

layout

Augments native scroll functionality for custom, cross-browser styling.

Preview
Tags
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Item 17
Item 18
Item 19
Item 20

Installation

npm install @launchapp/design-system
Import
import { ScrollArea, ScrollBar } from "@launchapp/design-system";

Examples

Scroll Area

<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">  {Array.from({ length: 20 }).map((_, i) => (    <div key={i} className="text-sm py-1">Item {i + 1}</div>  ))}</ScrollArea>

Props

PropTypeDefaultDescription
type
"auto" | "always" | "scroll" | "hover""hover"Scroll visibility strategy.
scrollHideDelay
number600Delay before scrollbar hides (ms).
className
stringAdditional CSS classes.