ScrollFade
A scroll container that fades whichever edge still has more content to reveal, instead of cutting content off abruptly.
Installation
npx dafink-ui add scroll-fadeDemo
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
- Item 6
- Item 7
- Item 8
- Item 9
- Item 10
- Item 11
- Item 12
Props
| Name | Type | Default | Description |
|---|---|---|---|
| direction | 'vertical' | 'horizontal' | 'vertical' | Which axis scrolls. Vertical fades top/bottom; horizontal fades left/right. |
| fadeSize | string | 'h-10' / 'w-10' | Tailwind size class for how deep the fade extends from the edge. |
| fadeFrom | string | 'from-surface' | Tailwind gradient-from color class. Match the scrolling content's actual background or the fade won't blend. |
| className | string | '' | Additional CSS classes merged onto the scrollable element. |
| wrapperClassName | string | '' | Additional CSS classes merged onto the outer wrapper; use for flex-sizing (e.g. flex-1 min-h-0) when ScrollFade must grow inside a flex-col parent. |
| children | ReactNode | undefined | The scrollable content. |