Scroll Area

A custom scroll container with styled scrollbars and optional corner rendering.

#Installation

npx @dinachi/cli@latest add scroll-area

#Usage

tsx

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

The compound ScrollArea handles Viewport, Content, Scrollbar, and Thumb internally. Just wrap your content:

tsx

<ScrollArea className="h-64">
  {children}
</ScrollArea>

Use the orientation prop to control scrollbar direction ("vertical" | "horizontal" | "both").

For advanced composition (e.g. dual-axis with custom scrollbar placement), primitives are also available:

tsx

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaContent,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
} from "@/components/ui/scroll-area"

#Examples

#API Reference

Prop	Type	Default	Description
ScrollAreaScrollbar.orientation	'vertical' \| 'horizontal'	'vertical'	Sets scrollbar orientation.
type	'hover' \| 'scroll' \| 'auto' \| 'always'	'hover'	Controls when scrollbars are visible.
scrollHideDelay	number	600	Delay before auto-hidden scrollbars are hidden again.