Scroll Shadow

A Scroll Shadow fades the edges of a scrollable area while there is more content beyond them, so a cut-off list looks scrollable instead of finished. The shadows appear and disappear as the content is scrolled, on either axis.

Demo

Rendered live, with the same build of the library you install.

Row 1 — scroll to see the shadows come and go.

Row 2 — scroll to see the shadows come and go.

Row 3 — scroll to see the shadows come and go.

Row 4 — scroll to see the shadows come and go.

Row 5 — scroll to see the shadows come and go.

Row 6 — scroll to see the shadows come and go.

Row 7 — scroll to see the shadows come and go.

Row 8 — scroll to see the shadows come and go.

Row 9 — scroll to see the shadows come and go.

Row 10 — scroll to see the shadows come and go.

Row 11 — scroll to see the shadows come and go.

Row 12 — scroll to see the shadows come and go.

Row 13 — scroll to see the shadows come and go.

Row 14 — scroll to see the shadows come and go.

Row 15 — scroll to see the shadows come and go.

Row 16 — scroll to see the shadows come and go.

Usage

Source

ScrollShadow.tsx

import { NScrollShadow } from '@nayan-ui/react';

const ScrollShadow = () => {
  return (
    <div>
      <NScrollShadow className="h-40 max-w-sm rounded-xl border border-default p-3">
        <div className="space-y-2 text-sm text-muted">
          {Array.from({ length: 16 }, (_, index) => (
            <p key={index}>Row {index + 1} — scroll to see the shadows come and go.</p>
          ))}
        </div>
      </NScrollShadow>
    </div>
  );
};

export default ScrollShadow;

Attributes

7 props

Name	Type	Default	Details
children	ReactNode	Required	The children prop.
orientation	'horizontal' \| 'vertical'	'vertical'	The orientation prop.
size	number	Optional	Shadow depth in pixels.
offset	number	Optional	How close to the edge counts as scrolled to it.
hideScrollBar	boolean	false	The hideScrollBar prop.
isEnabled	boolean	true	The isEnabled prop.
className	string	''	The className prop.

Scroll Shadow

Demo

Usage

Attributes

Tags