104Get started
HextaUI

Scroll area: Start at the bottom

viewportRef gives you the scrolling element. Set its scrollTop to start a chat at the latest message, so only the top edge fades.

"use client"

import * as React from "react"

import { ScrollArea } from "@/components/ui/scroll-area"

export function ScrollAreaChat() {
  const viewportRef = React.useRef<HTMLDivElement>(null)

  React.useLayoutEffect(() => {
    const viewport = viewportRef.current
    if (viewport) {
      viewport.scrollTop = viewport.scrollHeight
    }
  }, [])

  return (
    <ScrollArea
      viewportRef={viewportRef}
      aria-label="Messages"
      className="h-56 w-full max-w-sm rounded-lg border"
    >
      <div className="flex flex-col gap-2 p-3 text-sm">
        {Array.from({ length: 24 }, (_, index) => (
          <p
            key={index}
            className={
              index % 3 === 0
                ? "self-end rounded-lg bg-primary px-3 py-2 text-primary-foreground"
                : "self-start rounded-lg bg-muted px-3 py-2"
            }
          >
            Message {index + 1}
          </p>
        ))}
      </div>
    </ScrollArea>
  )
}

Add this example

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

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

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

Props in this example

The Scroll area props this example sets, from the API reference.

ScrollArea

PropTypeDefault
viewportRefThe element that scrolls.
Ref<HTMLDivElement>–
className
string | (state) => string–

Every prop is in the Scroll area API reference.

More Scroll area examples

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

Related components