AI chat UI components
For an animated AI chat in React, start with Composer, the input that grows with the text, takes attachments and turns Send into Stop, and Thinking Bar, which shows reasoning progress. Message renders the bubbles, and Conversation is the streaming list that follows the reply until the user scrolls away. Tool Call Row and Agent Run show tool calls while they run.
They target React 19 and Tailwind CSS v4 and install as editable source through the shadcn CLI. Composer, Message and Conversation read the status and messages that useChat() returns, so connecting them to the Vercel AI SDK takes a few props, not an adapter.
7 components here are free under MIT; Conversation, Tool Call Row and Agent Run need a Pro licence.
10 components, running
A chat composer that grows on a spring, opens an attachments row with Auto Height, and morphs its Send arrow into a Stop square while a reply streams.
npx shadcn add https://eased.dev/r/composer.jsonA chat message: the user's in a sunken bubble on the right, the assistant's flush on the left.
npx shadcn add https://eased.dev/r/message.jsonA chat thread that follows a streaming reply on one spring and lets go the moment you scroll up, raising a Jump to latest pill that turns into New reply when more arrives.
npx shadcn add @eased-pro/conversationA chat attachment: images as a thumbnail that sharpens from a blur once decoded, files as a typed chip.
npx shadcn add https://eased.dev/r/attachment.jsonTypography for rendered markdown and rich text, from one element map in two densities: chat for replies and document for long reads.
npx shadcn add https://eased.dev/r/prose.jsonShiki-highlighted code in warm stone and cream themes, with a file title bar and language pill, a copy button that morphs into a check while "Copied" slides out, highlighted and focused lines, and long blocks that collapse under a progressive blur with "Show 22 more lines".
npx shadcn add https://eased.dev/r/code-block.jsonThe line above a reasoning model's answer: the label shimmers while a seconds counter rolls, then "Thinking" morphs into "Thought for 12s" and the reasoning folds away a second after the answer starts.
npx shadcn add https://eased.dev/r/thinking-bar.jsonShimmer text for React: a soft band of light sweeps across a label while something is working.
npx shadcn add https://eased.dev/r/shimmer-text.jsonA tool call as a flush row: while it runs a band of light travels down its left rule and the seconds roll; when it lands the check draws and the result count rolls up; an error shakes it once.
npx shadcn add @eased-pro/tool-call-rowAn agent's run as it happens: steps stream onto a rail and rise once as they land, with each step's tool calls inline.
npx shadcn add @eased-pro/agent-run
The chat window and nothing around it
The agent UI guide covers what surrounds a run, such as approvals, an activity pill and a voice orb. This page stays inside the thread, from the box you type in to the last streamed word, for a chat you can ship without the rest. React agent UI components
How to install
1.Start with the input box:
npx shadcn add https://eased.dev/r/composer.json2.Then the bubbles. Message brings Attachment with it, so file parts in a message render too:
npx shadcn add https://eased.dev/r/message.json3.Conversation is in Pro. Set up your token for the @eased-pro registry once, then: Pro setup
npx shadcn add @eased-pro/conversation
Questions
Does it work with useChat() from the AI SDK?
Yes. Message takes a UIMessage, Composer takes useChat().status and shows Stop while a reply is submitted or streaming, and Conversation takes the messages array and follows the reply as it grows.
How does a streaming reply render?
Conversation renders assistant text as markdown through Streamdown, so an unclosed bold mark or half a table mid-stream still looks finished. Each new word fades in from a 4px blur, and code fences become Eased Code Blocks.
What shows while the model is thinking?
Thinking Bar counts the seconds while the model reasons, then reads Thought for 12s and folds away. For a status such as Searching 14 sources, Shimmer Text sweeps a band of light across the words.
Which parts need Pro?
Conversation, Tool Call Row and Agent Run. Composer, Message, Attachment Chip, Prose, Code Block, Thinking Bar and Shimmer Text install with the shadcn CLI and no token.