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,
  ScrollAreaViewport,
  ScrollAreaContent,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
} from "@/components/ui/scroll-area"

#Examples

Default Scroll Area

A scroll area with a list of items

Horizontal Scroll Area

Scroll area with horizontal scrolling

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

Item 20

#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.