Scroll Area

Used to create a scrollable area with custom styled scrollbars.

Demo

React
Vue

Lorem ipsum dolor sit amet consectetur adipiscing elit. Nullam venenatis congue imperdiet. Quisque faucibus purus non iaculis dapibus. Fusce facilisis sollicitudin velit rhoncus porttitor. Maecenas hendrerit mollis ex, lobortis suscipit odio bibendum sit amet. Aenean mattis bibendum massa, eget euismod diam vulputate a. Curabitur id tincidunt tortor, vel porttitor eros. Nam mattis, mi id hendrerit varius, sapien elit pulvinar ante, sed congue tortor ante ac elit. Proin et est non dui hendrerit laoreet non a nisl. Morbi blandit venenatis libero, vitae iaculis orci maximus at. Duis efficitur malesuada tempus. Nullam bibendum purus non est iaculis, ut porta massa volutpat. Phasellus hendrerit velit et nisl ullamcorper vulputate.

import { ScrollArea } from '@fintech-sandpit/ui/react';

return (
  <ScrollArea h="10rem">
    <div className="space-y-2 pr-4 pb-4">
      {Array.from({ length: 3 }).map((_, index) => (
        <p key={index}>
          Nullam venenatis congue imperdiet. Quisque faucibus purus non iaculis dapibus.
          Fusce facilisis sollicitudin velit rhoncus porttitor. Maecenas hendrerit mollis ex,
          lobortis suscipit odio bibendum sit amet. Aenean mattis bibendum massa, eget euismod
          diam vulputate a. Curabitur id tincidunt tortor, vel porttitor eros. Nam mattis,
          mi id hendrerit varius, sapien elit pulvinar ante, sed congue tortor ante ac elit.
          Proin et est non dui hendrerit laoreet non a nisl. Morbi blandit venenatis libero,
          vitae iaculis orci maximus at. Duis efficitur malesuada tempus. Nullam bibendum purus
          non est iaculis, ut porta massa volutpat. Phasellus hendrerit velit et nisl ullamcorper
          vulputate.
        </p>
      ))}
    </div>
  </ScrollArea>
);

<script setup lang="ts">
import { ScrollArea } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <ScrollArea h="10rem">
    <div class="space-y-2 pr-4 pb-4">
      <p
        v-for="i in 3"
        :key="i"
      >
        Nullam venenatis congue imperdiet. Quisque faucibus purus non iaculis dapibus.
        Fusce facilisis sollicitudin velit rhoncus porttitor. Maecenas hendrerit mollis ex,
        lobortis suscipit odio bibendum sit amet. Aenean mattis bibendum massa, eget euismod
        diam vulputate a. Curabitur id tincidunt tortor, vel porttitor eros. Nam mattis,
        mi id hendrerit varius, sapien elit pulvinar ante, sed congue tortor ante ac elit.
        Proin et est non dui hendrerit laoreet non a nisl. Morbi blandit venenatis libero,
        vitae iaculis orci maximus at. Duis efficitur malesuada tempus. Nullam bibendum purus
        non est iaculis, ut porta massa volutpat. Phasellus hendrerit velit et nisl ullamcorper
        vulputate.
      </p>
    </div>
  </ScrollArea>
</template>

Props

Name	Type	Default	Description
`w`	`CssUnit`	—	Maximum width of the scroll area
`h`	`CssUnit`	—	Maximum height of the scroll area
`direction`	`ScrollAreaDirection`	`vertical`	Scrollbar direction

Types

export type ScrollAreaDirection = 'vertical' | 'horizontal' | 'both'