Pallas UI
DocsComponents
Core Concepts
Previews

ScrollArea

A scrollable container that replaces native browser scrollbars with a custom, accessible alternative.

Loading preview...

Installation

Install the following dependencies

npm install @radix-ui/react-scroll-area

Copy and paste the following code into your project

'use client'
 
import { type Assign, type WithFixedClassName, createStyleContext } from '@pallas-ui/style-context'
import * as RadixScrollArea from '@radix-ui/react-scroll-area'
import { type ScrollAreaVariantProps, scrollArea } from '@styled-system/recipes'
import type { ComponentProps, JsxStyleProps } from '@styled-system/types'
import type * as React from 'react'
 
const { withProvider, withContext } = createStyleContext(scrollArea)
 
export const Root = withProvider<
  React.ComponentRef<typeof RadixScrollArea.Root>,
  Assign<
    WithFixedClassName<ComponentProps<typeof RadixScrollArea.Root>>,
    ScrollAreaVariantProps & JsxStyleProps
  >
>(RadixScrollArea.Root, 'root')
 
export const Viewport = withContext<
  React.ComponentRef<typeof RadixScrollArea.Viewport>,
  Assign<WithFixedClassName<ComponentProps<typeof RadixScrollArea.Viewport>>, JsxStyleProps>
>(RadixScrollArea.Viewport, 'viewport')
 
export const Scrollbar = withContext<
  React.ComponentRef<typeof RadixScrollArea.Scrollbar>,
  Assign<WithFixedClassName<ComponentProps<typeof RadixScrollArea.Scrollbar>>, JsxStyleProps>
>(RadixScrollArea.Scrollbar, 'scrollbar')
 
export const Thumb = withContext<
  React.ComponentRef<typeof RadixScrollArea.Thumb>,
  Assign<WithFixedClassName<ComponentProps<typeof RadixScrollArea.Thumb>>, JsxStyleProps>
>(RadixScrollArea.Thumb, 'thumb')
 
export const Corner = withContext<
  React.ComponentRef<typeof RadixScrollArea.Corner>,
  Assign<WithFixedClassName<ComponentProps<typeof RadixScrollArea.Corner>>, JsxStyleProps>
>(RadixScrollArea.Corner, 'corner')
 
const ScrollArea = {
  Root,
  Viewport,
  Scrollbar,
  Thumb,
  Corner,
}
 
export default ScrollArea

Update the import paths to match your project setup

Usage

import ScrollArea from '@/components/ui/scroll-area'
<ScrollArea.Root>
  <ScrollArea.Viewport>
    {/* scrollable content */}
  </ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Corner />
</ScrollArea.Root>

Examples

Horizontal Scroll

Add a ScrollArea.Scrollbar with orientation="horizontal" to enable horizontal scrolling. Include ScrollArea.Corner when both axes are scrollable to fill the gap where the two scrollbars meet.

Loading preview...

Sizes

Use size="sm" for a thinner scrollbar or size="md" (default) for a standard-width track. Choose based on how prominent the scrollbar should be in context.

Loading preview...

Layouts

Use layout="overlay" (default) to float the scrollbar over content without affecting layout. Use layout="inset" to reserve space for the scrollbar so it never obscures content.

Loading preview...

API Reference

ScrollArea.Root Props

PropTypeDefaultDescription
size'sm' | 'md''md'Thickness of the scrollbar track and thumb.
layout'overlay' | 'inset''overlay'Whether the scrollbar floats over content (overlay) or reserves space beside it (inset).
type'auto' | 'always' | 'scroll' | 'hover''hover'Controls when scrollbars are visible. 'auto' shows them when content overflows, 'always' keeps them visible, 'scroll' shows them while scrolling, 'hover' shows them on hover.
scrollHideDelaynumber600Delay in milliseconds before scrollbars are hidden. Only applies when type is 'scroll' or 'hover'.
dir'ltr' | 'rtl'—Reading direction of the scroll area. Inherits from the document when omitted.
cssSystemStyleObject—Inline PandaCSS style overrides.

The component also accepts all standard HTML <div> attributes.

ScrollArea.Viewport Props

Renders the visible, clipped scrollable region. The component accepts all standard HTML <div> attributes.

ScrollArea.Scrollbar Props

PropTypeDefaultDescription
orientation'vertical' | 'horizontal'—Required. Direction of the scrollbar.
forceMountboolean—Forces the scrollbar to stay mounted in the DOM. Useful when controlling visibility with an animation library.

The component also accepts all standard HTML <div> attributes.

ScrollArea.Thumb Props

Renders the draggable thumb inside a ScrollArea.Scrollbar. The component accepts all standard HTML <div> attributes.

ScrollArea.Corner Props

Renders the corner fill where the vertical and horizontal scrollbars meet. The component accepts all standard HTML <div> attributes.

Accessibility

ScrollArea: All content inside ScrollArea.Viewport remains keyboard-navigable using standard browser focus and scroll interactions (Tab, Arrow keys, Page Up/Down). Screen readers announce the scrollable region naturally. The custom scrollbars are visually rendered but hidden from the accessibility tree — assistive technologies interact with native scroll behavior on the viewport instead.