Documentation
Scroller

Scroller

The Scroller component is designed to create scrollable containers with smooth gradient indicators. These gradients dynamically appear at the edges of the container when there is overflow content, providing a visual cue to users that the content is scrollable.

Usage

First of all, you need to import the Scroller component from the kitchn package.

import { Scroller } from "kitchn"

Vertical

<Scroller width={"100%"} height={220}>
  <Container>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
</Scroller>
Code Editor
<Scroller width={"100%"} height={220}>
  <Container>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
</Scroller>

Horizontal

<Scroller width={"100%"} height={"100%"}>
  <Container row>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
</Scroller>
Code Editor
<Scroller width={"100%"} height={"100%"}>
  <Container row>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
</Scroller>

Free

<Scroller width={"100%"} height={220}>
  <Container row>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
  <Container row>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
</Scroller>
Code Editor
<Scroller width={"100%"} height={220}>
  <Container row>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
  <Container row>
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
    <Image
      src={"https://kitchn.tonightpass.com/favicon.svg"}
      width={300}
      height={300}
      alt={"Kitchn Favicon"}
    />
  </Container>
</Scroller>

Props

NameTypeDefaultRequiredDescription
childrenReact.ReactNode nullYesThe content to be displayed inside the scrollable container.