Scroll Area

Install

pnpm dlx shadcn@latest add @namche/scroll-area

Usage

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

<ScrollArea className="h-64">
  {events.map((event) => (
    <p key={event.time}>{event.text}</p>
  ))}
</ScrollArea>

ScrollArea needs a bounded height — h-64 or similar — to have anything to scroll; content that fits within it never shows a scrollbar. It wraps Base UI's ScrollArea, rendering a Viewport around your children plus a Scrollbar/Thumb pair that only appears while scrolling or hovering, matching the OS-level scrollbar this replaces rather than pinning one permanently on screen.