Scroll Area

Vertical

<Component className="border-sand-9 flex h-full w-full border p-3">
  <div className="flex flex-col items-center gap-3">
    <div className="size-32 bg-red-500" />
    <div className="size-32 bg-orange-500" />
    <div className="size-32 bg-yellow-500" />
    <div className="size-32 bg-green-500" />
    <div className="size-32 bg-blue-500" />
    <div className="size-32 bg-indigo-500" />
    <div className="size-32 bg-purple-500" />
  </div>
</Component>

Horizontal

<Component className="border-sand-9 h-full w-full border p-3" orientation="horizontal">
  <div className="my-auto flex max-h-full flex-row items-center gap-3">
    <div className="size-32 bg-red-500" />
    <div className="size-32 bg-orange-500" />
    <div className="size-32 bg-yellow-500" />
    <div className="size-32 bg-green-500" />
    <div className="size-32 bg-blue-500" />
    <div className="size-32 bg-indigo-500" />
    <div className="size-32 bg-purple-500" />
  </div>
</Component>