# Chat components > Build interactive messaging experiences using 39 chat components, designed for React with Tailwind CSS and Next.js support. 57 components available. Showing all of them below. - [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 - [Chat Bubble](https://21st.dev/@jakobhoeg/components/chat-bubble.md) — by Jakob Hoeg Mørk - [Chat template](https://21st.dev/@rayimanoj8/components/chat-template/whatsapp-mock.md) — by Manoj - [RuixenMonoChat](https://21st.dev/@ruixen.ui/components/ruixen-mono-chat.md) — by Ruixen UI - [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 - [Chat Card](https://21st.dev/@kokonutd/components/chat-card.md) — by Kokonut Baffier - [Agent Chat](https://21st.dev/@serafimcloud/components/agent-chat.md) — by Serafim - [Agent Chat](https://21st.dev/@serafimcloud/components/agent-chat/empty-centered.md) — by Serafim - [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 - [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 - [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 - [Message Dock](https://21st.dev/@isaiahbjork/components/message-dock.md) — by Isaiah - [Message loading](https://21st.dev/@jakobhoeg/components/message-loading.md) — by Jakob Hoeg Mørk - [Features 9](https://21st.dev/@meschacirung/components/features-9.md) — by Méschac Irung - [FAQ Chat Accordion](https://21st.dev/@anshuman008/components/faq-chat-accordion.md) — by Anshuman - [Audio Chat](https://21st.dev/@jatin-yadav05/components/audio-chat.md) — by Jatin Yadav - [Response Stream](https://21st.dev/@ibelick/components/response-stream.md) — by Julien Thibeaut - [AI Actions](https://21st.dev/@designali-in/components/ai-actions.md) — by Ali Imam - [Whatsapp Sidebar](https://21st.dev/@rayimanoj8/components/whatsapp-sidebar.md) — by Manoj - [Messaging people list](https://21st.dev/@preetsuthar17/components/messaging-people-list.md) — by Preet Suthar - [Chat Bubble](https://21st.dev/@kavikatiyar/components/chat-bubble.md) — by Kavi Katiyar - [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 - [Gradient Chat Input](https://21st.dev/@ruixen.ui/components/gradient-chat-input.md) — by Ruixen UI - [Contact 7](https://21st.dev/@shadcnblockscom/components/contact-7.md) — by Shadcnblocks.com - [Conversation](https://21st.dev/@vercel-crawled/components/conversation.md) — by Vercel - [Message Design Card List](https://21st.dev/@kristen17/components/message-design-card-list.md) — by kristen17 - [DoctorLiveChatCard](https://21st.dev/@ruixen.ui/components/doctor-live-chat-card.md) — by Ruixen UI - [Message](https://21st.dev/@vercel-crawled/components/message.md) — by Vercel - [Actions](https://21st.dev/@vercel-crawled/components/actions.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 - [Liquid Metal](https://21st.dev/@Jakubantalik/components/metal-fx.md) — by Jakub Antalik - [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 - [Chat Suggestions](https://21st.dev/@Alwurts/components/chat-suggestions.md) — by simple-ai - [Chat Tool](https://21st.dev/@asanshay/components/chat-tool.md) — by Asan Shay - [Message Circle More Icon](https://21st.dev/@skyleen77/components/message-circle-more.md) — by Elliot Sutton - [Liquid Metal](https://21st.dev/@Jakubantalik/components/metal-fx/gold.md) — by Jakub Antalik - [Typewriter](https://21st.dev/@cult-ui/components/typewriter.md) — by cult/ui - [Message Circle Off Icon](https://21st.dev/@skyleen77/components/icons-message-circle-off.md) — by Elliot Sutton - [Message Circle Heart Icon](https://21st.dev/@skyleen77/components/icons-message-circle-heart.md) — by Elliot Sutton - [AI Suggested Actions](https://21st.dev/@elements-/components/suggested-actions.md) — by Cameron Kelliher - [Liquid Metal](https://21st.dev/@Jakubantalik/components/metal-fx/silver.md) — by Jakub Antalik - [Typing](https://21st.dev/@loading-ui/components/typing.md) — by Loading UI - [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 - [Chat Form Dropzone](https://21st.dev/@uilayout.contact/components/chat-form-dropzone.md) — by UI Layouts Full component directory: https://21st.dev/llms.txt