Scroll Area

import { ScrollArea } from "@medway-ui/core";
 
<ScrollArea className="h-48 w-full max-w-sm rounded border p-4">
  <div className="space-y-3">
      {Array.from({ length: 20 }).map((_, i) => (
      <div key={i} className="rounded bg-gray-background-soft p-2 text-sm">
        {`Item #${i + 1}`}
      </div>
    ))}
  </div>
</ScrollArea>

import { ScrollArea } from "@medway-ui/core";
 
<ScrollArea className="w-full max-w-sm rounded border p-4">
  <div className="h-24 w-[800px] shrink-0 rounded bg-gray-background-soft p-3 text-sm">
    Wide content to demonstrate horizontal scrolling (drag sideways)
  </div>
</ScrollArea>

import { ScrollArea } from "@medway-ui/core";
 
<ScrollArea className="h-48 w-full max-w-sm rounded border p-4">
  <div className="grid h-[600px] w-[800px] grid-cols-6 gap-3">
    {Array.from({ length: 24 }).map((_, i) => (
      <div key={i} className="rounded bg-gray-background-soft p-2 text-center text-sm">
        {`Block ${i + 1}`}
      </div>
    ))}
  </div>
</ScrollArea>