DUMessageBubble
MessagingChat bubble for inbound/outbound messages.
import { DUMessageBubble } from 'deri-ui';Live preview
Incoming message
Outgoing reply
now
typescript
<DUMessageBubble mine time="2:14">Hello</DUMessageBubble>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mine | boolean | — | Outgoing style |
| time | string | — | Timestamp |
| children | ReactNode | — | Body |
Usage
import { DUMessageBubble } from 'deri-ui';
<DUMessageBubble mine time="2:14">Hello</DUMessageBubble>Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.