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.
Chat Controls
person_add Add User Message
message Add User Message
delete_history Clear Chat
send Send Message
JD
Welcome to the team chat! 👋
JS
Thanks John! Looking forward to working together.
BJ
Same here! Let's make this project amazing! 🚀
Console log
Clear console
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.
JS
Hi John! Ready for our sprint planning?
BJ
Absolutely! I've prepared the user stories.
AB
Perfect! Let's get started. 🚀
User Management
person_add Add User
person_remove Remove Last
message Add Sample Messages
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
.
chat_bubble_outline
No messages yet. Start a conversation!
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.
Event Testing Controls
send Send Message
person_add Add User
person_remove Remove User
delete_history Clear Chat
JD
Welcome to the events demo! 🎉
JS
This chat demonstrates all the available events.
BJ
Try the buttons above to see events in action!
Console log
Clear console
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
JO
Quick update: Project is on track! ✅
AL
Perfect timing for the demo
Minimal Chat
JO
Quick update: Project is on track! ✅
AL
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 Components, © 2018-2025 Radzen.
Source Code licensed under
MIT