Messaging components
Learn how to use the messaging components in your project.
- Phonenix BakerFriday 2:20pmHey Olivia, can you please review the latest design when you can?
- Phonenix BakerFriday 2:20pmSure thing, I'll have a look today.Awesome, thanks!
- Phonenix BakerFriday 2:20pmHey Olivia, can you please review the latest design when you can?
- ❤️
- 👌2
- Phonenix BakerFriday 2:20pm
Latest design screenshot.jpg
1.2 MB
- Phonenix BakerFriday 2:20pm
Hey Olivia, can you please review the latest design when you can? - Phonenix BakerFriday 2:20pm
Latest design screenshot.jpg
128 KB
- Phonenix BakerFriday 2:20pmHey Olivia, can you please review the latest design when you can?
Untitled UI — Figma UI Kit and Design System
Untitled UI is the largest UI kit and design system for Figma in the world. Kickstart any project, save thousands of hours, and level up as a designer.
- Phonenix BakerFriday 2:20pm
00:28
- YouFriday 2:20pmSure thing, I'll have a look today
- ❤️
- 👌2
- Phonenix Baker
Installation
Messaging component depends on other components to function properly. Before using them, make sure to add the required components via CLI.
Use the following command to install them:
npx untitledui add messaging
Message status
In order to display the message status separately, you can use the MessageStatus component. It accepts the status prop which can be one of the following:
sentreadfailed
Optionally, you can also pass the readAt prop to display the date and time when the message was read.
Message action examples
Below are examples and variations of this message action component: