Chat Component
A customizable chat window component built with Shadcn UI and React.
View SourceAS
Ann SmithAKAFront-end developer
Get a complete, ready-to-use chat page added to your project in one command. This installs a fully wired-up app/chat/page.tsx with sample data and message components.
Then visit /chat in your browser to see the result.
Prerequisites
The chat component is compatible with any environment that supports React and has shadcn/ui configured.
This guide assumes you are already familiar with both of these technologies. If you are not, you can review their documentation here.
This will install all the chat components and their dependencies into your project.
The root container component that establishes the chat layout structure with container queries and flex column layout for header, messages, and toolbar sections.
Responsiveness
The Chat component uses container queries (ex. @2xl/chat:) to adapt its layout based on the available width, ensuring an optimal user experience across different device sizes.
Make sure that the Chat component is given a defined height or max-height (ex. via CSS or parent container) to enable proper scrolling behavior for the messages section.
A sticky header component with flexible layout. Use ChatHeaderMain for the primary content area (takes remaining space) and ChatHeaderAddon for grouping items on either side. Includes ChatHeaderAvatar for profile images and ChatHeaderButton for action buttons.
AS
Ann SmithAKAFront-end developer
A scrollable flex container with reverse column direction that displays chat messages from bottom to top, automatically handling overflow.
A flexible message row component for displaying any message or event in the chat. Use ChatEventAddon for side content like avatars or timestamps, and ChatEventBody for the main content area. Inside the body, use ChatEventTitle for sender name and metadata, and ChatEventContent for the message text. Use ChatEventAvatar for profile images and ChatEventTime for localized timestamp formatting with preset formats.
Primary Message
Jo
John Doe
Oh, and could you also share those user feedback notes? I want to make sure we're really nailing what they need before we ship this.
Additional Message
Hey John, just wanted to say - the new dashboard design looks fantastic! The way you organized the metrics is super intuitive. I can already tell our users are going to love it. Great work on this! 🙌
Date Item
A sticky bottom input area for message composition. Use ChatToolbar as the container, ChatToolbarTextarea for the input field with built-in submit handling (Enter to submit, Shift+Enter for new line), and ChatToolbarAddon to position action buttons using the align prop ("inline-start", "inline-end", "block-start", "block-end"). Use ChatToolbarButton for consistent icon button styling.
Enjoying the Component?
If you found this useful, consider giving it a star on GitHub. Got ideas or feedback? Open an issue — every bit helps!