Data Display
Forms
Navigation
Scroll Area
A native scroll container with custom scrollbars.
Tags
v1.0.0-alpha.0
v1.0.0-alpha.1
v1.0.0-alpha.2
v1.0.0-alpha.3
v1.0.0-alpha.4
v1.0.0-alpha.5
v1.0.0-alpha.6
v1.0.0-alpha.7
v1.0.0-alpha.8
v1.0.0-alpha.9
v1.0.0-alpha.10
v1.0.0-alpha.11
v1.0.0-alpha.12
v1.0.0-alpha.13
v1.0.0-alpha.14
v1.0.0-alpha.15
v1.0.0-alpha.16
v1.0.0-alpha.17
v1.0.0-alpha.18
v1.0.0-alpha.19
v1.0.0-alpha.20
v1.0.0-alpha.21
v1.0.0-alpha.22
v1.0.0-alpha.23
v1.0.0-alpha.24
v1.0.0-alpha.25
v1.0.0-alpha.26
v1.0.0-alpha.27
v1.0.0-alpha.28
v1.0.0-alpha.29
v1.0.0-alpha.30
v1.0.0-alpha.31
v1.0.0-alpha.32
v1.0.0-alpha.33
v1.0.0-alpha.34
v1.0.0-alpha.35
v1.0.0-alpha.36
v1.0.0-alpha.37
v1.0.0-alpha.38
v1.0.0-alpha.39
v1.0.0-alpha.40
v1.0.0-alpha.41
v1.0.0-alpha.42
v1.0.0-alpha.43
v1.0.0-alpha.44
v1.0.0-alpha.45
v1.0.0-alpha.46
v1.0.0-alpha.47
v1.0.0-alpha.48
v1.0.0-alpha.49
import { ScrollArea } from "@/components/ui/scroll-area";
const tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);
export default function Particle() {
return (
<ScrollArea className="h-64 rounded-md border">
<div className="px-4 py-2">
<h4 className="mb-2 font-medium text-sm">Tags</h4>
<div className="flex flex-col gap-1">
{tags.map((tag) => (
<div className="text-sm" key={tag}>
{tag}
</div>
))}
</div>
</div>
</ScrollArea>
);
}
Installation
pnpm dlx cnippet@latest add scroll-area
Usage
import { ScrollArea } from "@/components/ui/scroll-area"<ScrollArea className="h-64 rounded-md border">
<div className="v-4">
Just as suddenly as it had begun, the sensation stopped, leaving Alice
feeling slightly disoriented. She looked around and realized that the room
hadn't changed at all - it was she who had grown smaller, shrinking down to
a fraction of her previous size. Alice felt herself growing larger and
larger, filling up the entire room until she feared she might burst. The
sensation was both thrilling and terrifying, as if she were expanding beyond
the confines of her own body. She wondered if this was what it felt like to
be a balloon, swelling with air until it could hold no more.
</div>
</ScrollArea>On This Page