Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Chat Messages Scroll Area for Solid

A fixed-height list of chat messages. Each row has an avatar, a name, a timestamp and a message.

UI library: Ark UI

A fixed-height panel lists chat messages. Each row has an avatar, a name, a time such as 10:30 AM and a message. The list scrolls vertically.

Use a fixed-height panel for a transcript that should not grow the page. A Message Scroller sticks to the latest message. On Solid, Ark UI does not send the messages.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Scroll Area anatomy: root, viewport, content, scrollbar, thumb

Usage

<div class="w-full max-w-md">
    <ScrollArea class="h-[400px] rounded-md border bg-background">
      <div class="flex flex-col gap-4 p-4">
        {messages.map(msg => <div class="flex gap-3">
            <Avatar>
              <AvatarImage alt={msg.user} src={msg.avatar} />
              <AvatarFallback>{msg.initials}</AvatarFallback>
            </Avatar>
            <div class="flex flex-1 flex-col gap-1">
              <div class="flex items-baseline gap-2">
                <span class="font-semibold text-sm">{msg.user}</span>
                <span class="text-muted-foreground text-xs">
                  {msg.time}
                </span>
              </div>
              <p class="text-sm">{msg.message}</p>
            </div>
          </div>)}
      </div>
    </ScrollArea>
  </div>

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.

API Reference

Scroll Area

No extra props in this demo. The rest is on the Scroll Area page.

Avatar

Sets alt={msg.user} and src={msg.avatar}. The rest is on the Avatar page.

All 8 scroll area examples