Radix Docs

Scroll Area

Augments native scroll view for custom, cross-platform styling.

Usage


import {ScrollArea} from "@/components/ui/scroll-area";
 
<ScrollArea baseClassName="h-48 w-72">
  {Array.from({ length: 30 }).map((_, i) => (
    <View key={i} className="p-2 border-b border-border">
      <Text>Row {i + 1}</Text>
    </View>
  ))}

Components

ScrollArea

Prop	Type	Default	Description
`borderRadius`	`"none" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Sets the border radius of the container.
`disabled`	`boolean`	`false`	Disables scrolling and applies disabled styling.
`loading`	`boolean`	`false`	Prevents interaction, applies loading styling (reduced opacity, pulse).
`asChild`	`boolean`	`false`	If true, clones props to the first child instead of rendering a `ScrollView`.
`baseClassName`	`string`	`undefined`	Tailwind classes applied to the base container. Takes priority over `className`.
`children`	`React.ReactNode`	-	Content inside the scroll container.

Also extends all React Native ScrollView props on the root container. Note: scrollEnabled is automatically set to false when disabled or loading is true.

Accessibility

Inherits accessibility behavior from React Native ScrollView.
Disables interaction and scrolling when disabled or loading is true.

Styling

The component uses Tailwind Variants for consistent styling.


base: "outline-none border border-border focus-visible:ring-ring focus-visible:ring-[3px] focus-visible:outline-1"
variants:
  borderRadius: none | sm | md | lg | xl
  disabled: true → "opacity-50 pointer-events-none"
  loading: true → "opacity-80 animate-pulse pointer-events-none"
defaults: { borderRadius: "md", disabled: false, loading: false }