Scroller
A scrollable container with customizable scroll shadows and navigation buttons.
Installation
pnpm dlx shadcn@latest add @diceui/scrollerLayout
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.
Hidden Scrollbar
Set the hideScrollbar to true to hide the scrollbar while maintaining scroll functionality.
Navigation Buttons
Set the withNavigation to true to enable navigation buttons.
API Reference
Scroller
The main scrollable container component.
Prop
Type