Scroll Area

npm install @kuzenbo/core

import { ScrollArea } from "@kuzenbo/core";

function Example() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      <div className="space-y-4">
        {Array.from({ length: 50 }, (_, i) => (
          <div key={i} className="text-sm">
            Item {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  );
}

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <ScrollArea.Viewport>
    <ScrollArea.Content>
      <div className="flex space-x-4 p-4">
        {items.map((item) => (
          <div key={item.id} className="shrink-0">
            {item.content}
          </div>
        ))}
      </div>
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Bar orientation="horizontal" />
</ScrollArea>

<ScrollArea>
  {children}
  <ScrollArea.Bar>
    <ScrollArea.Thumb className="bg-primary" />
  </ScrollArea.Bar>
  <ScrollArea.Corner />
</ScrollArea>

<ScrollArea className="h-[400px] w-[400px]">
  <ScrollArea.Viewport>
    <ScrollArea.Content>
      {/* Wide and tall content */}
    </ScrollArea.Content>
  </ScrollArea.Viewport>
  <ScrollArea.Bar orientation="vertical" />
  <ScrollArea.Bar orientation="horizontal" />
  <ScrollArea.Corner />
</ScrollArea>