ScrollShadow

Import

import { ScrollShadow } from "@thenamespace/uikit";

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet hendrerit risus, sed porttitor quam. Morbi accumsan cursus enim, sed ultricies sapien.

import {ScrollShadow} from "@thenamespace/uikit";

export default function Default() {
  return (
    <div className="w-full p-0 sm:max-w-sm">

Orientation

Vertical

Horizontal

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

import {Card, ScrollShadow} from "@thenamespace/uikit";

const images = [
  "/assets/docs/robot1.jpeg",
  "/assets/docs/avocado.jpeg",

Hide Scroll Bar

import {ScrollShadow} from "@thenamespace/uikit";

export default function HideScrollBar() {
  return (
    <div className="w-full p-0 sm:max-w-sm">

Custom Shadow Size

import {ScrollShadow} from "@thenamespace/uikit";

export default function CustomSize() {
  return (
    <div className="w-full p-0 sm:max-w-sm">

Visibility Change

Vertical Shadow State: none

Horizontal Shadow State: none

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

Bridging the Future

Today, 6:30 PM

"use client";

import type {ScrollShadowVisibility} from "@thenamespace/uikit";

import {Card, ScrollShadow} from "@thenamespace/uikit";

With Card

import {Button, Card, ScrollShadow} from "@thenamespace/uikit";

export default function WithCard() {
  return (
    <Card className="max-w-[400px]">

Styling

Passing Tailwind CSS classes

import { ScrollShadow, Card } from "@thenamespace/uikit";

function CustomScrollShadow() {
  return (
    <Card className="w-full p-0 sm:max-w-md">
      <ScrollShadow className="max-h-[300px] p-6 bg-gradient-to-b from-purple-50 to-pink-50">
        <div className="space-y-4">
          {Array.from({ length: 10 }).map((_, idx) => (
            <p key={idx}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
              pulvinar risus non risus hendrerit venenatis.
            </p>
          ))}
        </div>
      </ScrollShadow>
    </Card>
  );
}

Customizing the component classes

To customize the ScrollShadow component classes, you can use the @layer components directive.

Learn more.

@layer components {
  .scroll-shadow {
    @apply rounded-xl border border-default-200;
  }

  .scroll-shadow--vertical {
    @apply pr-2; /* Add padding for custom scrollbar styling */
  }

  .scroll-shadow--horizontal {
    @apply pb-2;
  }
}

Namespace UIKit follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ScrollShadow component uses these CSS classes:

Base Classes

.scroll-shadow - Root container element

Orientation Variants

.scroll-shadow--vertical - Vertical scrolling (default)
.scroll-shadow--horizontal - Horizontal scrolling

State Modifiers

.scroll-shadow--hide-scrollbar - Hides native scrollbar

CSS Variables

The ScrollShadow component uses CSS variables to size the fade mask and reserve space for visible native scrollbars:

Variable	Default	Description
`--scroll-shadow-size`	`40px`	Controls the fade gradient size. This is set from the `size` prop.
`--scroll-shadow-scrollbar-size`	`10px` (`0px` when `hideScrollBar`)	Reserves a solid mask gutter for the native scrollbar so the fade does not cover it. Override for wider scrollbars.

Data Attributes

The component uses data attributes to control shadow visibility:

Scroll States: [data-top-scroll], [data-bottom-scroll], [data-left-scroll], [data-right-scroll] - Applied when content can be scrolled in that direction
Combined States: [data-top-bottom-scroll], [data-left-right-scroll] - Applied when content can be scrolled in both directions
Orientation: [data-orientation="vertical"] or [data-orientation="horizontal"] - Indicates scroll direction
Size: [data-scroll-shadow-size] - Contains the shadow gradient size value

API Reference

ScrollShadow

Prop	Type	Default	Description
`orientation`	`"vertical"` \| `"horizontal"`	`"vertical"`	The scroll direction
`variant`	`"fade"`	`"fade"`	The visual shadow effect style
`size`	`number`	`40`	The shadow gradient size in pixels
`offset`	`number`	`0`	The scroll offset before showing shadows (in pixels)
`hideScrollBar`	`boolean`	`false`	Whether to hide the native scrollbar
`isEnabled`	`boolean`	`true`	Whether scroll shadow detection is enabled
`visibility`	`"auto"` \| `"both"` \| `"top"` \| `"bottom"` \| `"left"` \| `"right"` \| `"none"`	`"auto"`	Controlled shadow visibility state
`onVisibilityChange`	`(visibility: ScrollShadowVisibility) => void`	-	Callback invoked when shadow visibility changes
`className`	`string`	-	Additional CSS classes to apply to the root element
`children`	`ReactNode`	-	The scrollable content

ScrollShadow

Vertical

Horizontal

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Bridging the Future

Terms and Conditions