Scroll Area

Usage

import { ScrollArea, ScrollBar } from "@zynactra/ui/scroll-area"

<ScrollArea className="h-60 w-48 rounded-md border">
  {/* long content */}
</ScrollArea>

<ScrollArea className="w-64">
  <div className="flex gap-3">{/* wide content */}</div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

Guidelines

• Give it a fixed height or width. A scroll area that grows with its content never scrolls.
• Only for regions inside a page (lists in a panel, a code block). Let the page itself scroll natively.
• Horizontal scrolling hides content; make sure the cut-off is visible so people know there's more.

API reference

Behaviour and props come from Base UI. See the Base UI Scroll Area docs.