Nusa UINusa UI

Scroll Area

Previous: Radio GroupNext: Select

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

Docs API Reference
registry/examples/scroll-area-demo.tsx
import { ScrollArea } from "@/registry/ui/scroll-area"
import { Separator } from "@/registry/ui/separator"

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/scroll-area.json

Usage

import { ScrollArea } from "@/components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Content goes here...
</ScrollArea>

API Reference

ScrollArea

ComponentDescription
ScrollAreaThe main scrollable container
ScrollBarThe scrollbar component

ScrollArea Props

PropTypeDefaultDescription
type"auto" | "always" | "scroll" | "hover""hover"Scrollbar visibility

ScrollBar Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""vertical"Scrollbar orientation
Radio GroupSelect

On this page

InstallationUsageAPI ReferenceScrollAreaScrollArea PropsScrollBar Props