# 10 AI Chat UI Components for React & Tailwind

> Interface pieces for AI products: auto-growing prompt inputs with model pickers, chat threads with streaming replies, thinking steps, tool-call cards, source citations, model comparisons and a voice orb.

3 of 10 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [AI Chat Thread](https://pixelpapa.com/components/ai/ai-chat-thread.md) (Pro): A chat thread where user bubbles spring in from the right and the assistant reply streams in chunks behind a blinking caret, auto-scrolling as it grows.
- [AI Code Block With Copy](https://pixelpapa.com/components/ai/ai-code-block-copy.md) (Pro): A code answer with sliding language tabs, line numbers, highlighted lines that wipe in, and a copy button that morphs into a confirmed tick.
- [AI Model Compare](https://pixelpapa.com/components/ai/ai-model-compare.md): A blind side-by-side: two answers stream at their own speeds with live token stats, then your vote crowns a winner and reveals both model names.
- [AI Prompt Input](https://pixelpapa.com/components/ai/ai-prompt-input.md) (Pro): A chat composer with an auto-growing textarea, removable attachment chips, a model picker popover and a send button that morphs into stop while generating.
- [AI Source Citations](https://pixelpapa.com/components/ai/ai-source-citations.md): An answer with numbered citation markers; hovering or focusing one pops a source card and lights the matching source in the strip below.
- [AI Streaming Markdown](https://pixelpapa.com/components/ai/ai-streaming-markdown.md): Renders a markdown answer as it streams: each word fades up out of a blur, with headings, lists, bold and inline code formatted as they arrive.
- [AI Suggestion Chips](https://pixelpapa.com/components/ai/ai-suggestion-chips.md) (Pro): Prompt suggestions grouped by intent; chips cascade in when you switch group, and picking one types its prompt into the input.
- [AI Thinking Steps](https://pixelpapa.com/components/ai/ai-thinking-steps.md) (Pro): A collapsible reasoning trace: the header shimmers and runs a live timer while steps tick from spinner to check, then folds to "Thought for Ns".
- [AI Tool Call Card](https://pixelpapa.com/components/ai/ai-tool-call-card.md) (Pro): An agent tool invocation card: a sweep runs along the border while the call is in flight, then the status flips to done and the result preview unfolds.
- [AI Voice Orb](https://pixelpapa.com/components/ai/ai-voice-orb.md) (Pro): A glowing orb that breathes when idle, swells with simulated microphone level while listening, swirls while thinking and pulses in speech rhythm while speaking.