---
title: Vanishing Scrollbar
description: A scroll container that hides the native scrollbar by default and fades it in smoothly on hover. Supports vertical, horizontal, and both scroll directions.
---

<ComponentPreview name="vanishing-scrollbar-demo" />

## Installation

<Installation name="vanishing-scrollbar" />

## Usage

```tsx
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.

```tsx
<VanishingScrollbar instant className="h-64">
  {/* content */}
</VanishingScrollbar>
```

### Horizontal Scroll

Use `direction="x"` for horizontally scrollable content.

```tsx
<VanishingScrollbar direction="x" className="w-full">
  <div className="flex gap-4">
    {/* content */}
  </div>
</VanishingScrollbar>
```

### Custom Color and Duration

```tsx
<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 |