Skip to main content
ParticleUI

Scroll Area

Custom scrollbar overlay built on Radix UI. Consistent across browsers.

Components

component-1
component-2
component-3
component-4
component-5
component-6
component-7
component-8
component-9
component-10
component-11
component-12
component-13
component-14
component-15
component-16
component-17
component-18
component-19
component-20
component-21
component-22
component-23
component-24
component-25
component-26
component-27
component-28
component-29
component-30

Installation

1

Run the CLI

$npx particleui-cli add scroll-area

Usage

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

export default function Example() {
  return (
    <ScrollArea className="h-48 w-64 rounded-md border p-4">
      {Array.from({ length: 20 }).map((_, i) => (
        <p key={i} className="text-sm">Item {i + 1}</p>
      ))}
    </ScrollArea>
  )
}

Details

Source filecomponents/ui/scroll-area.tsx
Typeui
Categorieslayout, core
npm dependencies@radix-ui/react-scroll-area
Registry deps
Claude skill