║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Scroller description: A scrollable container with customizable scroll shadows and navigation buttons. preview: true links: api: /docs/components/scroller#api-reference

<ComponentTabs name="scroller-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/scroller"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-slot
 ```

</Step> <Step> Copy the refs composition utilities into your `lib/compose-refs.ts` file.

<ComponentSource name="compose-refs" />

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="scroller" />

</Step> </Steps>

Layout

Import the parts, and compose them together.

import { Scroller } from "@/components/ui/scroller"

<Scroller>
   {/* Scrollable content */}
</Scroller>

Examples

Horizontal Scroll

Set the orientation to horizontal to enable horizontal scrolling.

<ComponentTabs name="scroller-horizontal-demo" />

Hidden Scrollbar

Set the hideScrollbar to true to hide the scrollbar while maintaining scroll functionality.

<ComponentTabs name="scroller-hidden-demo" />

Navigation Buttons

Set the withNavigation to true to enable navigation buttons.

<ComponentTabs name="scroller-navigation-demo" />

API Reference

Scroller

The main scrollable container component.

<AutoTypeTable path="./types/docs/scroller.ts" name="ScrollerProps" />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║