Send a message
Sending a chat message: the mic turns into a send arrow as you type, your message rises into the thread, the read receipt slides down to it and their reply takes the typing bubble's place.
- Found the totals bug: tax was rounding twice
- Did the checkout fix go out?
- Building now, two minutes
Things to try
- Start typing. The mic turns into a send arrow.
- Send. Your message rises out of the composer into the thread, pushing the others up.
- Wait for a reply. Their face slides down to your message once they've read it, a typing bubble bounces in, and their reply takes its place.
Install
npx shadcn@latest add https://your-docs-site/r/send-message.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Mic to arrow. The composer's button reshapes between the two icons with
Remold.Icon. - The same face, a newer message. The read receipt is one small avatar moving to the latest message it has seen, which is what Motion's
layoutIdis for.
The people are made up. Avatars are illustrations from DiceBear.
Seat calculator
Pricing by team size, the calculator on a SaaS pricing page: drag the slider and faces join your team, the price rolls, the plan steps up at each tier, and yearly billing shows what you save.
Send money
Sending money from a keypad, the way mobile-money and wallet apps do it: digits roll in, the commas make room, an amount over your balance is refused with a shake, and Send becomes a spinner and then a check.