104Get started
HextaUI

Scroll fade: One edge

A chat starts at the bottom, so only older messages above need a hint. scroll-fade-t fades the top alone, and scroll-fade-t-16 makes it taller.

  • Sounds good, ship it.
  • Pushed the fix to main.
  • Pushed the fix to main.
  • Sounds good, ship it.
  • Pushed the fix to main.
  • Pushed the fix to main.
  • Sounds good, ship it.
  • Pushed the fix to main.
  • Pushed the fix to main.
  • Sounds good, ship it.
  • Pushed the fix to main.
  • Pushed the fix to main.
  • Sounds good, ship it.
  • Pushed the fix to main.
  • Pushed the fix to main.
  • Sounds good, ship it.
"use client"

const messages = Array.from({ length: 16 }, (_, index) => ({
  id: index,
  text: index % 3 === 0 ? "Sounds good, ship it." : "Pushed the fix to main.",
}))

export function ScrollFadeEdge() {
  return (
    <div className="w-full max-w-xs rounded-xl bg-muted">
      <ul
        ref={(node) => {
          if (node) {
            node.scrollTop = node.scrollHeight
          }
        }}
        tabIndex={0}
        aria-label="Messages"
        className="flex h-64 scroll-fade-t flex-col gap-2 overflow-y-auto rounded-xl p-3 text-sm outline-none scroll-fade-t-16 focus-visible:ring-3 focus-visible:ring-focus-ring focus-visible:outline-hidden"
      >
        {messages.map((message) => (
          <li
            key={message.id}
            className="w-fit max-w-[80%] shrink-0 rounded-2xl bg-background px-3 py-2 even:self-end even:bg-primary even:text-primary-foreground"
          >
            {message.text}
          </li>
        ))}
      </ul>
    </div>
  )
}

Add this example

This adds the example as components/examples/scroll-fade/edge.tsx, together with the Scroll fade component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/scroll-fade-edge.json

To add only the component, follow the Scroll fade installation.

More Scroll fade examples

See them all, with keyboard support and accessibility notes, on the Scroll fade page.