Scroll Area

Augments native scroll for custom, cross-browser scrollbar styling. Vertical bars sit on the inline end and adapt with writing direction.

Basic

A fixed-height region with a styled vertical scrollbar.

Installation

CLI

npx @sonojs/ui@latest add scroll-area

Composition

structure

ScrollArea
└── ScrollBar

Usage

scroll-area.tsx

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

export function Example() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      Your scrollable content here.
    </ScrollArea>
  )
}

Props

Prop	Type	Default	Description
className	string	—	On `ScrollArea` — size the root (e.g. `h-72 w-48`) so content can overflow.
orientation	"vertical" · "horizontal"	"vertical"	On `ScrollBar` — scrollbar axis.
type	"auto" · "always" · "scroll" · "hover"	"hover"	On `ScrollArea` — when the scrollbar is visible (Radix `type`).