Docs
components
Scroll Area

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

Docs

Preview

Code

Installation

CLI

Manual

Copy and paste the following code into your project.

"use client";
 
import { Root, Scrollbar, Thumb, Viewport } from "@radix-ui/react-scroll-area";
import { ScrollAreaStyles } from "./styles";
 
export interface ScrollAreaRootProps
  extends React.ComponentProps<typeof Root> {}
 
export function ScrollAreaRoot({ className, ...props }: ScrollAreaRootProps) {
  return <Root {...props} className={ScrollAreaStyles.Root({ className })} />;
}
 
export interface ScrollAreaViewportProps
  extends React.ComponentProps<typeof Viewport> {}
 
export function ScrollAreaViewport({
  className,
  ...props
}: ScrollAreaViewportProps) {
  return (
    <Viewport {...props} className={ScrollAreaStyles.Viewport({ className })} />
  );
}
 
export interface ScrollAreaScrollbarProps
  extends React.ComponentProps<typeof Scrollbar> {
  orientation: "vertical" | "horizontal";
}
 
export function ScrollAreaScrollbar({
  className,
  orientation,
  ...props
}: ScrollAreaScrollbarProps) {
  return (
    <Scrollbar
      {...props}
      orientation={orientation}
      className={ScrollAreaStyles.Scrollbar({ className, orientation })}
    />
  );
}
 
export interface ScrollAreaThumbProps
  extends React.ComponentProps<typeof Thumb> {}
 
export function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps) {
  return <Thumb {...props} className={ScrollAreaStyles.Thumb({ className })} />;
}

Update the import paths to match your project setup.

Usage

Single import

import { ScrollArea } from "~/components/ui/scroll-area";

<ScrollArea.Root>
  <ScrollArea.Viewport>...</ScrollArea.Viewport>
  <ScrollArea.Scrollbar orientation="vertical">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
  <ScrollArea.Scrollbar orientation="horizontal">
    <ScrollArea.Thumb />
  </ScrollArea.Scrollbar>
</ScrollArea.Root>

Multiple imports

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
} from "~/components/ui/scroll-area";

<ScrollAreaRoot>
  <ScrollAreaViewport>...</ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollAreaRoot>