Import
tsx
import { ScrollArea } from "@indoku/ui"Examples
Basic usage
v1.2.0-beta.30
v1.2.0-beta.29
v1.2.0-beta.28
v1.2.0-beta.27
v1.2.0-beta.26
v1.2.0-beta.25
v1.2.0-beta.24
v1.2.0-beta.23
v1.2.0-beta.22
v1.2.0-beta.21
v1.2.0-beta.20
v1.2.0-beta.19
v1.2.0-beta.18
v1.2.0-beta.17
v1.2.0-beta.16
v1.2.0-beta.15
v1.2.0-beta.14
v1.2.0-beta.13
v1.2.0-beta.12
v1.2.0-beta.11
v1.2.0-beta.10
v1.2.0-beta.9
v1.2.0-beta.8
v1.2.0-beta.7
v1.2.0-beta.6
v1.2.0-beta.5
v1.2.0-beta.4
v1.2.0-beta.3
v1.2.0-beta.2
v1.2.0-beta.1
tsx
function ScrollAreaDemo() { return ( <ScrollArea.Root h="48" w="48" rounded="l2" borderWidth="1px"> <Stack gap="0" p="3"> {Array.from({ length: 30 }, (_, i) => `v1.2.0-beta.${30 - i}`).map((v) => ( <Text key={v} fontSize="sm" py="2" borderBottomWidth="1px"> {v} </Text> ))} </Stack> </ScrollArea.Root> )}Props
Root
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | "both" | – | |
type | "hover" | "always" | "scroll" | hover | "hover" shows the scrollbar on hover/scroll, "always" always, "scroll" only while scrolling. |
viewportProps | ComponentPropsWithoutRef<"div"> | – | Extra props for the viewport element (e.g. tabIndex, aria-label). |
* required. Style props and HTML attributes are accepted as well.
Created by @indokudev