ScrollShadow

Scrolling content, faded at each edge it hides more at.

Solidtype_heroui.Scroll_shadow is a <div> that scrolls, with the classes HeroUI’s own scrollShadowVariants gives, faded at each edge it hides content at. It measures itself as it scrolls, as it is resized and as its content changes, as HeroUI’s hook does, and declares each edge as that hook writes it. Kobalte has no scroll shadow.

Usage

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.

module For = Solidtype.For
module Scroll_shadow = Solidtype_heroui.Scroll_shadow

let lorem =
  "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."

let paragraphs () =
  <div class_="space-y-4">
    <For each=(fun () -> Array.make 10 lorem)>
      (fun text _ -> <p>(fun () -> Solidtype.Jsx.string text)</p>)
    </For>
  </div>

let make () =
  <div class_="w-full p-0 sm:max-w-sm">
    <Scroll_shadow class_="max-h-[240px] p-4">
      (fun () -> Solidtype.Jsx.element (paragraphs ()))
    </Scroll_shadow>
  </div>

Examples

Orientation

Lorem Card — scroll_shadow_orientation.mlx

Shadow Size

module For = Solidtype.For
module Scroll_shadow = Solidtype_heroui.Scroll_shadow

let lorem =
  "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."

let paragraphs () =
  <div class_="space-y-4">
    <For each=(fun () -> Array.make 10 lorem)>
      (fun text _ -> <p>(fun () -> Solidtype.Jsx.string text)</p>)
    </For>
  </div>

let make () =
  <div class_="w-full p-0 sm:max-w-sm">
    <Scroll_shadow class_="max-h-[240px] p-4" size=80>
      (fun () -> Solidtype.Jsx.element (paragraphs ()))
    </Scroll_shadow>
  </div>

With Card

module For = Solidtype.For
module Button = Solidtype_heroui.Button
module Card = Solidtype_heroui.Card
module Scroll_shadow = Solidtype_heroui.Scroll_shadow

let lorem =
  "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."

let paragraphs () =
  <div class_="space-y-4">
    <For each=(fun () -> Array.make 10 lorem)>
      (fun text _ -> <p>(fun () -> Solidtype.Jsx.string text)</p>)
    </For>
  </div>

let make () =
  <Card class_="max-w-[400px]">
    <Card.Header>
      <Card.Title>"Terms and Conditions"</Card.Title>
      <Card.Description>"Please review before proceeding"</Card.Description>
    </Card.Header>
    <Card.Content class_="p-0">
      <Scroll_shadow class_="h-[300px] px-4" size=80>
        (fun () -> Solidtype.Jsx.element (paragraphs ()))
      </Scroll_shadow>
    </Card.Content>
    <Card.Footer class_="mt-4 flex flex-row gap-2">
      <Button class_="w-full" variant=`secondary>"Cancel"</Button>
      <Button class_="w-full">"Accept"</Button>
    </Card.Footer>
  </Card>

Hide Scroll Bar

module For = Solidtype.For
module Scroll_shadow = Solidtype_heroui.Scroll_shadow

let lorem =
  "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."

let paragraphs () =
  <div class_="space-y-4">
    <For each=(fun () -> Array.make 10 lorem)>
      (fun text _ -> <p>(fun () -> Solidtype.Jsx.string text)</p>)
    </For>
  </div>

let make () =
  <div class_="w-full p-0 sm:max-w-sm">
    <Scroll_shadow hide_scroll_bar=true class_="max-h-[240px] p-4">
      (fun () -> Solidtype.Jsx.element (paragraphs ()))
    </Scroll_shadow>
  </div>

Visibility Change

on_visibility_change is told each change of the edges content is hidden at.

Customization

Tailwind CSS

class_ is added after HeroUI’s classes.

Reviewed quarterly goals with the design team.

Shipped dark mode tokens to production.

Merged accessibility fixes for form fields.

Published updated component documentation.

Scheduled performance audit for next sprint.

Added scroll shadow demos to the docs site.

module For = Solidtype.For
module Scroll_shadow = Solidtype_heroui.Scroll_shadow

let entries =
  [|
    "Reviewed quarterly goals with the design team.";
    "Shipped dark mode tokens to production.";
    "Merged accessibility fixes for form fields.";
    "Published updated component documentation.";
    "Scheduled performance audit for next sprint.";
    "Added scroll shadow demos to the docs site.";
  |]

let make () =
  <div class_="w-full sm:max-w-sm">
    <Scroll_shadow
      hide_scroll_bar=true
      class_="max-h-48 rounded-xl border border-border/80 bg-linear-to-b \
              from-neutral-50/90 to-white p-4 ring-1 ring-black/5 \
              dark:from-neutral-900/80 dark:to-neutral-900 dark:ring-white/10"
      size=48
      variant=`fade>
      <div class_="space-y-3">
        <For each=(fun () -> entries)>
          (fun entry _ ->
            <p
              class_="text-sm leading-relaxed text-neutral-600 \
                      dark:text-neutral-400">
              (fun () -> Solidtype.Jsx.string entry)
            </p>)
        </For>
      </div>
    </Scroll_shadow>
  </div>

Global CSS

HeroUI’s classes are global, so a stylesheet restyles every scroll shadow, as with HeroUI in React:

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

  .scroll-shadow--vertical {
    @apply pr-2;
  }
}

Styling Reference

CSS Classes

.scroll-shadow, and .scroll-shadow--vertical, .scroll-shadow--horizontal, .scroll-shadow--hide-scrollbar

CSS Variables

--scroll-shadow-size, the fade’s size, from size
--scroll-shadow-offset, how far it scrolls before the fade starts, from offset
--scroll-shadow-scrollbar-size, the gutter kept for a native scrollbar

Data Attributes

[data-top-scroll], [data-bottom-scroll], [data-left-scroll], [data-right-scroll]: "true" where content is hidden at that edge, "false" where it is not
[data-top-bottom-scroll], [data-left-right-scroll]: content hidden at both edges
[data-orientation], [data-scroll-shadow-size]
[data-scroll-shadow-mode]: "auto" where the fade follows the scroll, "manual" where visibility is given or it is disabled

A shadow is measured once it is in the browser, so a prerendered one marks no edge until it is; where a browser has scroll-driven animations, HeroUI’s styles fade an "auto" shadow from its first paint without them.

API Reference

Each prop beside the name HeroUI’s React component gives it.

ScrollShadow

React	solidtype	Type	Default	Description
`orientation`	`orientation`	[ `vertical \| `horizontal ]	`vertical	The way it scrolls
`variant`	`variant`	[ `fade ]	`fade	Its shadow
`size`	`size`	`int`	`40`	The fade’s size, in pixels
`offset`	`offset`	`int`	`0`	How far it scrolls before the fade starts, in pixels
`hideScrollBar`	`hide_scroll_bar`	`bool`	`false`	Whether the native scrollbar is hidden
`isEnabled`	`is_enabled`	`bool`	`true`	Whether it measures itself
`visibility`	`visibility`	[ `auto \| `top \| `bottom \| `left \| `right \| `both \| `none ]	`auto	The edges it marks, or `auto for those measured
`onVisibilityChange`	`on_visibility_change`	`Scroll_shadow.edge -> unit`		Told each change of the edges measured
`className`	`class_`	`string`		Added after HeroUI’s classes
`children`	`children`	elements		What it scrolls

Beside React

Original HeroUI documentation: ScrollShadow.

The same HeroUI ScrollShadow twice, under the same props: in solidtype on the left, in React on the right. Below them, every attribute of the two: a marked row is one they disagree on. Scroll them to see the edges each marks.

visibilityhide scroll bar

solidtype — OCaml, on Solid and Kobalte

Line 1

Line 2

Line 3

Line 4

Line 5

Line 6

Line 7

Line 8

React — TypeScript, on React Aria

attribute	solidtype	React

ScrollShadow

Usage

Examples

Orientation

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

Shadow Size

With Card

Terms and Conditions

Hide Scroll Bar

Visibility Change

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

Customization

Tailwind CSS

Global CSS

Styling Reference

CSS Classes

CSS Variables

Data Attributes

API Reference

ScrollShadow

Beside React