Scroll Area

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>