Scroll Area

Augments native scroll for custom, cross-browser styling.

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

01

Installation

Add the scroll area component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/scroll-area.json

02

Usage

tsx

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

03

Examples

Default

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

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

<ScrollArea className="h-40 w-56 border border-border p-3">
  <div className="space-y-2 text-sm">
    {items.map((item) => (
      <p key={item.id} className="text-muted-foreground">{item.label}</p>
    ))}
  </div>
</ScrollArea>