# scroll-fade

Utilities for adding a fade effect to the edges of a scroll container.

## When to use

* Fade the edges of a scroll container to show there is more content.
* Hide the fade at the edge the user has reached.

## How it works

`scroll-fade` is a utility class from `shadcn/tailwind.css`, which the shadcn CLI imports in your global CSS. Add it to the element that scrolls; the demo also uses `scrollbar-none`.

## Example

```tsx
'use client'

export default function ScrollFadeDemo() {
  return (
    <div className="mx-auto w-full max-w-xs overflow-hidden rounded-2xl border">
      <div className="h-72 scroll-fade scrollbar-none overflow-y-auto">
        <div className="flex flex-col gap-1.5 p-1.5">
          {Array.from({ length: 12 }, (_, index) => (
            <div
              key={index}
              className="rounded-lg bg-muted px-3 py-2.5 text-sm"
            >
              Item {index + 1}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}
```

## Installation

```bash
npm install shadcn
```

## Reference

Official page: https://ui.shadcn.com/docs/utils/scroll-fade