Utilities

FadeScroll

A scroll container that communicates overflow with edge fades.

FadeScrollView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

tsx

import { FadeScroll } from "innate-ui";
import classes from "../docs.module.css";

export function FadeScrollDemo() {
  return (
    <div class={classes.fadeScrollSamples}>
      <div class={classes.fadeScrollFrame}>
        <FadeScroll class={classes.fadeScrollDemo}>
          {Array.from({ length: 8 }, (_, index) => (
            <div class={classes.fadeScrollItem}>Item {index + 1}</div>
          ))}
        </FadeScroll>
      </div>
      <FadeScroll direction="horizontal" class={classes.fadeScrollHorizontal}>
        {Array.from({ length: 5 }, (_, index) => (
          <div class={classes.fadeScrollHorizontalItem}>{index + 1}</div>
        ))}
      </FadeScroll>
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

FadeScrollProps

Prop	Type	Default
`children`required Scrollable content.	`JSX.Children`	`—`
`direction` Scroll axis along which edge fades are applied.	`JSX.ValueOrCell<FadeScrollDirection>`	`"vertical"`
`ref` Receives the scroll container element.	`Cell<HTMLElement \| null>`	`—`

Inspect the typed source →