A scroll area whose edges fade while there's more to see, instead of a scrollbar.
$ pnpm dlx shadcn@latest add https://dashral.com/r/scroll-shadow.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/scroll-shadow.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
components.json
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/scroll-shadowUsage
example.tsx
import { ScrollShadow } from "@/components/dashral/scroll-shadow"
<ScrollShadow className="h-64 space-y-2">
{notifications.map((notification) => (
<p key={notification.id}>{notification.text}</p>
))}
</ScrollShadow>Examples
Horizontal with arrows
arrows adds ‹ › buttons for mouse users without a trackpad; keyboard users tab through the items.
Chat
Opens at the latest message; a new one scrolls into view, and the fade says there's more above.
API reference
ScrollShadow
| Prop | Type | Default |
|---|---|---|
as | ElementTypeThe element that scrolls, e.g. "ul". | "div" |
orientation | "vertical" | "horizontal" | "vertical" |
size | numberFade length in pixels. | 40 |
scrollbar | booleanShow the scrollbar too. | false |
arrows / step | boolean / numberHorizontal: ‹ › buttons and how far they scroll. | false / 80% of the width |
Keyboard
| Keys | Action |
|---|---|
| Tab | Focusable content scrolls into view |
| Arrow keysorPage UporPage Down | Scroll when the area itself has focus |
Accessibility
- The fades and arrows are decorative; every way of scrolling keeps working.
Motion
- Arrow clicks scroll smoothly; instantly with reduced motion.