Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Scroll Area examples · Layout

Chat Messages Scroll Area for React

A chat message list in a fixed-height scroll area, with avatars, names and timestamps.

Framework
UI library

Chat interfaces live or die by their scrolling. This example stacks eight messages in a 400px Scroll Area, each with an Avatar (image and initials fallback), the sender's name, a timestamp, and the text. The conversation scrolls inside its border while the page stays still. Use it for chat widgets, comment threads, activity feeds, and other lists of messages people scroll back through.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What height is the message list?

ScrollArea is h-[400px], with rounded-md border bg-background. Eight messages scroll inside that box. The wrapper around the area is w-full max-w-md.

How is one message laid out?

A row with flex gap-3. Avatar is first. The name, time, and text stack in flex-1 with gap-1. The name and time share a row with flex items-baseline gap-2.

What does the avatar show?

AvatarImage uses alt set to the sender's name and src set to their image. AvatarFallback is the initials, such as HB or SC. Avatar leaves size at the default.

How are the name and time styled?

The name is a span with font-semibold text-sm. The time is a span with text-xs text-muted-foreground, a clock time such as 10:30 AM. The message is a p with text-sm.

Where is the padding between messages?

The inner wrapper is flex flex-col gap-4 p-4. The gap is between messages, and the padding scrolls with them. This file renders a static list. It does not move the scroll position when it renders.

How many messages are in the file?

Eight, each with an id, a user, a time, and a message. The row key is msg.id. The list is the only child of ScrollArea.

All 8 scroll area examples