Scroll Area

import { ScrollArea } from "@craftdotui/baseui/components/scroll-area";

<ScrollArea className="h-72 w-48">
  <div className="p-4">
    {/* Long content */}
  </div>
</ScrollArea>

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaContent,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  ScrollAreaCorner,
} from "@craftdotui/baseui/components/scroll-area";

<ScrollArea className="h-96 w-full rounded-md border p-4">
  <div className="space-y-4">
    {Array.from({ length: 50 }).map((_, i) => (
      <div key={i}>Item {i + 1}</div>
    ))}
  </div>
</ScrollArea>

<ScrollArea className="w-96 whitespace-nowrap rounded-md border p-4">
  <div className="flex gap-4">
    {Array.from({ length: 50 }).map((_, i) => (
      <div key={i} className="shrink-0">
        Item {i + 1}
      </div>
    ))}
  </div>
</ScrollArea>

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaContent,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
} from "@craftdotui/baseui/components/scroll-area";

<ScrollAreaRoot className="h-96 w-full">
  <ScrollAreaViewport>
    <ScrollAreaContent>
      {/* Content */}
    </ScrollAreaContent>
  </ScrollAreaViewport>
  
  <ScrollAreaScrollbar>
    <ScrollAreaThumb className="bg-primary" />
  </ScrollAreaScrollbar>
</ScrollAreaRoot>

<ScrollArea className="h-96 w-full rounded-lg border">
  <div className="p-4 space-y-4">
    {messages.map((message) => (
      <div key={message.id} className="rounded bg-muted p-2">
        {message.text}
      </div>
    ))}
  </div>
</ScrollArea>