Shadcn.io is not affiliated with official shadcn/ui
React AI Chat Floating Widget Block
React AI floating chat widget block for Next.js with collapsible bubble, compact chat panel, toggle animation, and embedded message input using shadcn/ui and Tailwind CSS
Add a floating AI chat widget to your React and Next.js app with this TypeScript block. Shows a compact sparkle button that expands into a 400px-tall chat panel with messages, a text input, and a header with close controls. The widget uses relative positioning for preview compatibility but can be switched to fixed bottom-right for production use. Built with shadcn/ui, Tailwind CSS, and the AI SDK message components for embed-anywhere chat.
React AI Chat Floating Widget Block preview
Installation
Related Components
AI Message
Chat message component
AI Conversation
Chat container
AI Reasoning
Thinking display
AI Sources
Citation links
FAQ
Was this page helpful?
Sign in to leave feedback.
React AI Chat Empty State Block
React AI chat empty state block for Next.js with welcome heading, suggestion cards in 2x2 grid, animated icon, and conversation starter prompts using shadcn/ui and Tailwind CSS
React AI Chat Fullscreen Block
React AI fullscreen chat block for Next.js with immersive gradient background, large centered messages, and floating suggestions using shadcn/ui and Tailwind CSS