Loading...
Loading...
> Custom styled scrollable area with Radix UI primitives.
1import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
1<ScrollArea className="h-48 w-full">2 <div className="p-4">3 {items.map((item) => (4 <div key={item.id}>{item.name}</div>5 ))}6 </div>7</ScrollArea>
1<ScrollArea className="h-48">2 <div>Content</div>3</ScrollArea>
1<ScrollArea className="w-full">2 <div className="flex gap-4">3 {items.map((item) => (4 <div key={item.id}>{item.name}</div>5 ))}6 </div>7 <ScrollBar orientation="horizontal" />8</ScrollArea>
1<ScrollArea className="h-48 w-full">2 <div className="w-[800px]">Wide content</div>3 <ScrollBar orientation="horizontal" />4</ScrollArea>
1<ScrollArea className="h-48">2 <pre>3 <code>{codeString}</code>4 </pre>5</ScrollArea>
1<ScrollArea className="h-96">2 <div className="space-y-4">3 {messages.map((msg) => (4 <div key={msg.id}>5 <div>{msg.user}</div>6 <div>{msg.text}</div>7 </div>8 ))}9 </div>10</ScrollArea>
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation (ScrollBar) | "vertical" | "horizontal" | "vertical" | Direction of the scrollbar. |
| className | string | - | Additional CSS classes for styling. |