tessl/npm-radix-ui--react-scroll-area
A React component for creating accessible scroll areas with customizable scrollbars
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
core-components.mddocs/
Core Components
The fundamental building blocks for creating scroll areas with full compositional control over layout and behavior.
Capabilities
ScrollArea (Root)
The root container component that provides context and coordination for all scrolling behavior.
const ScrollArea: React.ForwardRefExoticComponent<
ScrollAreaProps & React.RefAttributes<ScrollAreaElement>
>;
interface ScrollAreaProps extends React.ComponentPropsWithoutRef<"div"> {
/**
* Scrollbar display mode
* - "auto": Shows scrollbars only when content overflows
* - "always": Always shows scrollbars
* - "scroll": Shows scrollbars during scroll and interaction
* - "hover": Shows scrollbars on hover
*/
type?: "auto" | "always" | "scroll" | "hover"; // default: "hover"
/**
* Text direction for proper scrollbar positioning
*/
dir?: "ltr" | "rtl";
/**
* Delay in milliseconds before hiding scrollbars
*/
scrollHideDelay?: number; // default: 600
}
type ScrollAreaElement = React.ComponentRef<"div">;Usage Examples:
import { ScrollArea } from "@radix-ui/react-scroll-area";
// Basic scroll area with hover scrollbars
<ScrollArea style={{ width: 300, height: 200 }}>
{/* viewport and content */}
</ScrollArea>
// Always visible scrollbars with custom delay
<ScrollArea type="always" scrollHideDelay={1000}>
{/* viewport and content */}
</ScrollArea>
// Auto-hiding scrollbars for RTL layouts
<ScrollArea type="auto" dir="rtl">
{/* viewport and content */}
</ScrollArea>ScrollAreaViewport
The viewport container that defines the scrollable viewing area and manages overflow behavior.
const ScrollAreaViewport: React.ForwardRefExoticComponent<
ScrollAreaViewportProps & React.RefAttributes<ScrollAreaViewportElement>
>;
interface ScrollAreaViewportProps extends React.ComponentPropsWithoutRef<"div"> {
/**
* CSP nonce for injected styles that hide native scrollbars
* @default undefined
*/
nonce?: string;
}
type ScrollAreaViewportElement = React.ComponentRef<"div">;Usage Examples:
import { ScrollAreaViewport } from "@radix-ui/react-scroll-area";
// Basic viewport
<ScrollAreaViewport style={{ width: "100%", height: "100%" }}>
<div>Your scrollable content</div>
</ScrollAreaViewport>
// Viewport with CSP nonce
<ScrollAreaViewport nonce="your-csp-nonce">
<div>Your scrollable content</div>
</ScrollAreaViewport>Component Aliases
Shorter alias components for more concise imports and usage.
const Root: typeof ScrollArea;
const Viewport: typeof ScrollAreaViewport;Usage Examples:
import { Root, Viewport } from "@radix-ui/react-scroll-area";
<Root type="auto">
<Viewport>
<div>Content</div>
</Viewport>
</Root>Key Behaviors
CSS Custom Properties
ScrollArea automatically sets CSS custom properties for styling:
--radix-scroll-area-corner-width: Width of the corner element--radix-scroll-area-corner-height: Height of the corner element--radix-scroll-area-thumb-width: Width of horizontal scrollbar thumb--radix-scroll-area-thumb-height: Height of vertical scrollbar thumb
Native Scrollbar Hiding
ScrollAreaViewport automatically injects styles to hide native scrollbars across browsers:
[data-radix-scroll-area-viewport] {
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
[data-radix-scroll-area-viewport]::-webkit-scrollbar {
display: none;
}Accessibility Features
- Maintains native keyboard navigation
- Preserves screen reader compatibility
- Supports focus management
- Respects reduced motion preferences
Install with Tessl CLI
npx tessl i tessl/npm-radix-ui--react-scroll-area