PaceUI

Blocks
MCPComponentsTemplatesChartsStarter
Native AI
Introduction
Components
Browser SupportResponse RendererChat HeaderChat MessagesChat SuggestionsChat Input
Use Cases
Quick ChatFollow Ups
Hooks
useBrowserSupportuseNativeAI

Chat Messages

PreviousNext

An auto-scrolling message list rendering user queries, AI responses, loading statuses, and typing indicators.

npx shadcn add ...

Loading preview...

Overview

The ChatMessages component takes a history list and handles layout, styling, system-role filtering, empty states, and auto-scrolling to the bottom as new content streams in.

default.tsx

API Reference

Props

PropTypeDescriptionDefault
messagesChatMessage[]A list of user, system, and assistant messages.(Required)
isLoadingbooleanIf true, displays a typing indicator at the end of the conversation.false
isSupportedbooleanDetermines whether to show the emptyState component.false
messagesEndRefRefObject<HTMLDivElement>React ref attached to the auto-scroll target element at the base of the list.(Required)
emptyStateReactNodeThe UI view to display when the message list is empty.undefined
Chat HeaderChat Suggestions

PaceUI

The ultimate toolkit empowering your designers and developers to launch their next big idea without ever settling on quality

Pages

ComponentsBlocksMCPTemplatesStarter

Account

ManageLicensesPricing

Support

AffiliateContact UsPrivacy PolicyTerms of ServiceDocs

© 2026 PaceUI. All rights reserved. Built by indie developer, Denish

PACEUI