ScrollArea

1import { ScrollArea } from '@hua-labs/ui';
2 
3function Example() {
4  return (
5    <ScrollArea className="h-48 w-full rounded-md border p-4">
6      <div className="space-y-4">
7        {Array.from({ length: 20 }).map((_, i) => (
8          <div key={i} className="text-sm">
9            Item {i + 1} - Lorem ipsum dolor sit amet
10          </div>
11        ))}
12      </div>
13    </ScrollArea>
14  );
15}

1<ScrollArea orientation="horizontal" className="w-full rounded-md border">
2  <div className="flex gap-4 p-4">
3    {Array.from({ length: 15 }).map((_, i) => (
4      <div
5        key={i}
6        className="w-32 h-24 shrink-0 rounded-md bg-primary/20 flex items-center justify-center"
7      >
8        Card {i + 1}
9      </div>
10    ))}
11  </div>
12</ScrollArea>

1<ScrollArea type="always" className="h-48 w-full rounded-md border p-4">
2  <div className="space-y-4">
3    {Array.from({ length: 10 }).map((_, i) => (
4      <div key={i} className="text-sm">
5        Scrollbar is always visible - Item {i + 1}
6      </div>
7    ))}
8  </div>
9</ScrollArea>