ScrollArea

import { ScrollArea } from '@mihcm/ui/ScrollArea';
 
const TAGS = Array.from({ length: 30 }, (_, i) => `Tag ${i + 1}`);
 
<ScrollArea className="h-72 w-48 rounded-xl border border-border">
  <div className="p-4">
    <h4 className="mb-4 text-sm font-semibold">Tags</h4>
    {TAGS.map((tag) => (
      <div key={tag} className="border-b border-border py-2 text-sm">
        {tag}
      </div>
    ))}
  </div>
</ScrollArea>

import { ScrollArea, ScrollBar } from '@mihcm/ui/ScrollArea';
 
<ScrollArea className="w-96 whitespace-nowrap rounded-xl border border-border">
  <div className="flex gap-4 p-4">
    {Array.from({ length: 20 }, (_, i) => (
      <div
        key={i}
        className="inline-flex h-24 w-32 shrink-0 items-center justify-center rounded-md border border-border text-sm"
      >
        Item {i + 1}
      </div>
    ))}
  </div>
  <ScrollBar orientation="horizontal" />
</ScrollArea>

<aside className="w-64 border-r border-border">
  <ScrollArea className="h-screen">
    <nav className="p-4 space-y-1">
      {/* navigation items */}
    </nav>
  </ScrollArea>
</aside>