Scroll Area

A custom scrollable area with native scrolling but custom styled scrollbars.

ScrollArea Demo

This is a scrollable area with custom scrollbars. It uses Radix UI's ScrollArea primitive and is styled with Tailwind CSS.

Long content goes here. When it overflows the container, the scrollbar will appear. The scrollbar is styled to match the design system and provides a consistent look across different browsers.

You can scroll using the scrollbar, mouse wheel, touch gestures, or keyboard navigation. The scrollbar only appears when needed and can be styled to fit your design needs.

Additional content to make sure we have enough to scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec justo vel nisi consectetur tincidunt ac in turpis.

Even more content to ensure scrolling. Fusce varius urna id quam consequat consectetur. Praesent ac massa at ligula laoreet iaculis. Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit.

Installation

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

Usage

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

export function ScrollAreaDemo() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      <div className="space-y-4">
        <h4 className="text-sm font-medium leading-none">ScrollArea Demo</h4>
        <p className="text-sm">
          This is a scrollable area with custom scrollbars. It uses Radix UI's ScrollArea
          primitive and is styled with Tailwind CSS.
        </p>
        <p className="text-sm">
          Long content goes here. When it overflows the container, the scrollbar will appear.
          The scrollbar is styled to match the design system and provides a consistent 
          look across different browsers.
        </p>
        <p className="text-sm">
          You can scroll using the scrollbar, mouse wheel, touch gestures, or keyboard
          navigation. The scrollbar only appears when needed and can be styled to fit
          your design needs.
        </p>
        <p className="text-sm">
          Additional content to make sure we have enough to scroll. Lorem ipsum dolor
          sit amet, consectetur adipiscing elit. Cras nec justo vel nisi consectetur
          tincidunt ac in turpis.
        </p>
      </div>
    </ScrollArea>
  )
}

Examples

Horizontal Scroll

Item 1

Horizontally scrollable item

Item 2

Horizontally scrollable item

Item 3

Horizontally scrollable item

Item 4

Horizontally scrollable item

Item 5

Horizontally scrollable item

Item 6

Horizontally scrollable item

Item 7

Horizontally scrollable item

Item 8

Horizontally scrollable item

Item 9

Horizontally scrollable item

Item 10

Horizontally scrollable item

Scrollbar Visibility

Default (visible on hover)

ScrollArea Demo

This is a scrollable area with custom scrollbars. It uses Radix UI's ScrollArea primitive and is styled with Tailwind CSS.

Long content goes here. When it overflows the container, the scrollbar will appear. The scrollbar is styled to match the design system and provides a consistent look across different browsers.

You can scroll using the scrollbar, mouse wheel, touch gestures, or keyboard navigation. The scrollbar only appears when needed and can be styled to fit your design needs.

Additional content to make sure we have enough to scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec justo vel nisi consectetur tincidunt ac in turpis.

Sed lectus. Integer euismod lacus luctus magna. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo.

Always visible

ScrollArea Demo

This is a scrollable area with custom scrollbars. It uses Radix UI's ScrollArea primitive and is styled with Tailwind CSS.

Long content goes here. When it overflows the container, the scrollbar will appear. The scrollbar is styled to match the design system and provides a consistent look across different browsers.

You can scroll using the scrollbar, mouse wheel, touch gestures, or keyboard navigation. The scrollbar only appears when needed and can be styled to fit your design needs.

Additional content to make sure we have enough to scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec justo vel nisi consectetur tincidunt ac in turpis.

Sed lectus. Integer euismod lacus luctus magna. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo.

Visible when scrolling

ScrollArea Demo

This is a scrollable area with custom scrollbars. It uses Radix UI's ScrollArea primitive and is styled with Tailwind CSS.

Long content goes here. When it overflows the container, the scrollbar will appear. The scrollbar is styled to match the design system and provides a consistent look across different browsers.

You can scroll using the scrollbar, mouse wheel, touch gestures, or keyboard navigation. The scrollbar only appears when needed and can be styled to fit your design needs.

Additional content to make sure we have enough to scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec justo vel nisi consectetur tincidunt ac in turpis.

Sed lectus. Integer euismod lacus luctus magna. Quisque id mi. Ut tincidunt tincidunt erat. Etiam feugiat lorem non metus. Vestibulum dapibus nunc ac augue. Curabitur vestibulum aliquam leo.

Props

Component	Props	Description
ScrollArea	ScrollAreaPrimitive.ScrollAreaProps type?: "auto" \| "always" \| "scroll" \| "hover" scrollHideDelay?: number	The root component for the scroll area.
ScrollBar	ScrollAreaPrimitive.ScrollAreaScrollbarProps orientation?: "vertical" \| "horizontal"	The scrollbar component that appears when content overflows.

Documentation

Scroll Area

ScrollArea Demo

Installation

Usage

Examples

Horizontal Scroll

Scrollbar Visibility

ScrollArea Demo

ScrollArea Demo

ScrollArea Demo

Props