Scroll Area
Scrollable content with a themed track.
Upstream documentationExamples
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Scroll Area
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/scroll-area.json'Usage
A complete example using the installed component and hook paths.
Scroll Area usage
"use client";import { ScrollArea } from "@/components/ui/scroll-area";const scrollRows = [ "Background", "Foreground", "Card", "Popover", "Primary", "Secondary", "Muted", "Accent", "Border", "Input", "Ring", "Destructive",];const ScrollAreaPreview = function ScrollAreaPreview() { return ( <ScrollArea className="h-36 w-full rounded-lg border"> <div className="p-3"> {scrollRows.map((token) => ( <p key={token} className="border-b py-2 text-sm last:border-0"> {token} </p> ))} </div> </ScrollArea> ); };export default function Demo() { return <ScrollAreaPreview />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
ScrollArea
ScrollArea props
ScrollAreaPrimitive.Root.PropsScrollBar
ScrollBar props
ScrollAreaPrimitive.Scrollbar.Props & { sound?: boolean }- orientation
- "vertical"
- sound
- true