//
Augments native scroll functionality for custom, cross-browser styling.
bun add xiod-ui1import { ScrollArea, ScrollBar } from "xiod-ui/scroll-area";1<ScrollArea>2 <ScrollBar />3</ScrollArea>| Prop | Type | Default | Description |
|---|---|---|---|
overflowEdgeThreshold | number| Partial<{ xStart: number; xEnd: number; yStart: number; yEnd: number; }>| undefined | 0 | The threshold in pixels that must be passed before the overflow edge attributes are applied. Accepts a single number for all edges or an object to configure them individually. |
className | string| ((state: ScrollAreaRootState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ScrollAreaRootState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ScrollAreaRootState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
scrollFade | boolean| undefined | false | |
scrollbarGutter | boolean| undefined | false | |
scrollbarSize | "sm"| "lg"| "md"| null| undefined | sm | |
scrollbarVariant | "default"| "card"| null| undefined | default | |
scrollbarVisibility | "auto"| "always"| "hover"| null| undefined | auto |
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal"| "vertical"| undefined | vertical | Whether the scrollbar controls vertical or horizontal scroll. |
keepMounted | boolean| undefined | false | Whether to keep the HTML element in the DOM when the viewport isn't scrollable. |
className | string| ((state: ScrollAreaScrollbarState) => string| undefined)| undefined | - | CSS class applied to the element, or a function that returns a class based on the component's state. |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, ScrollAreaScrollbarState>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
style | CSSProperties| ((state: ScrollAreaScrollbarState) => CSSProperties| undefined)| undefined | - | Style applied to the element, or a function that returns a style object based on the component's state. |
size | "sm"| "lg"| "md"| null| undefined | - | |
variant | "default"| "card"| null| undefined | - | |
visibility | "auto"| "always"| "hover"| null| undefined | - |