1. Docs
  3. Components
  5. Scroll Area

Scroll Area

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

Docs

Installation

npx shadcn@latest add @kanpeki/scroll-area

Anatomy

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

API Reference

Root

PropTypeDefault
asChild
boolean
false
type
enum
"hover"
scrollHideDelay
number
600
dir
enum
nonce
string

Viewport

The viewport area of the scroll area.

PropTypeDefault
asChild
boolean
false

Scrollbar

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

PropTypeDefault
asChild
boolean
false
forceMount
boolean
orientation
enum
vertical
Radio GroupSelect