Radzen Blazor Components

Chat

A modern chat component for multi-participant conversations with support for distinct user identities. Perfect for team chats, group discussions, and real-time messaging applications.

Team Chat
JD
JS
BJ
JD
11:44

Welcome to the team chat! 👋

JS
Jane Smith
11:45

Thanks John! Looking forward to working together.

BJ
Bob Johnson
11:46

Same here! Let's make this project amazing! 🚀

Console log

Multi-participant support link

The Chat component supports multiple users with distinct identities, avatars, and online status indicators. Use Users to manage the chat users and CurrentUserId to identify the current user.

Multi-User Chat
JD
JS
BJ
AB
JD
11:44

Hello team! 👋

JS
Jane Smith
11:45

Hi John! Ready for our sprint planning?

BJ
Bob Johnson
11:46

Absolutely! I've prepared the user stories.

AB
Alice Brown
11:47

Perfect! Let's get started. 🚀

User Management
John Doe
User List
JD

John Doe

OnlineYou
JS

Jane Smith

Online
BJ

Bob Johnson

Offline
AB

Alice Brown

Online
Multi-User Features
User Management
  • Add and remove users dynamically
  • Each participant has a unique identity and avatar
  • Online/offline status tracking
  • User list displayed in chat header
Message Features
  • Messages are aligned based on sender (user vs users)
  • User names shown above messages
  • Avatar initials generated from participant names
  • Message timestamps for all users

Customization options link

Customize the appearance and behavior of the Chat component using various properties like ShowUsers, ShowUserNames, MaxVisibleUsers, and ShowClearButton.

Customizable Chat
JD
JS
BJ
AB
CW
+1
chat_bubble_outline

No messages yet. Start a conversation!

Display Options
Text Customization
Customization Features
Display Controls
  • ShowUsers - Toggle participant avatars in header
  • ShowUserNames - Show/hide names above messages
  • ShowClearButton - Control clear chat button visibility
  • MaxVisibleUsers - Limit header participant display
Text Customization
  • Placeholder - Customize input field placeholder
  • EmptyMessage - Set message when chat is empty
  • Title - Set chat header title
  • All text properties support localization

Events and interactions link

Handle chat events like MessageAdded, MessageSent, UserAdded, and ChatCleared to integrate with your application logic and provide real-time updates.

Events Demo
JD
JS
BJ
JD
11:44

Welcome to the events demo! 🎉

JS
Jane Smith
11:45

This chat demonstrates all the available events.

BJ
Bob Johnson
11:46

Try the buttons above to see events in action!

Console log

Compact chat link

Create a more compact chat interface suitable for smaller spaces or sidebar implementations by adjusting the height and hiding optional elements.

Compact Chat
Team Chat
JO
JA
BO
+1
JO
11:44

Quick update: Project is on track! ✅

JA
11:45

Great news! 🎉

BO
11:46

Thanks for the update

AL
11:47

Perfect timing for the demo

Minimal Chat
JO
11:44

Quick update: Project is on track! ✅

JA
11:45

Great news! 🎉

BO
11:46

Thanks for the update

AL
11:47

Perfect timing for the demo

Compact Chat Features
Space-Saving Options
  • Reduced height for sidebar implementations
  • Hide participant names to save vertical space
  • Limit visible users in header
  • Remove optional UI elements (clear button, title)
Use Cases
  • Sidebar chat panels
  • Mobile-responsive layouts
  • Embedded chat widgets
  • Minimal notification systems
All the tools in one place

Code Less. Deliver More.

With Radzen Subscription you get the full toolkit. Get started now and save hours on every project.

task_alt

Complete Blazor development environment.

task_alt

Open technology stack. No vendor lock-in.

task_alt

Ready-to-use UI blocks and app templates.

task_alt

Advanced theming.

task_alt

Dedicated support backed by proven expertise.

task_alt

No hidden runtime costs.

Radzen Blazor Studio

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT

Demos Configuration

Premium Themes

  • Material 3
  • Material 3 Dark
  • Fluent
  • Fluent Dark

Free Themes

  • Material
  • Material Dark
  • Standard
  • Standard Dark
  • Default
  • Dark
  • Humanistic
  • Humanistic Dark
  • Software
  • Software Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙