Search
Copy Code
Previous: Separator
Next: Resizable
Close Terminal
Light Mode
Scrollable row 1
Scrollable row 2
Scrollable row 3
Scrollable row 4
Scrollable row 5
Scrollable row 6
Scrollable row 7
Scrollable row 8
Scrollable row 9
Scrollable row 10
Scrollable row 11
Scrollable row 12
Scrollable row 13
Scrollable row 14
Scrollable row 15
Scrollable row 16
Scrollable row 17
Scrollable row 18
Scrollable row 19
Scrollable row 20
Scrollable row 21
Scrollable row 22
Scrollable row 23
Scrollable row 24
Scrollable row 25
Scrollable row 26
Scrollable row 27
Scrollable row 28
Scrollable row 29
Scrollable row 30
Scrollable row 31
Scrollable row 32
Scrollable row 33
Scrollable row 34
Scrollable row 35
Scrollable row 36
Scrollable row 37
Scrollable row 38
Scrollable row 39
Scrollable row 40
Scrollable row 41
Scrollable row 42
Scrollable row 43
Scrollable row 44
Scrollable row 45
Scrollable row 46
Scrollable row 47
Scrollable row 48
Scrollable row 49
Scrollable row 50
scroll-area-demo.tsx
scroll-area.tsx
prompt.md
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import * as React from "react"
4
import { ScrollArea } from "@/components/ui/scroll-area"
5
6
const tags = Array.from({ length: 50 }).map(
7
(_, i, a) => \`Scrollable row \${a.length - i}\`
8
).reverse()
9
10
export default function ScrollAreaDemo() {
11
return (
12
<div className="w-full h-full min-h-[500px] flex items-center justify-center p-10 bg-transparent">
13
<ScrollArea className="h-[220px] w-[300px] rounded-2xl border border-black/10 dark:border-white/10 dark:border-t-white/20 bg-white dark:bg-gradient-to-b dark:from-[#1C1C1E] dark:to-[#0A0A0C] p-4 shadow-md dark:shadow-[0_12px_32px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.08)]">
14
<div className="space-y-3.5 pr-2">
15
{tags.map((tag) => (
16
<div key={tag} className="text-[13.5px] text-zinc-700 dark:text-[#F5F5F7] font-matter py-0.5 px-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition-colors">
17
{tag}
18
</div>
19
))}
20
</div>
21
</ScrollArea>
22
</div>
23
)
24
}
25