# 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.

Example: https://hextaui.com/docs/scroll-fade/examples/edge
Component docs: https://hextaui.com/docs/scroll-fade.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/scroll-fade-edge.json
```

This adds `components/examples/scroll-fade/edge.tsx` with the Scroll fade component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/scroll-fade/edge.tsx"
"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>
  )
}
```

## More Scroll fade examples

- [Horizontal](https://hextaui.com/docs/scroll-fade/examples/horizontal.md)