Scroll Area
shadcn/uiAugments native scroll functionality for custom, cross-browser styling.
Scroll Area
Tags
Tag 1
Tag 2
Tag 3
Tag 4
Tag 5
Tag 6
Tag 7
Tag 8
Tag 9
Tag 10
Tag 11
Tag 12
Tag 13
Tag 14
Tag 15
Tag 16
Tag 17
Tag 18
Tag 19
Tag 20
Tag 21
Tag 22
Tag 23
Tag 24
Tag 25
Tag 26
Tag 27
Tag 28
Tag 29
Tag 30
Tag 31
Tag 32
Tag 33
Tag 34
Tag 35
Tag 36
Tag 37
Tag 38
Tag 39
Tag 40
Tag 41
Tag 42
Tag 43
Tag 44
Tag 45
Tag 46
Tag 47
Tag 48
Tag 49
Tag 50
import { ScrollArea } from "@/components/optics/scroll-area";<ScrollArea className="h-72 w-48 rounded-md border bg-background"> <div className="p-4"> <h4 className="mb-4 text-sm font-medium leading-none"> Tags </h4> <div className="text-sm py-1"> Tag 1 </div> <div className="text-sm py-1"> Tag 2 </div> <div className="text-sm py-1"> Tag 3 </div> <div className="text-sm py-1"> Tag 4 </div> <div className="text-sm py-1"> Tag 5 </div> <div className="text-sm py-1"> Tag 6 </div> <div className="text-sm py-1"> Tag 7 </div> <div className="text-sm py-1"> Tag 8 </div> <div className="text-sm py-1"> Tag 9 </div> <div className="text-sm py-1"> Tag 10 </div> <div className="text-sm py-1"> Tag 11 </div> <div className="text-sm py-1"> Tag 12 </div> <div className="text-sm py-1"> Tag 13 </div> <div className="text-sm py-1"> Tag 14 </div> <div className="text-sm py-1"> Tag 15 </div> <div className="text-sm py-1"> Tag 16 </div> <div className="text-sm py-1"> Tag 17 </div> <div className="text-sm py-1"> Tag 18 </div> <div className="text-sm py-1"> Tag 19 </div> <div className="text-sm py-1"> Tag 20 </div> <div className="text-sm py-1"> Tag 21 </div> <div className="text-sm py-1"> Tag 22 </div> <div className="text-sm py-1"> Tag 23 </div> <div className="text-sm py-1"> Tag 24 </div> <div className="text-sm py-1"> Tag 25 </div> <div className="text-sm py-1"> Tag 26 </div> <div className="text-sm py-1"> Tag 27 </div> <div className="text-sm py-1"> Tag 28 </div> <div className="text-sm py-1"> Tag 29 </div> <div className="text-sm py-1"> Tag 30 </div> <div className="text-sm py-1"> Tag 31 </div> <div className="text-sm py-1"> Tag 32 </div> <div className="text-sm py-1"> Tag 33 </div> <div className="text-sm py-1"> Tag 34 </div> <div className="text-sm py-1"> Tag 35 </div> <div className="text-sm py-1"> Tag 36 </div> <div className="text-sm py-1"> Tag 37 </div> <div className="text-sm py-1"> Tag 38 </div> <div className="text-sm py-1"> Tag 39 </div> <div className="text-sm py-1"> Tag 40 </div> <div className="text-sm py-1"> Tag 41 </div> <div className="text-sm py-1"> Tag 42 </div> <div className="text-sm py-1"> Tag 43 </div> <div className="text-sm py-1"> Tag 44 </div> <div className="text-sm py-1"> Tag 45 </div> <div className="text-sm py-1"> Tag 46 </div> <div className="text-sm py-1"> Tag 47 </div> <div className="text-sm py-1"> Tag 48 </div> <div className="text-sm py-1"> Tag 49 </div> <div className="text-sm py-1"> Tag 50 </div> </div></ScrollArea>import { ScrollArea } from "@/components/optics/scroll-area";<ScrollArea className="h-72 w-48 rounded-md border bg-background"> <div className="p-4"> <h4 className="mb-4 text-sm font-medium leading-none"> Tags </h4> <div className="text-sm py-1"> Tag 1 </div> <div className="text-sm py-1"> Tag 2 </div> <div className="text-sm py-1"> Tag 3 </div> <div className="text-sm py-1"> Tag 4 </div> <div className="text-sm py-1"> Tag 5 </div> <div className="text-sm py-1"> Tag 6 </div> <div className="text-sm py-1"> Tag 7 </div> <div className="text-sm py-1"> Tag 8 </div> <div className="text-sm py-1"> Tag 9 </div> <div className="text-sm py-1"> Tag 10 </div> <div className="text-sm py-1"> Tag 11 </div> <div className="text-sm py-1"> Tag 12 </div> <div className="text-sm py-1"> Tag 13 </div> <div className="text-sm py-1"> Tag 14 </div> <div className="text-sm py-1"> Tag 15 </div> <div className="text-sm py-1"> Tag 16 </div> <div className="text-sm py-1"> Tag 17 </div> <div className="text-sm py-1"> Tag 18 </div> <div className="text-sm py-1"> Tag 19 </div> <div className="text-sm py-1"> Tag 20 </div> <div className="text-sm py-1"> Tag 21 </div> <div className="text-sm py-1"> Tag 22 </div> <div className="text-sm py-1"> Tag 23 </div> <div className="text-sm py-1"> Tag 24 </div> <div className="text-sm py-1"> Tag 25 </div> <div className="text-sm py-1"> Tag 26 </div> <div className="text-sm py-1"> Tag 27 </div> <div className="text-sm py-1"> Tag 28 </div> <div className="text-sm py-1"> Tag 29 </div> <div className="text-sm py-1"> Tag 30 </div> <div className="text-sm py-1"> Tag 31 </div> <div className="text-sm py-1"> Tag 32 </div> <div className="text-sm py-1"> Tag 33 </div> <div className="text-sm py-1"> Tag 34 </div> <div className="text-sm py-1"> Tag 35 </div> <div className="text-sm py-1"> Tag 36 </div> <div className="text-sm py-1"> Tag 37 </div> <div className="text-sm py-1"> Tag 38 </div> <div className="text-sm py-1"> Tag 39 </div> <div className="text-sm py-1"> Tag 40 </div> <div className="text-sm py-1"> Tag 41 </div> <div className="text-sm py-1"> Tag 42 </div> <div className="text-sm py-1"> Tag 43 </div> <div className="text-sm py-1"> Tag 44 </div> <div className="text-sm py-1"> Tag 45 </div> <div className="text-sm py-1"> Tag 46 </div> <div className="text-sm py-1"> Tag 47 </div> <div className="text-sm py-1"> Tag 48 </div> <div className="text-sm py-1"> Tag 49 </div> <div className="text-sm py-1"> Tag 50 </div> </div></ScrollArea>Installation
pnpm dlx shadcn@latest add @optics/scroll-area
Props
<ScrollArea />
Name | Type | |
|---|---|---|
className | string | |
scrollHideDelay | number (default: 0) | |
viewportClassName | string | |
maskClassName | string | |
maskHeight | number (default: 30) | |
maskColor | string |