Scroll Shadow

Scrollable region with edge shadows.

Import

import { ScrollShadow } from '@heroui-vue/vue'

Usage

Scrollable row 1

Scrollable row 2

Scrollable row 3

Scrollable row 4

Scrollable row 5

Scrollable row 6

Scrollable row 7

Scrollable row 8

Scrollable row 9

Scrollable row 10

Scrollable row 11

Scrollable row 12

<template>
  <ScrollShadow class="h-48 max-w-xl rounded-lg border border-default-200 p-4">
    <div class="space-y-3">
      <p v-for="item in 12" :key="item" class="rounded-md bg-default-100 px-3 py-2 text-sm">
        Scrollable row {{ item }}
      </p>
    </div>
  </ScrollShadow>
</template>

<script setup>
import { ScrollShadow } from '@heroui-vue/vue'
</script>

API

Prop	Type	Default	Description
orientation	'vertical' | 'horizontal'	'vertical'	Scroll direction
size	number	40	Shadow size
visibility	'auto' | 'both' | 'top' | 'bottom' | 'left' | 'right' | 'none'	'auto'	Controlled visibility