Docs
Components
Scroll Area

Scroll Area

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

Preview

Code

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/scroll-area

Anatomy

Single import

Multiple imports

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>;

Examples

Horizontal

Preview

Code

API Reference

ScrollArea.Root

Prop	Type	Default
`className`	`string`

ScrollArea.Viewport

The viewport area of the scroll area.

Prop	Type	Default
`scrollFade`	`boolean`	`false`
`scrollbarGutter`	`boolean`	`false`
`className`	`string`

ScrollArea.Scrollbar

The scrollbar track. Add a second Scrollbar with an orientation prop to enable horizontal scrolling.

Prop	Type	Default
`orientation`	`enum`	`"vertical"`
`className`	`string`

ScrollArea.Thumb

The draggable thumb element inside the scrollbar.

Prop	Type	Default
`className`	`string`

Resizable Select

On This Page

Installation
Anatomy
Examples
Horizontal
API Reference
ScrollArea.Root
ScrollArea.Viewport
ScrollArea.Scrollbar
ScrollArea.Thumb

Contribute