Smooth fade (default)
Item 1
This is the description for item 1.
Item 2
This is the description for item 2.
Item 3
This is the description for item 3.
Item 4
This is the description for item 4.
Item 5
This is the description for item 5.
Item 6
This is the description for item 6.
Item 7
This is the description for item 7.
Item 8
This is the description for item 8.
Item 9
This is the description for item 9.
Item 10
This is the description for item 10.
Item 11
This is the description for item 11.
Item 12
This is the description for item 12.
Item 13
This is the description for item 13.
Item 14
This is the description for item 14.
Item 15
This is the description for item 15.
Item 16
This is the description for item 16.
Item 17
This is the description for item 17.
Item 18
This is the description for item 18.
Item 19
This is the description for item 19.
Item 20
This is the description for item 20.
Instant (no transition)
Item 1
This is the description for item 1.
Item 2
This is the description for item 2.
Item 3
This is the description for item 3.
Item 4
This is the description for item 4.
Item 5
This is the description for item 5.
Item 6
This is the description for item 6.
Item 7
This is the description for item 7.
Item 8
This is the description for item 8.
Item 9
This is the description for item 9.
Item 10
This is the description for item 10.
Item 11
This is the description for item 11.
Item 12
This is the description for item 12.
Item 13
This is the description for item 13.
Item 14
This is the description for item 14.
Item 15
This is the description for item 15.
Item 16
This is the description for item 16.
Item 17
This is the description for item 17.
Item 18
This is the description for item 18.
Item 19
This is the description for item 19.
Item 20
This is the description for item 20.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/vanishing-scrollbar.jsonUsage
import { VanishingScrollbar } from "@/components/ui/vanishing-scrollbar"
export default function Example() {
return (
<VanishingScrollbar className="h-64">
{/* Your scrollable content */}
</VanishingScrollbar>
)
}Examples
Instant (no transition)
Use the instant prop to skip the fade animation and show/hide the scrollbar immediately.
<VanishingScrollbar instant className="h-64">
{/* content */}
</VanishingScrollbar>Horizontal Scroll
Use direction="x" for horizontally scrollable content.
<VanishingScrollbar direction="x" className="w-full">
<div className="flex gap-4">
{/* content */}
</div>
</VanishingScrollbar>Custom Color and Duration
<VanishingScrollbar
scrollbarColor="rgb(99 102 241 / 0.6)"
fadeDuration={500}
className="h-64"
>
{/* content */}
</VanishingScrollbar>API Reference
VanishingScrollbar
| Prop | Type | Default | Description |
|---|---|---|---|
| direction | "y" | "x" | "both" | "y" | Scroll direction |
| scrollbarColor | string | "rgb(163 163 163 / 0.5)" | Thumb color when visible |
| fadeDuration | number | 300 | Transition duration in ms |
| instant | boolean | false | Skip transition, show/hide immediately |
| className | string | - | Additional CSS classes |
| children | React.ReactNode | - | The scrollable content |