# Message components

> Choose from 19 message components designed for React and Tailwind CSS, perfect for user communication in Next.js apps.

48 components available. Showing all of them below.

- [Message loading](https://21st.dev/@jakobhoeg/components/message-loading.md) — by Jakob Hoeg Mørk
- [Message Design Card List](https://21st.dev/@kristen17/components/message-design-card-list.md) — by kristen17
- [Message](https://21st.dev/@vercel-crawled/components/message.md) — by Vercel
- [User Message](https://21st.dev/@serafimcloud/components/user-message.md) — by Serafim
- [User Message](https://21st.dev/@serafimcloud/components/user-message/with-image.md) — by Serafim
- [Message](https://21st.dev/@educlopez/components/message.md) — by Edu Calvo
- [Message Draft](https://21st.dev/@tool-ui/components/message-draft.md) — by Tool UI
- [Chat Interface](https://21st.dev/@tonyzebastian/components/chat-interface.md) — by Tony Sebastian
- [Floating Chat Widget](https://21st.dev/@moumensoliman/components/floating-chat-widget-shadcnui.md) — by Moumen Soliman
- [AI Chat](https://21st.dev/@beratberkayg/components/ai-chat.md) — by beratberkay
- [Chat Bubble](https://21st.dev/@jakobhoeg/components/chat-bubble.md) — by Jakob Hoeg Mørk
- [Ai Assistant](https://21st.dev/@coderislive07/components/ai-assistat.md) — by Mridul Dhamija
- [Toast](https://21st.dev/@shugar/components/toast.md) — by tigran tumasov
- [Toast](https://21st.dev/@shugar/components/toast/multi-line.md) — by tigran tumasov
- [Toast](https://21st.dev/@shugar/components/toast/action.md) — by tigran tumasov
- [Toast](https://21st.dev/@shugar/components/toast/preserve.md) — by tigran tumasov
- [Toast](https://21st.dev/@shugar/components/toast/with-a-link.md) — by tigran tumasov
- [Toast](https://21st.dev/@shugar/components/toast/with-jsx.md) — by tigran tumasov
- [Toast](https://21st.dev/@shugar/components/toast/undo.md) — by tigran tumasov
- [Chat Preview](https://21st.dev/@meenic/components/chat-preview.md) — by meenic
- [Messaging Conversation](https://21st.dev/@preetsuthar17/components/messaging-conversation.md) — by Preet Suthar
- [Email Client Card](https://21st.dev/@kavikatiyar/components/email-client-card.md) — by Kavi Katiyar
- [Notification Alert Dialog](https://21st.dev/@rynkovski/components/notification-alert-dialog.md) — by ExtendUI
- [Agent Chat](https://21st.dev/@serafimcloud/components/agent-chat.md) — by Serafim
- [Card](https://21st.dev/@ravikatiyar162/components/card-15.md) — by Ravi Katiyar
- [Agent Chat](https://21st.dev/@serafimcloud/components/agent-chat/error.md) — by Serafim
- [Voice Message Bubble](https://21st.dev/@ruixen.ui/components/voice-message-bubble.md) — by Ruixen UI
- [Cursor](https://21st.dev/@haydenbleasel/components/cursor.md) — by Hayden Bleasel
- [Minimal Chat Box](https://21st.dev/@ruixen.ui/components/minimal-chat-box.md) — by Ruixen UI
- [Basic Chat](https://21st.dev/@beratberkayg/components/basic-chat.md) — by beratberkay
- [Gradient Chat Input](https://21st.dev/@ruixen.ui/components/gradient-chat-input.md) — by Ruixen UI
- [Notification](https://21st.dev/@hari/components/notification.md) — by Hari Lamichhane
- [Animated List](https://21st.dev/@aghasisahakyan1/components/animated-list.md) — by Erik X
- [Conversation](https://21st.dev/@vercel-crawled/components/conversation.md) — by Vercel
- [Error Message](https://21st.dev/@serafimcloud/components/error-message.md) — by Serafim
- [Reaction Chip](https://21st.dev/@jatin-yadav05/components/reaction-chip.md) — by Jatin Yadav
- [Chat Messages](https://21st.dev/@solaceui/components/chat-messages-2.md) — by Solace UI
- [Chat Messages](https://21st.dev/@nexus-ui/components/chat-messages.md) — by Nexus UI
- [Error Message](https://21st.dev/@serafimcloud/components/error-message/network.md) — by Serafim
- [Branch](https://21st.dev/@vercel-crawled/components/branch.md) — by Vercel
- [Floating Panel](https://21st.dev/@anubra266/components/floating-panel/chat-widget-panel.md) — by Abraham
- [Chat Scroll Area](https://21st.dev/@bundui/components/scroll-area6.md) — by Shadcn UI Kit
- [AI Message Bubble](https://21st.dev/@elements-/components/message-bubble.md) — by Cameron Kelliher
- [AI Conversation Tree](https://21st.dev/@elements-/components/conversation-tree.md) — by Cameron Kelliher
- [Message Circle More Icon](https://21st.dev/@skyleen77/components/message-circle-more.md) — by Elliot Sutton
- [Sonner Custom Toast](https://21st.dev/@bundui/components/toast10.md) — by Shadcn UI Kit
- [Chat Thread Skeleton](https://21st.dev/@cnippet.dev/components/v-skeleton-9.md) — by Cnippet
- [Message Circle Code Icon](https://21st.dev/@skyleen77/components/icons-message-circle-code.md) — by Elliot Sutton

Full component directory: https://21st.dev/llms.txt