benflux/ui
Layout

Scroll Area

Augments native scroll functionality for custom, cross-browser styled scrollbars.

Installation

npx benflux-ui add scroll-area

Usage

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea className="h-48 w-64 rounded-md border p-4">
  {items.map((item) => (
    <div key={item}>{item}</div>
  ))}
</ScrollArea>

// Horizontal scroll
<ScrollArea orientation="horizontal">
  <div className="flex gap-4 w-max">
    {items.map((item) => (
      <div key={item} className="w-40 shrink-0">{item}</div>
    ))}
  </div>
</ScrollArea>