styple

ScrollShadow

Shadows to hint at scrollable content.

Example

A long example line that overflows the container element, since white-space nowrap is applied. A native-like scrollbar is added through ScrollArea. It works both vertically and horizontally.

import { ScrollShadow } from "@styple/design-system";

<ScrollShadow direction="horizontal" withScrollArea>
  <Container css={{
    maxWidth: "$4xl",
    height: "$lg",
    whiteSpace: "nowrap"
  }}>
    <Text>A long example line that overflows the container element, since white-space nowrap is applied. A native-like scrollbar is added through ScrollArea. It works both vertically and horizontally.</Text>
  </Container>
</ScrollShadow>

API Reference

ScrollShadow

A custom styled component with props:

Prop	Type	Default	Explanation
`direction`	`string`	`"vertical"`	Orientation of the shadows.
`withScrollArea`	`boolean`	`false`	Whether to render with `ScrollArea` or native.

If needed you can customize the shadow size and color by overriding the locally scoped tokens $$shadowSize = $sizes$md and $$shadowColor = $colors$bg100A via the css prop. Though this is not recommended.

ScrollArea

SearchField