- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Scroll Area
A native scroll container with custom scrollbars.
Tags
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-lg 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 shadcn@latest add @coss/scroll-area
Usage
import { ScrollArea } from "@/components/ui/scroll-area"<ScrollArea className="h-64 rounded-md border">
<div className="p-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>API Reference
ScrollArea
Root component. Styled wrapper for ScrollArea.Root from Base UI with custom scrollbar styling.
| Prop | Type | Default | Description |
|---|---|---|---|
scrollFade | boolean | false | Masks viewport edges so content fades in/out as you scroll |
scrollbarGutter | boolean | false | Reserves space for the scrollbar to prevent layout shifts |
ScrollAreaViewport
Scrollable viewport container. Styled wrapper for ScrollArea.Viewport from Base UI.
ScrollAreaScrollbar
Scrollbar track. Styled wrapper for ScrollArea.Scrollbar from Base UI.
ScrollAreaThumb
Scrollbar thumb. Styled wrapper for ScrollArea.Thumb from Base UI.
ScrollAreaCorner
Corner element when both scrollbars are visible. Alias for ScrollArea.Corner from Base UI.
Examples
Scroll Fade
Use scrollFade to mask the viewport edges so content subtly fades in and out as you scroll, hinting that more content is available without adding extra UI chrome.
Tags
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-lg border" scrollFade>
<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>
);
}
Horizontal Scroll
import { ScrollArea } from "@/components/ui/scroll-area";
export default function Particle() {
return (
<ScrollArea className="max-w-96 rounded-lg border">
<div className="flex w-max gap-4 p-4">
{Array.from({ length: 20 }).map((_, i) => (
<div
className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
key={String(i)}
>
<span className="font-medium text-sm">Item {i + 1}</span>
</div>
))}
</div>
</ScrollArea>
);
}
Scrollbar Gutter
Enable scrollbarGutter to reserve space for the scrollbar when overflow appears, preventing layout shifts as the bar shows or hides.
import { ScrollArea } from "@/components/ui/scroll-area";
export default function Particle() {
return (
<ScrollArea className="max-w-96 rounded-lg border" scrollbarGutter>
<div className="flex w-max gap-4 p-4">
{Array.from({ length: 20 }).map((_, i) => (
<div
className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
key={String(i)}
>
<span className="font-medium text-sm">Item {i + 1}</span>
</div>
))}
</div>
</ScrollArea>
);
}
Both Scrollbars
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. Alice peered into the mirror, her reflection staring back at her with an air of mischief. She wondered what it would be like to step through the glass and into the world beyond, where everything seemed to be topsy-turvy and nothing was quite as it seemed. It's no use going back to yesterday, because I was a different person then, reflected Alice.
import { ScrollArea } from "@/components/ui/scroll-area";
export default function Particle() {
return (
<ScrollArea className="h-80 max-w-80 rounded-lg border">
<p className="min-w-100 p-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. Alice peered into the mirror, her reflection staring back at
her with an air of mischief. She wondered what it would be like to step
through the glass and into the world beyond, where everything seemed to
be topsy-turvy and nothing was quite as it seemed. It's no use going
back to yesterday, because I was a different person then, reflected
Alice.
</p>
</ScrollArea>
);
}