Scroll Area

<ScrollArea className="h-72 w-48 rounded-md border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
    {tags.map((tag) => (
      <div key={tag}>
        <div className="text-sm">{tag}</div>
        <Separator className="my-2" />
      </div>
    ))}
  </div>
</ScrollArea>

<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
  <div className="flex w-max space-x-4 p-4">
    {items.map((item, i) => (
      <div
        key={i}
        className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md border bg-muted"
      >
        Item {i + 1}
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

import { ScrollArea, ScrollBar } from '@gpters-internal/ui';

function Example() {
  return (
    <ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
      {/* Content that overflows */}
      <ScrollBar orientation="vertical" />
    </ScrollArea>
  );
}