Shadcn.io is not affiliated with official shadcn/ui
Chat Message Translation
React chat block with inline message translation for Next.js featuring translate toggle, language labels, original and translated views, and GlobeIcon indicators using TypeScript, shadcn/ui, Framer Motion, and Tailwind CSS
Translate messages inline within your React and Next.js chat interface. Each foreign-language message shows a Translate link that reveals the translated text below the original with a Globe icon and source language label. Toggle between original and translated views per message. Built with TypeScript, shadcn/ui Avatar and Button components, Framer Motion for smooth expand animations, and Tailwind CSS. Perfect for multilingual teams, international customer support, travel coordination, and any cross-language conversation workflow.
Related Components
Chat Bubble Style
Bubble-style chat messages
Chat Flat Messages
Flat layout chat messages
Chat Read Receipts
Message delivery and read status
Chat Typing Indicator
Typing status display
Chat Direct Message
One-on-one direct messaging
Chat Mention Autocomplete
Chat with @mention autocomplete
FAQ
Was this page helpful?
Sign in to leave feedback.
Message Search
React chat block with message search and highlighting for Next.js featuring a search input in the header, real-time message filtering, yellow text highlighting, and match count display using TypeScript, shadcn/ui, and Tailwind CSS
Messenger Style
React Facebook Messenger-inspired chat interface for Next.js with gradient sent bubbles, circular avatars on message groups, quick-send thumbs up, and active status using TypeScript, shadcn/ui, and Tailwind CSS